SVG (Scalable Vector Graphics — масштабируемая векторная графика) — графический формат файлов, применяемый в веб-дизайне для векторных изображений.
Содержание
Описание формата SVG
Вся представленная ниже информация относится к стандарту SVG 1.1, актуальному на момент написания материала.
SVG является стандартизированным расширением языка разметки XML, предназначенным для описания векторной графики преимущественно на веб-ресурсах.
SVG-файлы содержат XML-разметку, описывающую векторные изображения, а именно все его детали в виде геометрических примитивов (линий, кругов, прямоугольников и т. д.) с указанием их размеров, координат и другой необходимой информации.
Пример
Рассмотрим следующий пример векторного изображения в формате SVG:
На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-81 -160.3 400 400"> <circle cx="119" cy="39.7" r="200" fill="#EC5923"/> <circle cx="119" cy="39.7" r="148.6" fill="#FFF"/> <path fill="#424953" d="M36.3 65.8h39v48.6h-39z"/> <path d="M95.2 16.6h39V114H95z"/> <path fill="#EC5923" d="M154-31.5h39v146h-39z"/> </svg>
SVG-теги
Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:
| Тег | Значение |
|---|---|
| svg | Родительский контейнер для изображения. |
| g | Родительский контейнер для отдельных элементов изображения. |
| path | Описывает границы объекта. Атрибут d данного тега содержит информацию о точках, формирующих объект, и их координатах. Фактически, любые объекты в SVG можно описывать с помощью тега path. |
| rect | Служит для описания прямоугольных геометрических фигур. |
| circle | Служит для описания круглых геометрических фигур. |
| ellipse | Описывает геометрические фигуры эллиптической формы. |
| line | Описывает прямые линии. |
| polyline | Описывает границы незамкнутых фигур. |
| polygon | Описывает границы замкнутых фигуры, автоматически замыкая начальную и конечную точки. |
| text | Применяется для отображения текста. |
| tsspan | Применяется для отдельных участков текста внутри тега text. |
| image | Применяется для вставки растровых изображений. |
| use | Применяется для копирования отдельных объектов. |
| symbol | Описывает геометрические объекты для последующего их применения посредством тега use . |
Атрибуты тегов
Для описания свойств объектов векторного изображения в SVG-тегах применяется множество атрибутов. Вот некоторые из них:
- Width
- Определяет ширину объекта.
- Height
- Определяет высоту объекта.
- Fill
- Определяет цвет заливки фигуры.
- Stroke
- Определяет цвет обводки фигуры.
Как создать SVG-картинку?
Можно выделить следующие способы создания векторных изображений в формате SVG:
- вручную в текстовом редакторе,
- с помощью векторных графических редакторов,
- через онлайн-сервисы.
Создание вручную
При условии знании языка разметки SVG нарисовать простейшую фигуру в текстовом редакторе не составит труда, хотя более сложные изображения так не делаются.
Чтобы нарисовать красный квадрат с черной обводкой достаточно создать простой текстовый файл, заменить его расширение с .txt на .svg и вставить в него следующий код:
<svg xmlns="http://www.w3.org/2000/svg" width="424px" height="424px" viewBox="0 0 424 424> <rect x="12" y="12" fill="#F00" stroke="#000" stroke-miterlimit="10" width="400" height="400"/> </svg>
После чего можно открыть файл в браузере и увидеть само изображение:
Графические редакторы
Чтобы нарисовать изображения в формате SVG, вовсе не обязательно знать язык разметки. Популярные редакторы векторной графики (Illustrator, CorelDRAW, InkScape) позволяют создавать и редактировать SVG-картинки, а также экспортировать в SVG другие форматы (AI, CDR, EPS).
Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.
SVG-изображения, созданные в графических редакторах, содержат много лишней мета-информации, которую можно удалить вручную для уменьшения размера файла.
Веб-приложения
Для создания, редактирования и сохранения SVG-рисунков также применяются онлайн-инструменты. Их функционал достаточно в сравнении с десктопными графическими редакторами, но для простейших рисунков они применимы:
- Method Draw
- Простой в освоении и приятный глазу редактор, к тому же позволяющий редактировать SVG-код в интерфейсе.
- SVG Editor
- Более сложный в освоении редактор с непривычным интерфейсом и ограничениями в доступе.
Как реализовать SVG-анимацию?
Формат SVG предоставляет веб-дизайнерам огромные возможности в реализации статичных и интерактивных анимированных изображений для сайтов.
SVG-анимация посредством CSS (3,9 КБ)
Анимированные SVG-картинки во всём превосходят растровые GIF-аналоги: размер файла может быть меньше в десятки, сотни и даже тысячи раз, нет ограничений в глубине цвета, можно применять полупрозрачность и обеспечивать интерактивность, а чтобы создать анимацию вовсе не надо быть художником.
Реализовать анимацию в SVG можно 3-мя способами:
- С помощью CSS3
- Этот вариант предполагает манипулирование геометрическими примитивами с помощью внутренних или внешних CSS-свойств анимации.
- С помощью JS
- Геометрическими примитивами в SVG также можно манипулировать посредством JavaScript.
- С помощью SMIL
- Этот способ предполагает реализацию анимации с помощью специальных внутренних тегов в SVG-коде.
Наиболее простым и не требующим знаний в JS-программировании и SMIL-анимации можно считать анимацию посредством CSS. Для создания сложных SVG-анимаций, требующих определённых математических расчетов, существуют специальные JS-плагины и отдельные скрипты.
Как вставить SVG на сайт?
Векторные SVG-картинки могут быть внедрены в HTML-код посредством:
- тега img,
- тега embed,
- CSS-свойств в качестве фона,
- внедрения SVG-разметки (inline).
Кроме того, для вставки SVG на сайт можно использовать теги iframe и object, но это не целесообразно в подавляющем большинстве случаев.
| Особенность | inline | object | img | CSS |
|---|---|---|---|---|
| Отсутствие запроса к серверу | + | - | - | - |
| Кэширование в браузере | - | + | + | + |
| Встроенные CSS-свойства | + | + | + | + |
| Внешние CSS-свойства | + | - | - | - |
| JS-манипулирование | + | + | - | - |
| Встроенная анимация | + | + | + | + |
| Интерактивная анимация | + | + | - | - |
Вставка через тег img
Данный способ применим для вставки SVG на сайт в качестве статичного или анимированного изображения без интерактивности.
<img src="/image.svg" alt="Картинка" />
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
- JS не влияет на SVG-теги.
- Интерактивная SMIL-анимация не работает.
Вставка через тег object
Данный способ вставки SVG является наиболее предпочтительным в большинстве случаев.
<object type="image/svg+xml" data="image.svg"></object>
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
Вставка через CSS
Для применения SVG-картинки в качестве фона HTML-элемента применяются CSS-свойства background или background-image:
.class{
background: url(image.svg);
}
или
<div style="background: url(/image.svg)">
Недостатки метода
- Внешние CSS-свойства не применяются к SVG-тегам.
- JavaScript не может управлять элементами изображения.
- Интерактивная SMIL-анимация не функционирует.
Непосредственное внедрение SVG в HTML
Таким образом можно вставлять небольшие SVG-картинки. Для больших изображений целесообразно подключать отдельный файл, который будет кэшироваться браузером.
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-81 -160.3 400 400"> <circle cx="119" cy="39.7" r="200" fill="#EC5923" /> </svg>
Недостатки метода
- Изображение не кэшируется.
Сколько «весят» SVG-файлы?
Сравнение размеров файлов SVG и PNG
Размер SVG-файлов (вес изображений), в отличие от растровых картинок, не зависит от размера в пикселях, но зависит от объёма кода. Для изображений большого размера преимущества формата SVG очевидны:
Оптимизированный SVG: 893 Б не зависимо от размера
Оптимизированный PNG-8 800×160px: 1.83 КБ
Оптимизированный PNG-8 600×120px: 1.4 КБ
Оптимизированный PNG-8 400×80px: 1.07 КБ
Оптимизированный PNG-8 200×40px: 670 Б
Все представленные PNG-файлы максимально сжаты и используют всего 16 цветов в палитре, при этом код SVG-файла максимально сокращён, но с использованием GZIP на стороне сервера «вес» будет составлять всего 468 Байт. Можно предположить, что SVG во всех случаях выигрывает у растровых изображений в отношении размера файла, но это не всегда так и за
Здесь можно наблюдать огромную разницу в размере файла между PNG и SVG: почти в 9 раз в пользу PNG, при том, что его размер в пикселях не так уж мал (800×335).
Это можно объяснить огромным количеством геометрических примитивов, описывающих картинку в SVG, в то время как PNG использует только цветные пиксели.
Из всего этого можно сделать следующий вывод:
SVG целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрис