Введение в SVG
Узнайте, что такое SVG, как устроена его система координат, когда выбирать его вместо Canvas или растровых изображений, и три способа встроить SVG в HTML.
SVG (Scalable Vector Graphics) описывает двумерную графику в формате XML. Вместо того чтобы хранить сетку цветных пикселей (как это делают JPEG, PNG или GIF), SVG-файл хранит инструкции для рисования фигур — линий, кривых, окружностей, прямоугольников и текста. Браузер читает эти инструкции и отрисовывает изображение заново при любом размере отображения, поэтому результат остаётся чётким при любом масштабе или разрешении экрана.
SVG является рекомендацией W3C и интегрируется с другими стандартами, такими как DOM, CSS и JavaScript. Поскольку каждая фигура является полноценным элементом документа, её можно стилизовать с помощью CSS, анимировать и реагировать на клики и наведение курсора так же, как на любой другой HTML-элемент.
На этой странице объясняется, как SVG работает внутри HTML-страницы, как устроена его система координат, когда стоит выбрать SVG вместо Canvas или растрового изображения, и три стандартных способа встроить SVG-документ.
Как SVG работает на HTML-странице
SVG-изображение само по себе является небольшим XML-документом. Корневой элемент <svg> содержит дочерние элементы фигур, и браузер отрисовывает их в порядке следования в исходном коде — более поздние элементы рисуются поверх более ранних, так же как слои накладываются в графическом редакторе.
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>Система координат
SVG использует координатную сетку, в которой начало координат (0, 0) находится в верхнем левом углу. Ось x растёт вправо, а ось y растёт вниз — обратите внимание, что это отличается от привычного из математики направления оси y вверх.
- Атрибуты
widthиheightэлемента<svg>задают размер области рисования в пикселях. - Атрибут
viewBox(например,viewBox="0 0 100 100") определяет внутреннее пространство координат, позволяя одному и тому же рисунку масштабироваться под любой отображаемый размер.
В приведённом примере центр окружности находится в точке (50, 50) — середина холста 100×100 — а её радиус простирается на 40 единиц в каждом направлении.
Разбор атрибутов элемента <circle>
Каждый атрибут элемента <circle> управляет одним аспектом его отрисовки:
| Атрибут | Значение |
|---|---|
cx | x-координата центра окружности (50) |
cy | y-координата центра окружности (50) |
r | радиус окружности в пользовательских единицах (40) |
stroke | цвет контура (green) |
stroke-width | толщина контура в пользовательских единицах (4) |
fill | цвет заливки внутри фигуры (yellow) |
Подробнее об отрисовке контуров читайте в разделе обводка SVG, а все фигуры и атрибуты можно найти в справочнике SVG.
SVG vs. Canvas vs. растровые изображения
Выбор подходящей технологии зависит от того, что вы рисуете и как это будет изменяться.
- SVG лучше всего подходит для графики, которая должна оставаться чёткой при любом размере и которую вы хотите стилизовать, анимировать или сделать интерактивной: иконки, логотипы, диаграммы, схемы и карты. Каждая фигура является узлом DOM, поэтому она доступна вспомогательным технологиям и легко поддаётся скриптингу. Производительность может снижаться, когда сцена содержит десятки тысяч отдельных элементов.
- Canvas рисует пиксели на растровом изображении с помощью JavaScript. У него нет DOM для каждой фигуры, что делает его эффективным для быстро меняющихся сцен со множеством объектов — игры, эффекты частиц и визуализации данных в реальном времени — но результат не масштабируется без перерисовки и сложнее в плане доступности.
- Растровые изображения (JPEG, PNG, GIF, WebP) хранят фиксированные пиксели. Они являются правильным выбором для фотографий и сложных текстур, но размываются или пикселизируются при увеличении и имеют большой вес при высоком разрешении.
Простое правило: используйте SVG для независимой от разрешения, поддающейся скриптингу векторной графики; используйте Canvas для высокочастотной пиксельной отрисовки; используйте растровые форматы для фотографий.
Встраивание SVG в HTML
SVG-файлы используют расширение .svg и поддерживаются всеми современными браузерами. Существует три распространённых способа разместить SVG на странице, каждый со своими компромиссами.
Встроенный <svg>
Запишите SVG-разметку непосредственно внутри HTML. Это даёт вам полный доступ к каждой фигуре, так что вы можете стилизовать её с помощью CSS и анимировать или управлять отдельными элементами со стороны той же страницы.
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body><img> с SVG-источником
Укажите элементу <img> внешний файл .svg. Это просто и кешируемо, но SVG обрабатывается как плоское изображение: к его внутренним элементам нельзя применять стили или скрипты со стороны страницы-хоста.
<img src="circle.svg" width="100" height="100" alt="A yellow circle outlined in green" />Элемент <object>
Элемент <object> загружает SVG как отдельный документ, при этом открывая его DOM для скриптов, и позволяет предоставить резервное содержимое для браузеров, которые не смогут его загрузить.
<object data="circle.svg" type="image/svg+xml" width="100" height="100">
Your browser does not support SVG.
</object>Подробнее о самом встроенном элементе читайте в разделах тег HTML <svg> и SVG в HTML5.
Создание SVG-изображений
SVG можно писать вручную в любом текстовом редакторе, что удобно для иконок и простых фигур. Для иллюстраций со множеством кривых и контуров обычно удобнее воспользоваться программой для рисования, например Inkscape — она экспортирует чистые файлы .svg, которые затем можно доработать вручную. Для рисования кривых фигур с помощью кода начните с элемента path в SVG, а для прямых отрезков смотрите элемент line в SVG.
Доступность SVG
Когда SVG несёт смысловую нагрузку, дайте вспомогательным технологиям что-то для чтения. Подход зависит от способа встраивания SVG:
- Для встроенного
<svg>добавьте<title>(и необязательный более длинный<desc>) в качестве первых дочерних элементов и пометьте корневой элемент атрибутомrole="img". Ссылка на title с помощьюaria-labelledbyсвязывает доступное имя с элементом.
<svg role="img" aria-labelledby="circleTitle"
xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<title id="circleTitle">A yellow circle outlined in green</title>
<desc>A solid yellow disk with a four-pixel green border, used as a status indicator.</desc>
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>- Для SVG, загружаемого через
<img>, используйте описательный атрибутalt, точно так же, как для любого изображения. - Если графика носит чисто декоративный характер, скройте её от вспомогательных технологий с помощью
aria-hidden="true"(встроенный вариант) или пустогоalt=""(для<img>), чтобы программы чтения с экрана её пропускали.
Вы также можете добавить доступный текст внутри рисунка с помощью элемента text в SVG.
Преимущества использования SVG
По сравнению с растровыми форматами, такими как JPEG и GIF, SVG предлагает ряд преимуществ:
- SVG-изображения можно создавать и изменять в любом текстовом редакторе.
- SVG-изображения можно использовать в скриптах, индексировать, искать и сжимать.
- SVG-изображения можно печатать с высоким качеством при любом разрешении.
- SVG-изображения можно масштабировать и увеличивать без потери качества.
- Каждая фигура является частью DOM, поэтому её можно стилизовать с помощью CSS и анимировать.
- SVG — открытый стандарт W3C.