WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru

Заметки по SVG

Некоторые заметки по работе с <svg> которые вы возможно не знаете и которые будут полезны.

Ресурсы

Иконки (бесплатные):

Оптимизация SVG:

URL-encoder для SVG:

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

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

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

Вопрос: можно ли использовать простые теги svg?

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

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

Однако если вы передаете страницу как image/svg+xml или application/xhtml+xml или любой другой тип MIME, который заставляет пользовательский агент использовать парсер XML, то атрибуты xmlns необходимы. До недавнего времени это был единственный способ сделать это, поэтому существует много контента, обслуживаемого таким образом.

Подробнее здесь: https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed

меню

Как взять (заполнить) цвет который берется у родительского элемента, например fill="inherit"

Вопрос: У меня есть несколько SVG-изображений, которые я хочу вставить в HTML-страницу, стилизованную с помощью CSS. Я хочу, чтобы элементы SVG унаследовали цвет от атрибута color родительского HTML-элемента. Пробовал установить style="stroke: none; fill: inherit", но это не работает.

Ответ: HTML использует color, в то время как SVG использует fill и stroke. Вы можете заставить fill и stroke использовать значение свойства color CSS, используя значение currentColor, например:

<svg ... fill="currentColor">

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

Комментариев нет
    Войти