Что такое SVG и что такое PNG?
SVG (масштабируемая векторная графика) — векторный формат на основе XML. Изображение описывается математическими контурами, фигурами и цветами, а не состоит из пикселей, поэтому не искажается при любом увеличении. Логотипы, иконки, иллюстрации и кнопки дизайнеры обычно создают именно в SVG.
PNG — растровый формат, состоящий из фиксированного числа пикселей. Он поддерживает прозрачный фон (альфа-канал) и обладает исключительной универсальностью — его открывают практически все программы, платформы и операционные системы.
Когда нужно конвертировать SVG в PNG?
Самые распространённые случаи: платформа загрузки не поддерживает SVG (например, некоторые панели интернет-магазинов, социальные платформы, маркетплейсы графики); макет нужно сдать в растровом виде; либо принимающая сторона принимает только файлы PNG.
Другой частый случай — экспорт иконок: в коде или макете используется SVG, но при передаче нетехническим коллегам или загрузке в библиотеку ассетов PNG универсальнее.
Как выбрать размер при конвертации?
Исходный размер: экспорт в размере, заданном самим SVG; подходит, когда размер уже правильный.
Масштабирование по коэффициенту: 2×, 3×, 4× — для экранов высокой чёткости (Retina). Для иконок обычно рекомендуется экспорт минимум в 2×, иначе на экранах с высоким разрешением они будут выглядеть размыто.
Свой размер: вручную задайте ширину и высоту под конкретную задачу. Рекомендуется включить сохранение пропорций, чтобы изображение не растягивалось.
Как поступить с прозрачным фоном?
PNG изначально поддерживает прозрачный фон, поэтому прозрачные области SVG сохраняются по умолчанию.
Если нужен материал с подложкой определённого цвета (например, белая подложка для печати или вёрстки), выберите в настройках фона белый, чёрный или любой свой цвет.