Как правильно вставлять SVG
- 17 мая 2017
Как правильно вставлять SVG? — спрашивает наша зрительница Фара. Правильного способа нет, Фара, есть подходящие. Давайте разберёмся.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~
Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
<svg width="20">
<rect fill="#fc0"
width="20"
height="20"/>
<line stroke="black"
x1="0" y1="0"
x2="20" y2="20"/>
</svg>
Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Стилями и скриптами, Карл! Вот вам и простая картинка.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен. Есть четыре основных и у каждого — особенности.
Первый способ
Первый и самый простой — элемент img
прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.
Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.
<img
src="picture.svg"
alt="За стеклом">
Такой способ лучше всего подходит контентным изображениям, которым не нужно взаимодействие: логотипы, графики, схемы.
Второй способ
Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с img: за стеклом, но внутри что-то работает.
.picture {
background-image:
url(picture.svg);
}
Этот способ подходит для оформительской графики, которой не нужно взаимодействие: фоны, иконки и другая мелочь.
Третий способ
Третий способ, через object, наконец-то выбивает стекло между страницей и внутренностями SVG-файла. Работают скрипты, взаимодействие, анимация — если они описаны внутри SVG. Между тегами object
можно вставить фолбэк, который покажется, если браузер не говорит на SVG.
<object
type="image/svg+xml"
data="picture.svg">
<img
src="picture.png">
</object>
На самом деле, вместо object
можно даже использовать iframe
, как если бы вы подключили другую страницу. Но object работает лучше и подстраивается под размеры картинки.
За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.
Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное. Достаточно вспомнить, что когда-то через object
вставлялись Flash-ролики. Спросите у родителей, что это такое.
Четвёртый способ
Четвёртый способ заработал, когда браузеры переписали свои HTML-парсеры по новому стандарту и содержимое SVG-файлов стало можно вставлять прямо на страницу, как любые другие теги.
<h1>Квадрат</h1>
<svg
width="20"
height="20">
<rect fill="#fc0"
width="20"
height="20"/>
</svg>
С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты — ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях.
<style>
rect:hover {
fill: #090;
}
</style>
<svg>
<rect fill="#fc0"/>
</svg>
Минус в том, что такие картинки не кэшируются отдельно от страницы — хотя это можно обойти через символы и юзы, но это длинная история, мы об этом ещё поговорим отдельно.
SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан, это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.
В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: img
и фона, а потом уже усложняйте — если не хватает.
Как работать с SVG
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше





search: новый HTML-элемент в 2023
Перевод статьи Альваро Монторо о новом теге
- 12 мая 2023

Как сверстать доступный сайт
Что важно учесть, чтобы сайтом смогли пользоваться все.
- 11 мая 2023


В каких браузерах тестировать вёрстку в 2023
Понятная инструкция для тех, кто запутался в хромиумах.
- 11 апреля 2023

