SVG в PNG — когда вам правда нужны пиксели (и когда не стоит)

Есть особая досада в том, чтобы иметь идеальный логотип и некуда его поставить. SVG чёток при любом размере, весит почти ничего и выглядит безупречно в браузере — а потом вы пытаетесь вставить его в письмо, задать как превью для соцсети или вклеить в чуть-слишком-старый софт, и он просто не показывается. Пусто. С файлом всё в порядке. Место, куда вы его кладёте, попросту не говорит на языке вектора.

Вот и вся причина, по которой SVG в PNG существует как задача. Не потому что PNG лучше — обычно нет, — а потому что немалая часть мира умеет читать только пиксели.

Вектор и растр, коротко

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

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

Так что конвертация SVG в PNG — обмен бесконечной масштабируемости на универсальную совместимость. Хороший это обмен или нет, целиком зависит от того, куда картинка направляется.

Когда пиксели PNG вам правда нужны

Три случая, где я растеризую без колебаний, потому что вектор попросту не сработает:

Почта. Почтовые клиенты не рендерят SVG — Gmail, Outlook, Apple Mail, по сути все они отказывают ему из соображений безопасности. Логотип в подписи письма или в рассылке обязан быть растровым форматом. PNG — потому что вам нужна прозрачность.

Превью для соцсетей и OG. Та карточка, что появляется при отправке ссылки, — Open Graph-изображение — должна быть растром фиксированного размера, обычно 1200x630. Платформы не станут рендерить там SVG. Если ваш исходник — вектор, вы экспортируете PNG ровно этого размера.

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

Во всех трёх решающий фактор один: место назначения физически не читает вектор, так что масштабируемость неважна. Формат, который отображается, бьёт формат, который нет, всегда.

Единственное, что надо сделать правильно: разрешение

Вот ошибка, которую я вижу чаще всего и сам совершал по молодости. Раз PNG зафиксирован на том размере, в котором вы его экспортируете, экспортировать надо достаточно крупно — и в идеале ровно в том размере, в каком будете показывать.

Экспортируйте логотип как PNG 100x100, а потом покажите его на 300 пикселях на плотном экране — он выйдет мягким и рваным. Пикселей на заполнение этого места просто нет. Средство простое: экспортируйте в том размере, в каком реально используете, или крупнее, особенно для дисплеев Retina и 4K, где часто нужен двойной от номинального. Это единственное реальное преимущество, от которого вы отказываетесь, покидая вектор, так что уделите миг верному целевому разрешению.

Когда растеризовать НЕ надо

Если место назначения умеет читать SVG, оставьте SVG. Точка.

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

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

Как я делаю это на самом деле

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

Но настоящее умение не в конвертации. Оно в вопросе, который вы задаёте первым: читает ли это место вектор? Если да — оставьте SVG в покое и наслаждайтесь самым острым и самым лёгким вариантом из существующих. Если нет — почта, OG-карточка, какой-нибудь упрямый старый софт — тогда растеризуйте, в верном размере, а SVG сберегите на следующий раз. Сделайте этот выбор правильно и больше никогда не увидите пустой рамки там, где должен быть ваш логотип.