Как конвертировать SVG в PNG (и когда это нужно)
Практическое руководство по переводу векторных SVG в чёткие PNG в браузере: масштаб, прозрачность и когда какой формат выигрывает.
SVG — формат, который хочется использовать для иконок и логотипов, пока не упрёшься в стену. Кто-то просит «просто PNG», CMS не принимает загрузку, а почтовый клиент вообще ничего не показывает. Конвертер SVG в PNG проводит через эту стену в пару кликов — прямо в браузере.
SVG и PNG не конкурируют — у них разные задачи
SVG — это математика. Он хранит фигуры как координаты и кривые в XML-файле, поэтому остаётся чётким при любом размере: 16 пикселей или 1600, файл один и тот же, без размытия. PNG — это фиксированная сетка пикселей. Сохранили в 512×512 — это и есть всё, что у вас есть: увеличите, и края поплывут.
Тогда зачем менять гибкий формат на фиксированный? Потому что половина программ вокруг просто не понимает SVG.
Когда PNG действительно нужен
- Почта. Gmail, Outlook и большинство клиентов вырезают SVG из писем, поэтому логотип в рассылке приходится отправлять как PNG или JPG.
- Формы загрузки. GitHub, многие форумы и куча CMS отклоняют SVG, потому что в файле может прятаться JavaScript — это реальный риск межсайтового скриптинга. PNG ничего не выполняет, поэтому проходит.
- Старые документы. Вставьте SVG в старую сборку Word или PowerPoint — иногда он показывается пустым прямоугольником. PNG встраивается везде.
- Иконки и ассеты сторов. Большинство требований к иконкам приложений и листингам в магазинах просят PNG в точных размерах.
С разрешением чаще всего и ошибаются
Самая частая ошибка: человек экспортирует иконку в её «родных» 24 пикселях, а потом удивляется, почему на телефоне она мыльная. Современные экраны упаковывают два-три физических пикселя в каждый CSS-пиксель, поэтому экспорт в 24px на Retina рисуется в четверть разрешения.
Для этого и нужны кнопки масштаба. Источник векторный, поэтому увеличение ничего не стоит по качеству: логотип 256px при 4× превращается в чистый PNG 1024px. Сомневаетесь — экспортируйте крупнее. PNG всегда можно уменьшить, но дорисовать в нём детали уже не выйдет.
Прозрачный или белый?
PNG хранит альфа-канал, поэтому прозрачный фон SVG останется прозрачным. Именно это нужно логотипу, который ляжет поверх другого контента. Проблема всплывает, когда тот же PNG попадает на тёмный фон и чёрная иконка исчезает. Переключите на белый, прижмите изображение к сплошной подложке до экспорта — и сюрпризов потом не будет.
О размере по умолчанию
Если у SVG нет ширины, высоты и viewBox, браузеру нечем определить его размер, и спецификация откатывается к 300×150 пикселей. Конвертер читает эти атрибуты, чтобы выбрать разумное значение. Если экспорт вышел странно мелким, обычно дело именно в этом запасном размере — задайте масштаб или впишите точную ширину, и контроль снова у вас.
Всё работает на Canvas API прямо в вашей вкладке. Файл никуда не загружается, а это важнее, чем кажется, когда логотип ещё не выпущен или фирменный знак принадлежит клиенту. Перетащите SVG в Конвертер SVG в PNG, и PNG будет готов раньше, чем вы дочитаете эту строку.