Нужны ли такие параметры SVG, как 'xmlns' и 'version'?

204

Примерно в половине примеров svg, которые я вижу в Интернете, код обернут в простые простые <svg></svg>теги.

В другой половине теги svg имеют много сложных атрибутов, таких как: 

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

Мой вопрос: можно ли использовать простые теги SVG? Я пытался поиграть со сложными, и все отлично работает, если я их не включу.

xml svg tags Lars
источник

Ответы:

207

Все пользовательские агенты (браузеры) игнорируют атрибут версии, поэтому вы всегда можете его удалить.

Если встроить SVG встроенный в HTML - страницы и служить этой страницы , как text/htmlтогда Xmlns атрибуты не требуется . Встраивание SVG-кода в HTML-документы является сравнительно недавним нововведением, появившимся как часть HTML5.

Если же вы служите страницу как изображение / SVG + XML или приложение / XHTML + XML или любой другой тип MIME , который вызывает пользовательский агент использовать XML - анализатор , то в Xmlns атрибуты будут необходимы . До недавнего времени это был единственный способ сделать что-то подобное, поэтому много контента обслуживается так.

Роберт Лонгсон
источник
5
«Все UA игнорируют атрибут версии, так что вы всегда можете его удалить». - но что спецификация должна сказать по этому поводу? «Браузеры позволят вам сойти с рук» - это (или в какой-то момент) правда многих методов, которые (или были) однозначно неверны.
Марк Эмери
В IE11, если я положу, <!DOCTYPE svg xmlns="www.w3.org/2000/svg">это работает, но если я уберу xmlns или поменяю его на <!DOCTYPE svg xmlns="www.example.com">это, не будет работать. Это почему?
Дональд Дак
8
Может ли источник быть указан для этого ответа, пожалуйста?
2540625
69
Я написал значительную часть кода SVG в Firefox, и я так и говорю. Это не достаточно хорошо? Если нет, я все равно добавил несколько ссылок.
Роберт Лонгсон
1
@ Не указывать, если эти data-uris - image / svg + xml, как это обычно бывает, то последняя часть ответа верна.
Роберт Лонгсон
228

xmlns="http://www.w3.org/2000/svg"Атрибут:

  • Требуется для файлов image / svg + xml . 1
  • Необязательно для встроенного <svg> . 2

xmlns:xlink="http://www.w3.org/1999/xlink"Атрибут:

  • Необходимые для изображения / SVG + XML файлов с XLink: атрибуты. 1
  • Необязательно для встроенного <svg> с помощью xlink: attribute. 2

version="1.1"Атрибут:

  • Рекомендуется для соответствия стандартам image / svg + xml files. 3
  • Видимо игнорируется каждым пользовательским агентом. 4
  • Удалено в SVG 2. 5

1 Интернационализированные идентификаторы ресурсов (RFC3987)
2 Начиная с HTML5
3 Расширяемый язык разметки (XML) 1.0
4 Вероятно, до выпуска следующих основных версий.
5 SVG 2, Рекомендация кандидата W3C, 7 августа 2018 г.

ncomputers
источник
2
Должен ли он быть http или также может быть https?
JohannesB
2
@JohannesB оба протокола совместимы: D
ncomputers
1
@JohannesB да здесь у вас есть встроенный пример HTTP HTTPS и файл image / svg + xml с встроенным svg с атрибутами xlink пример HTTP HTTPS
ncomputers
1
Спасибо, угадай, что Ник
JohannesB
2
Не путайте versionатрибут объявления xml ( <?xml version...) с versionатрибутом <svg>элемента. Первый из них касается версии языка разметки XML, а второй указывает версию SVG. Автор этого ответа совершил эту ошибку, сославшись на XML, а не на спецификацию SVG в ³. Я пытался исправить это, но некоторые идиоты отклонили редактирование.
Бахсау
7

Я хотел бы добавить к обоим ответам, но у меня нет баллов, я добавляю новый ответ. В недавних тестах на Chrome (Версия 63.0.3239.132 (Официальная сборка) (64-битная Windows)) я обнаружил, что:

  1. Для встроенного SVG, который непосредственно вводится в файл HTML через текстовый редактор или javascript и elm.innerHTML, атрибуты xmlns не нужны, как указано в двух других ответах.
  2. Но для встроенного SVG, который загружается через Javascript и AJAX, есть два варианта:
    • Используйте xhr.responseTextи elm.innerHTML. Это не требует xmlns.
    • Используйте xhr.responseXML.documentElementи elm.appendChild()или elm.insertBefore(). Этот метод создания встроенного SVG приводит к получению полупеченных результатов без объявления основного пространства имен SVG, как в xmlns="http://www.w3.org/2000/svg". <Svg> загружается в HTML, но функции уровня документа, например getElementById(), не распознаются в элементе <svg>. Я предполагаю, что это потому, что он использует XML-анализатор XMLHttpRequest вне HTML.
Jamess
источник
0

Об атрибуте версии SVG в MDN WebDoc говорится

Устаревшее с SVG 2
Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, он, возможно, уже удален из соответствующих веб-стандартов, может быть в процессе удаления или может храниться только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любое время.

Атрибут version используется для указания того, какой спецификации соответствует документ SVG. Это разрешено только для корневого элемента. Он носит чисто рекомендательный характер и не влияет на рендеринг или обработку.

PS: SVG 2 еще далеко не стал стандартом.

Велусамы Велу
источник