Что такое SVG: векторная графика, которая не теряет качество при любом масштабе

Что такое SVG простыми словами

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

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

Вектор против растра: в чём разница

Чтобы понять SVG, надо понять одно противопоставление: вектор против растра. Это два принципиально разных способа хранить изображение.

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

Векторная графика (SVG) хранит не точки, а геометрию: точки, линии, кривые Безье, окружности, прямоугольники. Это набор формул. Когда нужно показать картинку, эти формулы пересчитываются под текущее разрешение — математика одинаково точна и для значка 16 пикселей, и для вывески высотой в этаж.

Кто придумал SVG: стандарт W3C

SVG — не закрытая разработка одной компании, а открытый стандарт консорциума W3C (World Wide Web Consortium — той самой организации, что задаёт правила всего веба). Версия SVG 1.0 получила статус официальной рекомендации 4 сентября 2001 года. Версия 1.1 вышла в 2003 году, а её второе издание — в 2011-м; именно 1.1 долго оставалась рабочей лошадкой формата.

Над спецификацией трудились конкуренты, которых редко увидишь за одним столом: Adobe, Apple, IBM, Microsoft, Sun Microsystems, Corel и другие. Такой состав авторов гарантировал, что формат станет по-настоящему универсальным, а не привязанным к одному продукту. SVG с самого начала строился на фундаменте уже проверенных веб-технологий — XML для структуры, CSS для оформления, DOM для скриптов.

Почему вектор масштабируется бесконечно

Это ключевое свойство SVG, и работает оно элегантно просто. Раз в файле лежат не пиксели, а описание фигур, у изображения нет «родного разрешения». Нечему пикселизоваться — потому что пикселей в файле вообще нет до момента отрисовки.

Представьте указание «проведи линию из точки A в точку B». Эту линию можно нарисовать на спичечном коробке и на стене дома — она везде останется ровной и чёткой, потому что инструкция не меняется, меняется лишь масштаб. Именно так браузер поступает с SVG: пересчитывает координаты под нужный размер и рисует заново.

Практический результат — один файл логотипа годится для всего сразу: фавиконки 16×16, шапки сайта, презентации и печатного плаката. И он всегда будет идеально резким, в том числе на дисплеях Retina и других экранах с высокой плотностью точек, где растровые иконки часто выглядят размыто.

SVG — это текст: что это даёт

Откройте PNG в «Блокноте» — увидите кашу из нечитаемых символов. Откройте SVG — и увидите аккуратный текст с понятными тегами. Дело в том, что SVG — это документ XML, то есть обычный текст, а не двоичный файл. Внутри лежат человекочитаемые элементы вроде <circle>, <rect> и <path>.

Из «текстовости» вытекает целая россыпь практических плюсов:

• Правка в коде. Поменять цвет фигуры или подвинуть элемент можно прямо в текстовом редакторе, без графической программы — иногда это секундное дело.
• Поиск и автоматизация. По содержимому SVG можно искать текстом и массово обрабатывать скриптами, как любой код.
• Дружба с системой контроля версий. Git видит точечные изменения в SVG построчно — в отличие от растра, который для него просто «новый бинарник целиком».
• Сжатие gzip. Текст отлично жмётся. Сжатый SVG называют .svgz и весит он обычно на 20–50% меньше исходного; веб-серверы часто отдают SVG уже сжатым «на лету».

Стили, анимация и интерактивность

Поскольку SVG живёт по правилам веба, он умеет куда больше, чем просто «лежать картинкой». С ним можно работать почти как с обычным HTML.

• Стилизация через CSS. Цвета, обводки, тени и наведение мыши задаются теми же таблицами стилей, что и для сайта. Иконку можно перекрасить под тему страницы, не трогая сам файл.
• Анимация. Фигуры SVG двигаются и меняются тремя способами: средствами CSS, встроенным языком SMIL и через JavaScript. Так делают «оживающие» логотипы и плавные загрузочные индикаторы.
• Интерактивность. Элементы SVG реагируют на клики и наведение — на этом построены, например, кликабельные карты и живые диаграммы.
• Градиенты и фильтры. Встроенные плавные переходы цвета, размытия и тени — без подключения растровых картинок.

Где SVG хорош, а где — нет

У SVG есть чёткая зона силы и одна большая слабость. Понимание границы — половина пользы от знания формата.

SVG великолепен для:

• логотипов и фирменного стиля — один файл на все носители, от визитки до билборда;
• иконок и элементов интерфейса — резкие на любом экране, легко перекрашиваются через CSS;
• иллюстраций с плоскими цветами — рисунки, в которых заметные участки одного оттенка;
• графиков, диаграмм и инфографики — их можно строить программно и делать интерактивными;
• карт — масштабирование без потерь здесь особенно кстати.

Простое правило: если картинку «нарисовали на компьютере» — это работа для SVG; если её «сняли камерой» — оставьте её растром. Логотип, иконка, схема — вектор. Портрет, пейзаж, скриншот — растр.

Как открыть и конвертировать SVG

Хорошая новость: SVG понимают все современные браузеры без исключения. Самый быстрый способ посмотреть файл — просто перетащить его в окно Chrome, Firefox, Safari или Edge. Для редактирования подойдут векторные редакторы вроде Inkscape (бесплатный), Adobe Illustrator или онлайн-сервиса Figma.

Иногда вектор нужно превратить в растр — например, чтобы вставить картинку в редактор, мессенджер или сервис, который не понимает SVG. Тогда его конвертируют в PNG: формат с прозрачностью и сжатием без потерь, который открывается где угодно.

Нужен другой формат? Есть конвертация SVG в JPG для совместимости и SVG в PDF для печати. А если, наоборот, надо превратить растровый логотип в вектор — пригодится PNG в SVG. Полный список преобразований — на странице всех форматов.