Формат SVG

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

Отсюда главное свойство формата: масштабируемость без потерь. Один и тот же файл одинаково чётко выглядит на иконке в 16 пикселей и на баннере во всю стену, потому что каждый раз рисуется заново, а не растягивается.

Что это даёт на практике

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

Поскольку внутри лежит текст, SVG прекрасно сжимается при передаче, поддаётся правке в обычном редакторе и умеет анимацию средствами CSS.

Где начинаются ограничения

Фотографию в SVG не сохранишь: её нельзя описать набором фигур. Формат предназначен для графики — логотипов, иконок, схем, диаграмм.

Вторая сложность — совместимость за пределами браузера. Многие формы загрузки SVG не принимают из-за возможности встроить в файл скрипты. Офисные пакеты вставляют вектор с оговорками, службы печати чаще просят растр, а конструкторы сайтов иногда требуют PNG.

Перевод в растр

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