Scalable Vector Graphics

Scalable Vector Graphics (SVG) — это формат векторной графики, основанный на языке разметки XML, предназначенный для описания двумерных изображений и анимаций. В отличие от растровых форматов (JPEG, PNG), SVG хранит изображение как набор геометрических примитивов (линии, кривые, фигуры) и текста, что позволяет масштабировать его без потери качества, изменять размеры и редактировать программно. Формат широко используется в веб-дизайне, интерфейсах пользователя, иллюстрациях и интерактивных приложениях.

История

Предшественники и создание

Идея создания открытого векторного формата для веба возникла в конце 1990-х годов. До появления SVG использовались проприетарные решения, такие как Macromedia Flash (SWF) и формат VML (Vector Markup Language) от Microsoft. В 1998 году Консорциум Всемирной паутины (W3C) начал разработку единого стандарта, объединив предложения от компаний Adobe, Corel, IBM, Microsoft, Netscape и Sun Microsystems. Первая рабочая версия спецификации (SVG 1.0) была опубликована 4 сентября 2001 года.

Развитие стандарта

• SVG 1.1 (2003) — стал основной стабильной версией, разделённой на модули (например, «SVG Tiny» для мобильных устройств).
• SVG Mobile Profiles (2003) — подмножества SVG 1.1, адаптированные для ограниченных ресурсов (SVG Basic, SVG Tiny).
• SVG 1.2 (2005) — расширенная версия с поддержкой многостраничных документов и улучшенной анимацией; не получила широкого распространения.
• SVG 2 (2018) — текущая версия, объединившая возможности SVG 1.1 и SVG 1.2, с упрощённым синтаксисом, поддержкой CSS-анимаций и интеграцией с HTML5.

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

Первые браузеры с нативной поддержкой SVG появились в середине 2000-х годов: Internet Explorer 9 (2011), Mozilla Firefox 1.5 (2005), Opera 8 (2005), Safari 3 (2007). Google Chrome поддерживает SVG с первой версии (2008). К 2020-м годам все современные браузеры полностью реализуют SVG 2.

Структура и синтаксис

SVG-файл представляет собой текстовый документ с корневым элементом <svg>, содержащим атрибуты ширины (width), высоты (height) и области просмотра (viewBox). Внутри располагаются элементы, описывающие графические объекты:

• Геометрические фигуры: <rect> (прямоугольник), <circle> (окружность), <ellipse> (эллипс), <line> (линия), <polyline> (ломаная), <polygon> (многоугольник).
• Кривые и пути: <path> — основной элемент для построения произвольных контуров с использованием команд (M — move to, L — line to, C — cubic bezier, Q — quadratic bezier, Z — close path).
• Текст: <text> с поддержкой шрифтов, выравнивания и трансформаций.
• Группировка: <g> для объединения элементов и применения общих стилей.
• Изображения: <image> для встраивания растровых изображений (например, JPEG, PNG).

Каждый элемент может содержать атрибуты заливки (fill), обводки (stroke), прозрачности (opacity), трансформаций (transform) и другие.

Классификация

По способу использования

• Встроенный SVG — код размещается непосредственно в HTML-документе (тег <svg>). Позволяет управлять элементами через CSS и JavaScript, поддерживает анимацию и интерактивность.
• Внешний SVG — файл с расширением .svg подключается через тег <img>, <object> или <iframe>. Ограничивает возможности скриптов и стилей.
• Фрагменты SVG — отдельные элементы (например, иконки), встраиваемые через спрайты или символы (<use>).

По функциональности

• Статическая графика — изображения без анимации (иллюстрации, логотипы, схемы).
• Анимированная графика — использование SMIL-анимации (элементы <animate>, <animateTransform>, <set>) или CSS-ключевых кадров.
• Интерактивная графика — реагирует на действия пользователя (клики, наведение, перетаскивание) с помощью JavaScript или CSS-псевдоклассов (:hover).

Применение

Веб-дизайн и интерфейсы

SVG является стандартом для иконок, логотипов, кнопок и фоновых элементов на сайтах. Благодаря масштабированию под любые разрешения экранов (Retina, 4K) и малому размеру файлов (при оптимизации) формат заменяет растровые спрайты. Примеры: иконки в Bootstrap, Material Design, Font Awesome.

Инфографика и диаграммы

Формат используется для построения графиков, карт, блок-схем и технических чертежей. Библиотеки (D3.js, Chart.js, Highcharts) генерируют SVG-элементы динамически, позволяя анимировать данные и добавлять подсказки.

Печатная продукция

SVG поддерживается программами векторной графики (Adobe Illustrator, Inkscape, CorelDRAW) и может быть экспортирован в PDF или EPS. Используется для создания визиток, плакатов, упаковки.

Мобильные приложения

Некоторые фреймворки (React Native, Flutter) поддерживают рендеринг SVG через плагины. Формат применяется для адаптивных иконок и анимаций в Android и iOS.

Преимущества и недостатки

Преимущества

• Масштабируемость без потери качества — изображение чётко отображается при любом увеличении.
• Малый размер файла — для простых изображений SVG занимает меньше места, чем растровые аналоги.
• Редактируемость — код можно изменять в текстовом редакторе или через CSS/JavaScript.
• Интерактивность и анимация — поддержка событий, переходов и скриптов.
• Доступность — текст в SVG доступен для поисковых систем и программ чтения с экрана (скринридеров).
• Стандартизация — открытый формат, поддерживаемый W3C.

Недостатки

• Сложность для фотореалистичных изображений — SVG неэффективен для фотографий и сложных текстур (требует большого количества кривых).
• Зависимость от браузера — старые версии Internet Explorer (до 9) не поддерживали SVG.
• Проблемы с кэшированием — встроенный SVG не кэшируется браузером как отдельный файл.
• Уязвимость к XSS-атакам — при загрузке SVG-файлов с сервера возможна инъекция вредоносного кода (требуется санитизация).

Инструменты и программное обеспечение

Редакторы

• Adobe Illustrator — профессиональный векторный редактор с экспортом в SVG.
• Inkscape — бесплатный редактор с открытым исходным кодом, полная поддержка SVG 1.1.
• Figma — онлайн-инструмент для дизайна интерфейсов, экспортирующий элементы в SVG.
• Sketch — редактор для macOS, популярный в веб-дизайне.

Оптимизаторы

• SVGO (Node.js) — инструмент для сжатия SVG-файлов (удаление лишних метаданных, округление чисел).
• SVGOMG — веб-интерфейс для SVGO.

Библиотеки для разработки

• D3.js — библиотека для визуализации данных с генерацией SVG.
• Snap.svg — библиотека для работы с SVG через JavaScript.
• GreenSock (GSAP) — анимационный фреймворк, поддерживающий SVG.

Интересные факты

• SVG может содержать встроенные шрифты (base64-кодированные) для независимости от системных гарнитур.
• Формат поддерживает фильтры (размытие, тени, цветокоррекция) через элемент <filter>.
• В 2017 году браузер Google Chrome начал блокировать загрузку SVG-файлов с небезопасных сайтов из-за риска XSS.
• SVG используется в системе «Мир» для отображения карт и маршрутов в навигационных приложениях.

Источники

• W3C SVG Specification (версия 2).
• «SVG Essentials» by J. David Eisenberg (O'Reilly Media, 2014).
• Документация Mozilla Developer Network (MDN) по SVG.
• Статья «A Brief History of SVG» на сайте W3C.
• Исследование «SVG vs PNG: Performance and Quality Comparison» (Journal of Web Engineering, 2020).