Разница в выполнении кода файла в браузере при расширениях (.svg) и (.html)
Эти две формы записи будут работать без сообщения об ошибке, но только, если код SVG встроен инлайн в HTML.
Если код SVG сохранён в standalone *.svg
файл и запустить его на выполнение, то будет выдано сообщение об ошибке:
В данном случае, правильное закрывание тега <rect
будет - />
Так зачем же применяются две формы записи закрывания тега?
В синтаксисе SVG довольно строгая система написания тегов. По порядку применения, теги можно разбить на три группы:
Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.
Одиночные тэги
Парные тэги
Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.
--
Одиночный тэг – <line ….. />
в примере ниже работает нормально.
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="green"/>
Допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга – <line ….. />
добавляем одиночный тэг анимации – <animate attributeName=”x2″ ….. />
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson">
<animate attributeName="x2" dur="4s" begin="1s"
values="5;50;100;150;200; 800" repeatCount="indefinite" />
/>
Получаем сообщение об ошибке:
Посмотрите внимательно на код выше. Одиночный тег анимации вложен в одиночный тег линии. Парсер XML не понимает этого и подсказывает, что нужно изменить внешний одиночный тэг линии на парный </line>
.
Пример правильного закрытия тега </line>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" >
<line x1="5px" y1="100px" x2="200px" y2="50px" stroke="crimson" stroke-width="2">
<animate
attributeName="x2"
dur="4s"
begin="0.1s"
values="5;100;200;400;800;400;200;100;5"
repeatCount="indefinite" />
</line>
</svg>
Вывод – одиночные теги базовых фигур SVG заменяются на парные теги, если внутри вложены одиночные теги анимации:
<animate … />
, <animateTransform … />
, <animateMotion … />
, <animateColor … />
, <set … />
Это справедливо для всех основных фигур SVG:
<line … />
, <polyline … />
, <polygon … />
, <circle … />
, <ellipse … />
, <rect … />
,<path … />
и <use />
;
- Одиночные тэги.
--
В этом разделе находятся тэги, которые всегда применяются, только как одиночные. Это тэги реализующие анимацию:
<animate … />
<animateTransform … />
<animateMotion … />
<animateColor … />
<set … />
Анимационные теги всегда используются вместе с тегами объекта анимации. Они могут находится либо внутри тегов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle”
на внешний объект, см. листинг ниже.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" >
<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#my-circle"
attributeName="cx"
values="50;150;50"
dur="2s"
begin="0.5s"
fill="freeze"
repeatCount="indefinite"
/>
</svg>
В этом примере анимационный тег находится снаружи объекта анимации, поэтому тег объекта анимации
<line ... />
закрыт, как одиночный тег.
- Парные теги
--
В этом разделе находятся теги, которые всегда применяются, только как парные. В первую очередь это теги контейнерны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 тегов много, перечислять все парные теги нет смысла.
Полный перечень здесь.