6

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

2 ответа 2

8

Рассмотрим вопрос на практическом примере, где в шапке 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;" />
7
  • То есть по сути, оба варианта (xmlns и xmlns:xlink), и у вас тут ещё есть третий вариант - xlink:href не имеют особой разницы между собой (разве что есть более устаревшие варианты записи). Я правильно понимаю?
    – Eva
    17 авг 2020 в 14:03
  • @eva Вы правильно поняли, что есть устаревшие записи и записи в новом стандарте SVG2. Но он ещё не принят. Поэтому, чтобы не было проблем с кроссбраузерностью ваших приложений, пишите, как указано в конце ответа. Перед этим был просто анализ возможных вариантов 17 авг 2020 в 14:08
  • 1
    спасибо за объяснение
    – Eva
    17 авг 2020 в 14:14
  • 1
    Ага, хорошо. Не совсем ещё понимаю вот что - чем отличаются xmlns и xmlns:xlink? И то, и то это пространство имён? Хmlns указывает просто на то, что употребляется пространство имён, а xmlns:xlink говорит о том, что к этой странице прикреплен xml? Как? Столько информации прочитано, но до сих пор непонятно
    – Eva
    17 авг 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
3

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 имелся ввиду.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.