Эти странные теги SVG

#svg

Странные какие-то эти теги в SVG. То они парные, то одиночные.
Не пойму, когда, какие применять. 

Например, - встречаются две формы записи команды  с разной формой записи закрывающего
тега:  








Так как же правильно закрывать тег, если обе формы записи работают без сообщения
об ошибке?
    

Ответы

Ответ 1

Да, эти две формы записи будут работать без сообщения об ошибке, но только, если
код SVG встроен в HTML. 
Но если код SVG сохранён в *.svg файл и  запустить его на выполнение, то будет выдано
сообщение об ошибке: 

   

В данном случае, правильное закрывание тега      

Так зачем же применяются две формы записи закрывания тега?    

В синтаксисе SVG довольно строгая система   написания тегов. По порядку применения,
теги можно разбить на три группы:   


Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.    
Одиночные тэги     
Парные тэги   


1. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.

Одиночный тэг –  в примере ниже работает нормально. 

         

Допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга –
 добавляем одиночный тэг анимации –        

 
            
/>


Получаем сообщение об ошибке: 

       

Посмотрите внимательно на код выше. Одиночный тег анимации вложен в одиночный тег
линии. Парсер XML не понимает этого и подсказывает, что нужно изменить внешний одиночный
тэг линии на парный .    

Пример правильного закрытия тега       








Вывод – одиночные теги базовых фигур SVG заменяются на парные теги, если внутри вложены
одиночные теги анимации:    

, , , ,        

Это справедливо для всех основных фигур SVG: , , , , , , и ;       

2. Одиночные тэги.

В этом разделе находятся тэги, которые всегда применяются, только как одиночные.
Это тэги реализующие анимацию:




   

Анимационные теги всегда используются вместе с тегами объекта анимации. Они могут
находится либо внутри тегов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle”
на внешний объект, см.  листинг ниже.   







В этом примере анимационный тег находится снаружи объекта анимации, поэтому тег объекта
анимации  закрыт, как одиночный тег.        

 3. Парные теги

В этом разделе находятся теги, которые всегда применяются, только как парные. В первую
очередь это теги контейнерныx элементов, которые по определению могут содержать внутри
себя другие графические элементы и другие контейнерные элементы в качестве потомков.     

 … 
 … 
 … 
 … 
 … 
 … 
 … 
 … 

 … 
 …      

В спецификации SVG тегов много, перечислять все парные теги нет смысла.
 Полный перечень здесь.