SVG

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

История

Предпосылки и разработка

До появления SVG в вебе доминировали растровые изображения, но с ростом разрешений экранов (Retina) и разнообразия устройств возникла потребность в формате, не зависящем от пикселей. В конце 1990-х годов несколько компаний, включая Adobe, Macromedia, Sun Microsystems и W3C, начали работу над стандартом векторной графики для Интернета. В 1998 году консорциум W3C опубликовал первую спецификацию SVG 1.0, которая стала рекомендацией в 2001 году. Основой послужили языки VML (разработанный Microsoft) и PGML (Adobe, Sun), но SVG вобрал в себя лучшие черты обоих.

Основные версии

• SVG 1.0 (2001) — базовая спецификация, включающая фигуры, текст, заливки, градиенты, обтравочные маски.
• SVG 1.1 (2003) — уточнила модули, добавила поддержку SVG Print, пространства имён и улучшенную анимацию. Эта версия оставалась основной до 2010-х годов.
• SVG Tiny 1.2 (2008) — упрощённая версия для мобильных устройств и встраиваемых систем.
• SVG 2 (разработка завершена в 2023 году, рекомендация W3C) — расширенная версия с поддержкой CSS-трансформаций, более сложных путей, сенсорных событий и улучшенной интероперабельностью с HTML5.

Эволюция поддержки браузерами

Первые браузеры (Internet Explorer 6–8) не поддерживали SVG. Начиная с 2010 года, все основные браузеры (Firefox 4, Chrome 27, Safari 6, Opera 10) включили встроенную поддержку SVG. С 2015 года SVG стал полностью поддерживаемым форматом во всех современных веб-браузерах, включая IE11 (частично).

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

XML-основа

SVG-файл является XML-документом с корневым элементом <svg>, который задаёт пространство имён, размеры (viewBox) и систему координат. Пример простейшего SVG:

``xml <svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="blue" /> </svg> ``

Основные элементы

• Фигуры: <rect> (прямоугольник), <circle> (окружность), <ellipse> (эллипс), <line> (линия), <polyline> (ломаная), <polygon> (многоугольник), <path> (произвольный контур).
• Текст: <text>, <tspan>, <textPath>.
• Изображения: <image> (встраивание растровых изображений).
• Группировка и ссылки: <g> (группа), <use> (повторное использование элементов).
• Стилизация: атрибуты fill, stroke, stroke-width, opacity, а также CSS-классы.
• Градиенты и маски: <linearGradient>, <radialGradient>, <mask>.
• Анимация: <animate>, <animateTransform>, <set>.

Атрибут viewBox

Система координат SVG задаётся атрибутом viewBox="minX minY width height". Он определяет, какая часть графической области отображается и как масштабируется (через preserveAspectRatio). Без viewBox масштабирование может искажаться; при его наличии размеры адаптируются к контейнеру.

Особенности и преимущества

Масштабируемость

SVG-изображения не растрируются при увеличении — они состоят из математических описаний, поэтому сохраняют чёткость на любых экранах, включая дисплеи с высокой плотностью пикселей (Retina). Коэффициент масштабирования может быть любым: 1x, 2x, 3x без потери качества.

Малый размер файла

Для простой геометрии и иконок SVG-файлы обычно значительно компактнее растровых аналогов (современный SVG-логотип может весить 0.5–5 КБ, тогда как PNG — 10–50 КБ). Однако сложные фотографии с множеством деталей в SVG бесполезны: они будут занимать больше места, чем JPEG.

Интерактивность и анимация

SVG поддерживает события (onclick, onmouseover), что позволяет создавать интерактивные элементы (кнопки, карты, анимации) без дополнительного JavaScript. Анимация задаётся через CSS-переходы или встроенные элементы <animate>. Пример: интерактивная карта мира с подсветкой стран при наведении.

Стилизация через CSS

SVG-элементы можно стилизовать как обычные HTML-теги: задавать цвета, шрифты, толщину линий, тени и переходы. Это упрощает поддержку единого визуального стиля на сайте.

Доступность и SEO

Текстовые элементы в SVG остаются доступными для экранных дикторов и поисковых роботов. Можно добавлять атрибуты title, desc, aria-label для улучшения семантики.

Применение

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

SVG — основной формат для иконок, логотипов, диаграмм, кнопок и элементов интерфейса. Многие современные библиотеки иконок (Font Awesome, Material Icons, Bootstrap Icons) поставляют иконки именно в SVG-формате благодаря его масштабируемости и возможности менять цвет через CSS.

Геоинформационные системы (ГИС)

Векторные карты (Google Maps, OpenStreetMap) используют SVG для отображения дорог, границ стран, маршрутов. Слой векторов позволяет плавно зуммировать и обрабатывать большое количество объектов.

Инфографика и визуализация данных

Средствами SVG создаются графики, диаграммы, таймлайны. Библиотеки D3.js, Highcharts, Chart.js генерируют SVG-элементы для визуализации статистики.

Анимации и иллюстрации

Сложные анимации (например, логотипы, меняющие форму, появление элементов по очереди) реализуются через CSS-анимацию или JavaScript. Также SVG используют для создания логотипов в формате Lottie (анимированные файлы).

Полиграфия и печать

Поскольку SVG не привязан к пикселям, его можно экспортировать в PDF или использовать для вёрстки визиток, плакатов, баннеров. Однако печатные машины часто требуют преобразования в CMYK-растровые форматы.

Недостатки и ограничения

Сложность для фотографий

SVG не предназначен для хранения фотографических изображений с непрерывными цветовыми переходами (градиенты, закаты, лица). Для фото формат JPEG остаётся эффективнее.

Поддержка старых браузеров

В Internet Explorer 8 и более ранних версиях SVG не поддерживался. Современные браузеры (Edge, Chrome, Firefox, Safari) работают исправно, но в некоторых мобильных браузерах могут быть проблемы с анимацией.

Безопасность

Поскольку SVG является XML-документом, в него можно внедрить скрипты JavaScript или использовать уязвимости, связанные с загрузкой внешних ресурсов. При загрузке SVG от сторонних источников (например, в комментариях) следует санировать код (удалять скрипты, запрещать ссылки на внешние файлы) для предотвращения XSS-атак.

Производительность при большом количестве объектов

Сложные SVG-файлы с тысячами элементов (например, карты с детализированной топографией) могут замедлять рендеринг в браузере. Для таких сценариев используют WebGL или Canvas.

Создание и инструменты

Ручное редактирование

SVG можно создавать в любом текстовом редакторе (Notepad++, VS Code), написав код вручную. Для начинающих полезно изучение документации W3C.

Векторные редакторы

• Adobe Illustrator — мощный редактор с экспортом в SVG (необходимо выбирать опции «SVG 1.1», выставлять шрифты).
• Inkscape — бесплатный редактор с открытым исходным кодом, поддерживает SVG как нативный формат.
• Figma — веб-инструмент для UI/UX-дизайна, экспортирует элементы в SVG.
• Sketch — macOS-программа для веб-дизайна, также поддерживает SVG.

Онлайн-генераторы

Существуют сервисы для быстрого создания SVG-кода: SVG Editor (svgwrite), SVGator (анимация), Shape Divider (волны, кривые).

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

• SVG может содержать CSS и JavaScript напрямую, что позволяет создавать самодостаточные интерактивные виджеты.
• Формат поддерживает анимацию без JavaScript (через <animate> и <animateTransform>), но CSS-анимация через @keyframes чаще применяется разработчиками.
• В 2021 году интеграция SVG в HTML5 была стандартизирована: файл .svg можно вставлять в тег <img>, как фоновое изображение в CSS, или непосредственно в код (inline SVG).
• Некоторые шрифты (OTF) содержат SVG-таблицы для цветных шрифтов (в OpenType-графиках).
• Формат SVG используется в стандартах W3C для визуализации математических формул (MathML) и схем (RDF/OWL).

Источники

• Scalable Vector Graphics (SVG) 1.1 Specification, W3C Recommendation, 2003.
• SVG 2 Specification, W3C Recommendation, 2023.
• «Using SVG with CSS and HTML» by Kurt Cagle (2018).
• MDN Web Docs: SVG: Scalable Vector Graphics (mozilla.org).
• OpenStreetMap Wiki: SVG (2019).