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

Часто говорят – “Странные какие-то эти тэги в SVG. То они парные, то одиночные. Не пойму, когда, какие применять.”
Всё это так на первый взгляд, но есть довольно строгая система в их написании.

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

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

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

Можно усложнить, добавить инлайн стиль.

Все нормально. А теперь, допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга – <line ….. /> добавляем одиночный тэг анимации – <animate attributeName=”x2″ ….. />

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

Ошибка синтаксического анализа XML: несоответствующий тэг. Ожидается: </line>.

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

Вывод – одиночные тэги SVG заменяются на парные тэги, если внутри вложены одиночные тэги анимации: <animate … />, <animateTransform … />, <animateMotion … />, <animateColor … />, <set … />

Это справедливо для всех основных фигур SVG: <line … />, <polyline … />, <polygon … />, <circle … />, <ellipse … />, <rect … />,<path … /> и <use />;
Примеры одиночного и парного тэга <path >

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

В этом разделе находятся тэги, которые всегда применяются, только как одиночные. Это тэги реализующие анимацию:
<animate … />
<animateTransform … />
<animateMotion … />
<animateColor … />
<set … />
Анимационные тэги всегда используются вместе с тэгами объекта анимации. Они могут находится либо внутри тэгов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle” на внешний объект, см. второй листинг ниже.

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

В этом разделе находятся тэги, которые всегда применяются, только как парные. В первую очередь это тэги контейнерныx элементов, которые по определению могут содержать внутри себя другие графические элементы и другие контейнерные элементы в качестве потомков.
<a> … </a>
<defs> … </defs>
<glyph> … </glyph>
<g> … </g>
<marker> … </marker>
<mask> … </mask>
<missing-glyph> … </missing-glyph>
<pattern> … </pattern>
<svg> … </svg>
<switch> … </switch>
<symbol> … </symbol>
В спецификации SVG тэгов много, перечислять все парные тэги нет смысла. Полный перечень здесь.

⇚ Структура SVG документа
⇛ Как добавить SVG в HTML5 страницу

Добавить комментарий