Чем отличаются? Обязательно ли их использовать?
2 ответа
Рассмотрим вопрос на практическом примере, где в шапке 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>
- Если этот SVG код добавлен в HTML, то современные браузеры, включая
Edge
иIE11
выполнят его без сообщения об ошибке. Для примера, сниппет этого сайта вполне успешно воспроизводит различной сложности svg код, без добавления пространства имен xlink. - Если этот 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;" />
-
То есть по сути, оба варианта (xmlns и xmlns:xlink), и у вас тут ещё есть третий вариант - xlink:href не имеют особой разницы между собой (разве что есть более устаревшие варианты записи). Я правильно понимаю?– Eva17 авг 2020 в 14:03
-
@eva Вы правильно поняли, что есть устаревшие записи и записи в новом стандарте SVG2. Но он ещё не принят. Поэтому, чтобы не было проблем с кроссбраузерностью ваших приложений, пишите, как указано в конце ответа. Перед этим был просто анализ возможных вариантов 17 авг 2020 в 14:08
-
1
-
1Ага, хорошо. Не совсем ещё понимаю вот что - чем отличаются xmlns и xmlns:xlink? И то, и то это пространство имён? Хmlns указывает просто на то, что употребляется пространство имён, а xmlns:xlink говорит о том, что к этой странице прикреплен xml? Как? Столько информации прочитано, но до сих пор непонятно– Eva17 авг 2020 в 14:52
-
1@eva Вас вводит в заблуждение обилие одинаковых букв в этих двух терминах. Ещё раз 1.
xlink:href="#rect"
это ссылка на объект svg - rect, circle, gradient, mask внутри тела программы svg кода - которые были определены раньше внутри секций<symbol>
или<defs>
2.xmlns:xlink="http://www.w3.org/1999/xlink"
пишется один раз в шапке svg файла 17 авг 2020 в 15:03
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 имелся ввиду.