SVG (Scalable Vector Graphics — масштабируемая векторная графика) — графический формат файлов, применяемый в веб-дизайне для векторных изображений.
Содержание
Описание формата SVG
Вся представленная ниже информация относится к стандарту SVG 1.1, актуальному на момент написания материала.
SVG является стандартизированным расширением языка разметки XML, предназначенным для описания векторной графики преимущественно на веб-ресурсах.
SVG-файлы содержат XML-разметку, описывающую векторные изображения, а именно все его детали в виде геометрических примитивов (линий, кругов, прямоугольников и т. д.) с указанием их размеров, координат и другой необходимой информации.
Пример
Рассмотрим следующий пример векторного изображения в формате SVG:
На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:
Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:
Теги SVG, описывающие геометрические примитивы
Тег
Значение
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, вовсе не обязательно знать язык разметки. Популярные редакторы векторной графики (Illustrator, CorelDRAW, InkScape) позволяют создавать и редактировать SVG-картинки, а также экспортировать в SVG другие форматы (AI, CDR, EPS).
Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.
SVG-изображения, созданные в графических редакторах, содержат много лишней мета-информации, которую можно удалить вручную для уменьшения размера файла.
Веб-приложения
Для создания, редактирования и сохранения 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, но это не целесообразно в подавляющем большинстве случаев.
Преимущества и недостатки способов вставки SVG на сайт
Особенность
inline
object
img
CSS
Отсутствие запроса к серверу
+
-
-
-
Кэширование в браузере
-
+
+
+
Встроенные CSS-свойства
+
+
+
+
Внешние CSS-свойства
+
-
-
-
JS-манипулирование
+
+
-
-
Встроенная анимация
+
+
+
+
Интерактивная анимация
+
+
-
-
Вставка через тег img
Данный способ применим для вставки SVG на сайт в качестве статичного или анимированного изображения без интерактивности.
<img src="/image.svg" alt="Картинка" />
Недостатки метода
Внешние CSS-свойства не применяются к SVG-тегам.
JS не влияет на SVG-теги.
Интерактивная SMIL-анимация не работает.
Вставка через тег object
Данный способ вставки SVG является наиболее предпочтительным в большинстве случаев.
Для применения 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-файлов (вес изображений), в отличие от растровых картинок, не зависит от размера в пикселях, но зависит от объёма кода. Для изображений большого размера преимущества формата 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 целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрисовки.
Оптимизация SVG-кода
Объём SVG-кода можно уменьшить путём оптимизации:
Удаление мета-данных
После сохранения в графических редакторах (например, Adobe Illustrator) SVG-код содержит много ненужной информации, удаление которой сократит размер файла и ни как не отразится на изображении.
Удаление лишних объектов
Изображение может содержать ненужные или скрытые объекты, а также теги, группирующие объекты, удаление которых не сказывается на изображении.
Удаление неиспользуемых классов и идентификаторов
При редактировании векторных изображений графические редакторы могут добавлять к тегам классы и идентификаторы, в которых не нуждается финальный вариант картинки.
Оптимизация атрибутов тегов
Частое использование атрибутов можно заменить посредством CSS-свойств: при большом количестве элементов это поможет значительно уменьшить вес SVG.
Удаление лишних узлов
Каждая точка в векторном изображении отражается на объёме кода: удаление лишних узлов поможет сократить его объём.
Все эти действия можно проделать вручную в текстовом редакторе, но для этого необходимо знание языка разметки SVG. Намного более простым и эффективным вариантом является использование оптимизатораSVGO:
Веб-приложение SVGOMG позволяет оптимизировать SVG-картинки онлайн, при этом предоставляя всю необходимую информацию в своём интерфейсе: можно контролировать изменение веса файла в процентном соотношении, изменяя те или иные опции, а также видеть, отражается ли применение настроек на самом изображении:
Как и все текстовые данные, SVG-код может быть сжат алгоритмом GZIP. При активации на сервере алгоритм обеспечивает передачу данных от сервера браузеру в сжатом виде.
Для GZIP-сжатия на сервере должен функционировать модуль mod_deflate. Чтобы указать серверу, что SVG-файлы необходимо сжимать, в файле .htaccess указывается следующий код:
<IfModule deflate_module>
<IfModule filter_module>
# здесь перечисляются типы данных для сжатия
AddOutputFilterByType DEFLATE image/svg+xml # указание на сжатие SVG
</IfModule>
</IfModule>
Кроме того, для уменьшения общего размера файла можно использовать формат SVGZ, содержащий сжатые данные SVG. Но смысла в этом нет, если применяется серверное GZIP-сжатие данных. Картинки в формате SVGZ можно сохранять в Adobe Illustrator.
Конвертация SVG в другие форматы и обратно
Конвертация растрового изображения в SVG-формат сопровождается трассировкой (векторизацией) и редко используется, а конвертация из SVG в растровый формат применяется намного чаще.
Как конвертировать в SVG?
Невозможно точно конвертировать растровый формат (например, JPG) в SVG (или другой векторный формат), т. к. это разные виды графики. Но можно произвести трассировку растровой картинки и сохранить её в формате SVG.
Трассировка — процесс векторизации растрового изображения путём образования векторных контуров.
Необходимо понимать, что трассировка не может абсолютно точно преобразовать растровое изображение в векторный формат:
Результат трассировки зависит от многих особенностей исходного растрового изображения:
контрастности,
цветовой палитры,
степени детализации,
и др.
Трассировка — автоматический процесс создания векторных контуров. Иначе говоря, SVG-код результата трассировки будет содержать неопределённое количество тегов path, и файл на выходе может «весить» несравнимо больше исходного растрового изображения.
Выполнить трассировку растровой картинки (JPG, PNG, GIF) и сохранить её в SVG можно посредством Adobe Illustrator.
Как конвертировать из SVG?
Конвертировать SVG в растровый формат (JPG, PNG, GIF) можно с помощью векторных графических редакторов (Adobe Illustrator, CorelDRAW) посредством функций экспорта.
Процесс растеризации векторных изображений можно наблюдать в Photoshop или другом редакторе растровых изображений: при открытии векторного файла будет предложено его растрировать в определённом размере, после чего картинку можно сохранить в любом доступном растровом формате.
Преимущества формата SVG
Формат SVG имеет все преимущества векторной графики, а также ряд других преимуществ относительно растровых форматов изображений, применяемых в веб-дизайне:
Качество детализации не зависит от размера изображения
SVG-картинки не теряют в качестве детализации при увеличении или уменьшении их размера в пикселях.
«Вес» изображения не зависит от его размера
Огромное преимущество перед растровыми форматами: SVG-картинки можно увеличивать или уменьшать во сколько угодно раз, при этом размер файла остаётся неизменным.
Многофункциональная анимация
Возможности анимации SVG-изображений во много раз превосходят возможности GIF-анимации.
CSS для частей изображения
Для любого элемента SVG-картинки могут быть заданы CSS-свойства.
Нет ограничений в глубине цвета
SVG использует все возможности браузеров.
Возможность внедрения растровых изображений в код
В SVG-код можно подключать ссылки на растровые изображения, или внедрять их в виде base64.
Возможность использования текста в картинке
Текст в SVG-изображении может быть преобразован в контуры, но можно использовать его посредством шрифта.
Оптимизация размера файла без потерь
GZIP-сжатие и оптимизация кода может существенно уменьшить вес SVG-картинок без потерь в качестве отрисовки.
Недостатки формата SVG
Не подходит для реалистичных изображений
Векторная графика не позволяет реализовать реалистичные цветовые переходы.
Размер файла зависит от количества деталей
Сложность картинки пропорциональна количеству геометрических примитивов, а значит и «весу» SVG-изображения.
Рекомендации по применению формата
На основании вышеизложенного материала можно сделать выводы относительно применения векторных SVG-изображений на веб-сайтах:
применяйте SVG для несложных рисунков и иконок с небольшим количеством деталей,
применяйте SVG, если требуется статичная или интерактивная анимация рисунков,
при выборе между SVG и растровым форматом сравнивайте размеры файлов на выходе,
применяйте CSS и JS для реализации интерактивности SVG-картинок,
при необходимости применяйте в SVG текст, не преобразуя его в контуры,
Открыть SVG-файл можно в современных интернет-обозревателей (браузеров) для просмотра, а также в популярных редакторах векторной (CorelDRAW, Illustrator) и растровой (Photoshop) графики для редактирования и конвертации.
Как сохранить (скачать) SVG-изображение с сайта?
Сохранить SVG-файл с сайта можно различными способами в зависимости от того, как он вставлен в HTML.
Чтобы сохранить SVG-картинку, вставленную посредством тега img, нужно кликнуть по ней правой кнопкой мыши в браузере и из появившегося контекстного меню выберите «Сохранить изображение как...» (название пункта может отличаться в зависимости от браузера). Таким же способом можно копировать с сайтов картинки в других форматах.
В иных случаях нужно искать URL SVG-файла в HTML- или CSS-коде, открывать его в новом окне браузера и сохранять, применяя функцию «Сохранить как...».
Photoshop не предоставляет возможность сохранения изображений в этом формате. SVG — формат векторной графики. Для сохранения в этом формате применяются соответствующие программы (Illustrator, CorelDRAW).
Как сохранить SVG в Illustrator?
Чтобы сохранить картинку в формате SVG в Illustrator:
в диалоговом окне выберите папку для сохранения, название и тип файла (SVG) и нажмите «Сохранить»,
откроется модальное окно программы Illustrator с параметрами сохранения файла в формате SVG:
Настройки SVG при сохранении в Illustrotor'е
Информация о настройке отображается в нижней части окна при наведении на название настройки. Настройка «Качество» влияет на количество геометрических объектов в изображении на выходе. По умолчанию всегда выставляйте эту настройку на 1, чтобы бессмысленно не увеличивать размер файла.
