Мой дэйли дайджест

одно техническое понятие в день

SVG

4 июля 2026 · ~13 мин чтения

формат-данных веб графика стандарт xml

SVG

SVG (Scalable Vector Graphics, «масштабируемая векторная графика») — это открытый стандарт W3C для описания двумерной графики текстом. Файл .svg — не картинка из пикселей, а набор XML-инструкций вида «нарисуй круг тут, линию туда, залей это синим»; браузер сам превращает эти инструкции в изображение любого размера без потери качества.

История

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

Конец 1990-х — контекст. В вебе царит растровая графика: PNG (появился в 1996 как замена GIF), JPEG (1992, для фотографий). Векторной графики в браузерах почти нет — если нужно что-то более сложное, чем картинка, разработчики тянутся к плагину Adobe Flash (тогда Macromedia Flash), который в конце 90-х уже стоит у большинства пользователей. Проблема: Flash — проприетарный, требует плагин, к тому же тяжёлый.

1998 — война форматов. Два лагеря независимо приносят в W3C свои предложения векторного веб-формата:

W3C, увидев, что нужно мирить два лагеря, создаёт рабочую группу. Из компромисса между PGML и VML рождается SVG.

1999 — первый рабочий черновик. Публикуется в феврале.

2001, 4 сентября — SVG 1.0. Официальная рекомендация W3C. Дата, с которой отсчитывают возраст стандарта.

2003 — SVG 1.1. Модульная переработка: стандарт разбит на профили (Tiny, Basic, Full) — чтобы работал и на мобильных телефонах того времени.

2004–2010 — тихие годы. Браузеры поддерживают SVG вяло. Internet Explorer вплоть до 8-й версии SVG вообще не понимает — только свой VML. Flash по-прежнему доминирует.

2010 — переломный момент. Стив Джобс публикует открытое письмо «Thoughts on Flash», где объясняет, почему на iPhone и iPad Flash никогда не будет: закрытый, прожорливый по батарее, дырявый по безопасности. Индустрия воспринимает это как приговор.

2011 — Internet Explorer 9 наконец добавляет поддержку SVG. С этого момента SVG работает во всех живых браузерах.

2014 — HTML5 официально узаконивает возможность вставлять <svg> прямо в HTML-разметку, без отдельного файла.

2016 — SVG 2. Новая большая версия: упрощённые пути, интеграция с CSS, новые фильтры. Формально до сих пор в статусе Candidate Recommendation, но по факту почти всё уже работает в браузерах.

2020 — конец эпохи Flash. 31 декабря 2020 Adobe окончательно прекращает поддержку Flash Player. К этому моменту SVG уже занял всё пространство, где раньше правил Flash: иконки, логотипы, анимация интерфейсов, инфографика.

Сегодня SVG — стандарт де-факто для любой векторной графики в вебе, и один из немногих форматов, которые пришли из 2001 года и до сих пор актуальны без переизобретения.

Что это такое

Физически SVG — это обычный текстовый файл, только с расширением .svg. Если открыть его в блокноте, там будет что-то вроде:

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

Три строчки — и это полноценная картинка: красный круг в центре квадратного холста. Браузер прочитает XML, поймёт «нарисуй окружность в точке (50,50) радиусом 40, залей томатным цветом» — и нарисует.

Чтобы понять, чем SVG отличается от остального, полезно сравнить его с ближайшими соседями.

SVG vs растровые PNG/JPEG. PNG и JPEG хранят изображение как сетку пикселей: каждый пиксель — три или четыре числа (RGB или RGBA). Если растянуть PNG в два раза, браузер вынужден «додумывать» промежуточные пиксели — картинка мылится. SVG хранит не пиксели, а инструкции: «круг радиусом 40». Радиус можно посчитать в любом размере — картинка всегда чёткая. Обратная сторона: SVG не подходит для фотографий. Фотографию описать как «круги и линии» невозможно — размер файла станет чудовищным.

SVG vs Canvas. <canvas> — это тоже способ рисовать в браузере, но иначе. Canvas — растровый холст, на котором ты рисуешь через JavaScript API (ctx.arc(...), ctx.fill()). Как только нарисовал — это уже пиксели, отдельных «объектов» нет. SVG наоборот: каждая фигура — узел в DOM (дерево документа), к ней можно навесить обработчик клика, поменять цвет через CSS, анимировать. Правило большого пальца: если элементов десятки-сотни и они интерактивные — SVG. Если тысячи и просто рисуешь картинку (игра, график в реальном времени) — Canvas.

SVG vs иконочные шрифты. В 2010-х иконки часто делали как шрифт (Font Awesome, Glyphicons): каждая иконка — «буква». Работало, но с ограничениями: только одноцветно, плохо с доступностью, и грузился целый шрифт ради трёх иконок. SVG-иконки победили: они цветные, каждая — отдельный файл, можно менять цвет через CSS, доступны скринридерам.

Аналогии из жизни

Рецепт против фотографии готового блюда. Растровое изображение — это фото борща: если увеличить, будут видны отдельные пиксели-«зёрна». SVG — это рецепт борща: «свёкла — 300 г, вода — 2 л, варить 40 минут». По рецепту можно приготовить порцию на двоих или на сто человек — качество не пострадает.

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

Ноты против аудиозаписи. MP3 — это запись конкретного исполнения: качество фиксировано частотой дискретизации. Ноты (партитура) — это инструкции: «до, ми, соль, четверть, форте». По нотам оркестр сыграет и в маленьком зале, и в стадионе; электронный синтезатор сыграет их басом, а хор — голосом.

Где ломается: ноты не передают тембр конкретного пианиста, скрип стула, кашель в зале. Всё, что не «нота-длительность-громкость», теряется. Так же и SVG: он не может передать фактуру акварельной бумаги или зерно фотоплёнки — только чистую геометрию.

Чертёж дома против фотографии дома. Архитектурный чертёж — это инструкции для строителей: стены, окна, двери, размеры. По чертежу можно построить дом в масштабе 1:1, макет 1:100 или напечатать плакат на стену — всё будет корректно. Фотография дома — это конкретный ракурс, свет, время года.

Где ломается: чертёж не показывает, как дом выглядит вечером, когда в окнах горит свет и на дворе играют дети. Он про структуру, а не про атмосферу. SVG так же: он про «что где нарисовано», а не про «как это выглядит в конкретной обстановке».

Как это работает

Под капотом SVG — это XML-дерево. Тот же принцип, что и HTML: вложенные теги с атрибутами. Только вместо <div> и <p> там <circle>, <rect>, <path>, <text>.

Корневой элемент — <svg>. У него есть важный атрибут viewBox — это «внутренняя система координат». Пишешь viewBox="0 0 100 100" — говоришь браузеру: «внутри моего рисунка координаты идут от 0 до 100 по обеим осям». А физический размер (сколько пикселей на экране это займёт) задаётся отдельно через width/height или через CSS.

Это разделение — ключевая штука. viewBox — окно, через которое ты смотришь на бесконечный векторный холст. viewport (то, что жаргоном тоже часто называют «окно просмотра») — реальный размер этого окна на экране. Меняешь viewport — картинка масштабируется без потерь, потому что внутри всё пересчитывается математически.

Простые фигуры. Есть готовые элементы: <circle>, <rect>, <ellipse>, <line>, <polygon>. Каждый — со своими атрибутами. Круг: <circle cx="50" cy="50" r="40"/>. Прямоугольник: <rect x="10" y="10" width="80" height="60"/>.

Универсальный инструмент — <path>. Всё, что сложнее круга и прямоугольника, рисуется через <path> (контур). У него есть атрибут d (от «data»), внутри которого — команды. Каждая буква — команда:

Заглавная буква — абсолютные координаты, строчная (m, l, c) — относительные от текущей точки.

Пример — треугольник:

<path d="M 10 10 L 90 10 L 50 90 Z" fill="skyblue"/>

«Начали в (10,10), провели линию в (90,10), потом в (50,90), закрыли». Всё, треугольник.

Когда Figma, Illustrator или Sketch экспортируют логотип в SVG, они превращают все кривые в один-два больших <path> с длинной строкой команд — сотни букв и чисел подряд. Отсюда и странные d="M 12.34 5.67 C 12.34 8.55 10.02 10.89 ..." в реальных файлах.

Стили и интерактивность. Каждая фигура — это узел в DOM. Можно применять к нему CSS (fill, stroke, opacity, трансформации), можно вешать обработчики (onclick, onhover), можно анимировать. Есть и встроенная SMIL-анимация (<animate>), хотя современный подход — использовать CSS или JavaScript-библиотеки.

Рендеринг. Браузер парсит XML, строит DOM, потом растрирует SVG под текущее разрешение экрана — на ретине это будет в 2 раза больше пикселей, но исходник тот же. Именно поэтому SVG выглядит одинаково чётко на любом устройстве: 5-дюймовом смартфоне и 4К-мониторе.

Где встречается в обычной жизни

Где встречается в IT и бизнесе

Кто пользуется

Альтернативы и конкуренты

Когда НЕ стоит использовать

Связанные понятия

Литература и источники

Где встретилось у меня

За последние сутки много копался в SVG-логотипах: экспортировал из Figma, потом руками сверял координаты внутри d="..." с эталонным файлом, чтобы понять, почему один и тот же логотип в двух местах отличается на пару пикселей. Рядом шёл соседний сюжет — упаковка HTML5-баннера в архив с жёстким лимитом по размеру: там как раз векторные SVG-логотипы позволяли не выходить за лимит, где растровые версии сразу пробивали потолок.

Краткое резюме