Примечания по работе с SVG

Некоторые полезные заметки о работе с элементом <svg>, которые могут быть вам не известны.

Содержание

• Необходимость использования атрибута xmlns="http://www.w3.org/2000/svg"
• Как унаследовать цвет родительского элемента в SVG
• Сприты SVG
• Свойство stroke-dasharray
• Встраивание SVG в CSS

Необходимость использования атрибута xmlns="http://www.w3.org/2000/svg"

Во многих примерах SVG, которые можно найти в интернете, код обрамлен простыми тегами <svg></svg>. В других случаях SVG содержит множество атрибутов, например:

Какие атрибуты SVG действительно нужны?

• Если вы вставляете код SVG напрямую в HTML и он передается с заголовком text/html, то атрибуты xmlns можно опустить.

  Однако, если ваш HTML отправляется с другим типом (таким как image/svg+xml, application/xhtml+xml или любым другим), что заставляет браузер использовать XML-парсер, то атрибуты xmlns обязательны!

Примечание: Встраивание SVG в HTML-документы стало возможным с HTML5.

• Все браузеры игнорируют атрибут version, поэтому его тоже можно опустить.

Как унаследовать цвет родительского элемента в SVG

Есть несколько SVG-изображений, которые нужно вставить на HTML-страницу со стилями CSS. Необходимо, чтобы элементы SVG наследовали цвет от родительского элемента HTML. Опции style="fill: inherit" или fill="inherit" не работают.

В чем проблема?

HTML использует атрибут color, а SVG использует fill и stroke.

Чтобы взять цвет из родительского элемента, можно использовать специальное значение в CSS — currentColor. Вот как это выглядит:

Важно: Этот метод работает только если SVG встроен в код HTML и не вставлен как файл, так как файл не знает о внешних данных, поэтому currentColor ему не доступен.

Поддержка браузерами

Поддержка значения currentColor существует во всех современных браузерах.

Сприты SVG

Сприты позволяют объединить несколько SVG-кодов в один, после чего можно будет ссылаться на отдельные иконки (SVG), не добавляя весь код SVG снова в HTML.

Как создать сприт?

Предположим, у нас есть две SVG-иконки:

Чтобы сделать сприт, нужно сделать следующее:

1. Создать контейнер SVG:

2. Заменить оригинальный код SVG на символ и добавить атрибут id для дальнейшего обращения:

3. Поместить символы в контейнер:

Теперь можно добавить этот код в HTML и отобразить иконку, ссылаясь на ее id:

Или можно создать файл с названием sprite.svg и также отображать иконку по идентификатору:

Разница между двумя подходами

• Когда мы добавляем SVG в HTML-код страницы, сприт становится частью дерева DOM, и элементы спритов могут наследовать цвет от родителя с помощью атрибута fill="currentColor".
• Когда сприт вставлен как файл, его элементы не связаны с текущим деревом DOM, и их цвет не может быть определен через CSS или наследован от родителей.

Поэтому лучше вставлять сприт напрямую в HTML, особенно если сприт небольшой. Также важно скрыть контейнер, чтобы браузер не пытался его отрисовать. Это можно сделать, добавив style="display: none;" к контейнеру:

Более сложная структура контейнера

Некоторые источники предлагают более сложную структуру контейнера, но преимущества пока не выяснены:

Свойство stroke-dasharray

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

Атрибут stroke-dasharray может использоваться также как CSS-свойство.

Синтаксис

// SVG (HTML) атрибут
stroke-dasharray="none | [dasharray]"

// CSS
stroke-dasharray: none | [dasharray];

Формат dasharray

Список чисел, указывающих длину штрихов и длину пробелов, разделенных запятыми или пробелами.

Примеры:

stroke-dasharray="3 1";      // длина штриха 3, длина пробела 1
stroke-dasharray="3 1, 2 1"; // длина штриха 3, пробел 1, длина штриха 2, пробел 1

Также можно использовать процентные значения:

stroke-dasharray="3 1%"

Если указано нечетное количество значений, то список повторяется, чтобы получить четное количество:

stroke-dasharray="5 3, 2" // превратится в 5 3, 2 5, 3 2

Примеры

Встраивание SVG в CSS

Иногда возникает необходимость встроить SVG-изображение в качестве значения какого-либо свойства в CSS.

Пример использования

Например, иконки как фоновые изображения:

background-image: url('data:image/svg+xml;base64,A1B2...C3=')

Стойан Стефанов напоминает, что почти все браузеры (кроме старых, таких как IE) требуют кодирования только трех символов: <, > и #. Поэтому нет необходимости в полном кодировании base64 — это мало читабельно, не редактируемо и увеличивает размер файлов. Дайте gzip делать свою работу.

Юлия Бухалова предлагает готовый инструмент для этих целей.