SVG — масштабируемая векторная графика¶

SVG (от англ. Scalable Vector Graphics, «масштабируемая векторная графика») — открытый формат файлов для описания двумерной векторной графики на основе XML. Изображения в формате SVG хранятся не в виде растровой сетки пикселей, а в виде математических описаний геометрических фигур — точек, линий, кривых, контуров и заливок, — что позволяет масштабировать их без потери качества на любой размер и разрешение. Стандарт разрабатывается Консорциумом Всемирной паутины (W3C) с 1999 года.

¶История

Работа над SVG началась в 1998 году, когда несколько компаний, включая Adobe, Microsoft, Netscape и Sun Microsystems, представили W3C совместные предложения по векторному формату для веба. 4 февраля 1999 года консорциум опубликовал первую черновую версию спецификации. 14 сентября 2001 года был утверждён стандарт SVG 1.0, а 14 августа 2003 года — SVG 1.1, ставший основой для большинства реализаций.

В 2008 году W3C перевёл SVG в статус рекомендации, однако дальнейшая работа над версией 1.2 шла медленно. В 2011 году консорциум отказался от продвижения SVG 1.2 в пользу двух независимых профилей: SVG 1.1 Second Edition и SVG Tiny 1.2, ориентированного на мобильные устройства. В 2016 году была опубликована версия SVG 2, которая объединяет возможности формата с технологиями HTML5 и CSS, однако её поддержка браузерами остаётся неполной.

¶Технические основы

SVG-файл представляет собой обычный XML-документ. Каждый графический элемент описывается специальными XML-тегами: <rect> (прямоугольник), <circle> (окружность), <ellipse>, <line>, <polyline>, <polygon> и <path> (произвольный контур). Стили задаются через встроенные атрибуты или подключаемые таблицы CSS, а позиционирование и размеры — через систему координат и атрибуты x, y, width, height, viewBox.

Простейший SVG-файл может выглядеть так:

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

Этот код описывает красный круг радиусом 40 единиц в центре квадратного холста размером 100×100.

¶Преимущества векторного формата

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

¶Ограничения

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

¶Применение

SVG широко используется в веб-дизайне для иконок, логотипов, диаграмм, карт и декоративных элементов. Один из наиболее известных примеров — набор иконок Material Design от Google, распространяемый в формате SVG. Формат применяется в интерактивной визуализации данных (библиотеки D3.js, Highcharts), в генерации схем и чертежей, в электронных картах (OpenStreetMap использует SVG для отрисовки векторных слоёв).

В России SVG активно применяется при разработке государственных и корпоративных информационных систем, в типографике и полиграфии для подготовки макетов, а также в системах автоматизированного проектирования при экспорте чертежей.

¶Поддержка в браузерах

Все современные браузеры — Chrome, Firefox, Safari, Edge — поддерживают SVG 1.1 нативно. SVG можно встраивать в HTML тремя способами: напрямую через тег <svg>, как изображение через <img>, или через элемент <object>. Внутреннее встраивание через <svg> даёт наибольшие возможности для интерактивности и стилизации.

¶Связанные форматы

С SVG конкурируют или дополняют его ряд других форматов: VML (Vector Markup Language), разработанный Microsoft и поддерживаемый в старых версиях Office; PDF, используемый в полиграфии; и Canvas — HTML-элемент для растрового рисования, который в отличие от SVG не хранит описание сцены в документе.

¶Источники

• W3C SVG Working Group. Scalable Vector Graphics (SVG) 1.1 Specification.
• W3C. SVG 2 (W3C Recommendation).
• Фримен Э. «SVG. Полное руководство».
• Мейер Э., Вейсманн А. «SVG и XML в веб-дизайне».