Для чего применяются и на что влияют xmlns и xmlns:xlink в svg?

Чем отличаются? Обязательно ли их использовать?


Ответы (2 шт):

Автор решения: Sergei Kirjanov

xlink в svg нужен, чтобы делать ссылки (как href) из svg: https://ru.wikipedia.org/wiki/XLink

В каждом svg -- не нужен.

svg -- стандарт основанный на xml (оформляется по правилам xml). xlink -- другой стандарт основанный на xml.

xmlns... -- это xml-ное использование пространства имен

xmlns:xlink="http://www.w3.org/1999/xlink" говорит о том, что ниже будет иметься ввиду xlink стандарт, который предложен организацией w3.

Вася имеет право придумать свой способ http://vasya.tk/xlink для описания котиков (который основан на xml). Коля имеет право придумать свой стандарт для описания зоопарка, и в одном из описаний сослаться на способ Васи:

<zoo xmlns:xlink="http://vasya.tk/xlink">
  <xlink:cat xlink:food="fish" />
  ... 

И все в демократичном мире xml все поймут, какой где xlink имелся ввиду.

→ Ссылка
Автор решения: Alexandr_TT

Рассмотрим вопрос на практическом примере, где в шапке SVG файла нет объявления пространства имён xmlns:xlink="http://www.w3.org/1999/xlink"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
      width="400" height="400" viewBox="0 0 400 400" >  
<symbol id="rect">
<rect x="50" y="50" width="100" height="100" rx="15"  />
</symbol>

 <use xlink:href="#rect" style="fill:purple;" /> 
   <use xlink:href="#rect" x="150" style="fill:gold;" />
</svg>   

  1. Если этот SVG код добавлен в HTML, то современные браузеры, включая Edge и IE11 выполнят его без сообщения об ошибке. Для примера, сниппет этого сайта вполне успешно воспроизводит различной сложности svg код, без добавления пространства имен xlink.
  2. Если этот SVG код сохранить, как файл с расширением - *.svg и запустить его в браузере, то получим сообщение об ошибке:

Chrome

введите сюда описание изображения

Firefox

введите сюда описание изображения

Если указать вместо xlink:href="#rect только href="#rect сообщения об ошибке парсера XML в этих браузерах не будет.

Почему так происходит? SVG2, в готовящемся к публикации стандарте W3C xlink:href объявлен не желательным, устаревшим (depricate)

Но слишком долго внедряется этот стандарт и некоторые браузеры поторопились внедрить его в свои движки.

Но safari, например не принимает href, для него валидна только xlink:href запись svg версии 1.2

Что делать, чтобы ваш SVG код был рабочим во всех браузерах?

Пока браузерные войны не закончились, пока не внедрён стандарт SVG2 лучше указывать дополнительно и "ссылочное" пространства имен xmlns:xlink="http://www.w3.org/1999/xlink". Можно сохранить для себя шаблон шапки SVG файла и начинать с него создание нового SVG кода:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"
          width="400" height="400" viewBox="0 0 400 400" >  
       </svg>   

Для кроссбраузерного решения можно писать или старую форму записи xlink:href или комбинированный вариант:

<use xlink:href="#rect" href="#rect"" style="fill:purple;" />
→ Ссылка