Конвертировать SVG в PNG

Как зафиксировать разрешение, которого никогда не было

У SVG нет ни пикселей, ни размера. Это набор инструкций для рисования — такой контур, такая заливка, такая кривая, — поэтому он остаётся чётким при любом увеличении и поэтому логотипу лучше как можно дольше оставаться в SVG. Растеризация навсегда фиксирует один размер. Поэтому выбирайте размер под самое крупное место, где появится картинка, и помните, что экрану с двойной или тройной плотностью нужно вдвое или втрое больше пикселей: значку, показанному в 64 пункта, на современном телефоне нужно 192 пикселя, чтобы выглядеть как надо.

Чаще всего проблемы возникают с текстом, и причину стоит понимать. SVG говорит: «набери эту строку шрифтом Helvetica Neue»; если на устройстве, которое его отрисовывает, Helvetica Neue нет, подставляется другой шрифт и вёрстка съезжает — заголовок, помещавшийся в рамку, теперь из неё вылезает. Веб-шрифт, подключённый по URL, здесь вообще не загрузится, потому что SVG, отрисовываемый как изображение, намеренно изолирован и не может обращаться к сети. Решение рано или поздно узнаёт каждый дизайнер: переведите текст в кривые перед экспортом, и буквы станут контурами, которым шрифт вообще не нужен.

Та же изоляция объясняет и остальные сюрпризы. Связанный растровый файл — элемент image, указывающий на какой-то .png, — отрисовывается как пустое место. Скрипты не выполняются, поэтому SVG, который рисует себя на JavaScript, выходит пустым или недорисованным. Декларативная анимация отрисовывается в начальном состоянии, то есть как неподвижный первый кадр. Всё самодостаточное работает безупречно: градиенты, фильтры, обтравочные контуры, маски, встроенные изображения data URI и эффекты размытия отрисовываются так, как задуманы.

PNG здесь правильный выбор, а JPEG — нет. Векторная графика — это однотонные заливки и резкие края, именно то, что PNG хорошо сжимает, а JPEG портит: вокруг каждого резкого края в JPEG появляется ореол. Прозрачность переносится как настоящий альфа-канал, так что логотип, экспортированный в нужном размере, ляжет на любой фон. Если в SVG вообще не указаны размеры, а есть только viewBox, пропорции берутся из него, а размер выбираете вы.

Если нужно другое

resvg и rsvg-convert отрисовывают SVG из командной строки с настоящим набором шрифтов, поэтому текст выходит задуманным шрифтом, а не заменой, — rsvg-convert -w 512 in.svg -o out.png и есть вся команда. Inkscape --export-type=png --export-dpi=300 — самая полная реализация спецификации из существующих: она справляется с фильтрами и режимами наложения, которые более лёгкие движки передают лишь приблизительно.

Прежде чем растеризовать, проверьте, нужен ли PNG вообще. Все браузеры уже больше десяти лет отображают SVG нативно, и для логотипа или значка на сайте SVG меньше, бесконечно чёткий и стилизуется через CSS. Случаев, когда пиксели действительно нужны, меньше, чем принято думать: favicon, превью для соцсетей, электронная почта, материалы для магазинов приложений и программы, которые не читают векторы.