Нужны ли такие параметры 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 . ¹
Необязательно для встроенного <svg> . ²

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

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

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

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

¹ Интернационализированные идентификаторы ресурсов (RFC3987)
² Начиная с HTML5
³ Расширяемый язык разметки (XML) 1.0
⁴ Вероятно, до выпуска следующих основных версий.
⁵ 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)) я обнаружил, что:

Для встроенного SVG, который непосредственно вводится в файл HTML через текстовый редактор или javascript и elm.innerHTML, атрибуты xmlns не нужны, как указано в двух других ответах.
Но для встроенного 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 еще далеко не стал стандартом.

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