Превращайте масштабируемые SVG-векторы в готовые PNG-изображения
SVG-файл — это набор инструкций, а не готовая картинка. Откройте его в текстовом редакторе — и увидите XML, описывающий пути, фигуры, заливки и кривые: рецепт, которому браузер следует, чтобы заново нарисовать графику в любом запрошенном размере. PNG — полная противоположность: сетка цветных пикселей, зафиксированная при определённой ширине и высоте. Преобразование одного в другое называется растеризацией, и этот инструмент выполняет её полностью в браузере. Вы задаёте выходной размер, SVG рисуется на HTML canvas — и возвращается PNG. Ни один файл не покидает ваше устройство.
Вектор против растра — простыми словами
Ключевое различие — в подходе к разрешению. Поскольку SVG хранит математику, а не пиксели, он не зависит от разрешения: масштабируйте логотип от фавикона до рекламного щита — каждый край пересчитывается заново и остаётся математически чётким. У PNG такой свободы нет. Его пиксели зафиксированы, поэтому увеличение сверх нативного размера вынуждает просмотрщик растягивать существующие точки — и появляются размытость и «лесенка», выдающие растровое изображение.
Этот компромисс работает в обе стороны. Векторы непревзойдённы для логотипов, иконок и плоских иллюстраций из чётких фигур, а файлы обычно крошечные. Растровые форматы, такие как PNG, естественнее справляются с градиентами, мягкими тенями и фотографическими деталями — и, что важно, понятны практически всему. Растеризуя SVG, вы обменяете его бесконечную масштабируемость на универсальную совместимость PNG при одном выбранном размере.
Зачем вообще растеризовать SVG?
Если SVG так прекрасно масштабируется, зачем его конвертировать? Обычный ответ — совместимость. Множество мест просто не принимают SVG: многие почтовые клиенты отрезают или отказываются его отображать, редакторы документов и программы для презентаций часто хотят плоское изображение, маркетплейсы и рекламные сети требуют PNG или JPG, а большинство социальных платформ полностью игнорируют векторные загрузки. Некоторые системы управления контентом блокируют SVG намеренно из соображений безопасности — формат может содержать скрипты.
Вторая причина — когда вам намеренно нужен актив фиксированного размера. Иконки приложений, миниатюры, изображения Open Graph для предпросмотра и печатные материалы — все они предполагают точные пиксельные размеры. PNG фиксирует графику под этот размер, обеспечивая идентичное отображение везде без сюрпризов от просмотрщика, трактующего вектор по-своему. Конвертация исходного SVG в точные размеры, требуемые платформой, — нередко самый чистый путь к стабильному результату.
Выбор правильного разрешения экспорта
Поскольку PNG не умеет плавно масштабироваться вверх, размер экспорта важнее, чем при работе с вектором. Экспортируйте слишком маленьким — на современных экранах изображение выглядит размытым; экспортируйте без надобности большим — тратите трафик. Простое правило: определите максимальный размер отображения, экспортируйте не меньше него, а в идеале — с запасом для дисплеев с высокой плотностью пикселей.
Стандартные экраны достаточно покрыть на 1x — номинальный размер графики. Дисплеи Retina и High-DPI вмещают примерно вдвое больше пикселей в том же пространстве, поэтому экспорт на 2x сохраняет иконки и графику чёткими вместо размытых. Для печати, постеров и очень крупных форматов 3x или 4x даёт запас. Поскольку источник — вектор, экспорт в большем размере ничего не стоит по качеству: кривые просто пересчитываются с большим числом пикселей перед сведением в растр. Если сомневаетесь — рендерьте с запасом; большой PNG всегда можно уменьшить, а потерянные при масштабировании вверх детали не восстановить.
Прозрачность сохраняется
PNG поддерживает полноценный альфа-канал — значит, прозрачность переживает конвертацию. Если в SVG нет фоновой заливки, итоговый PNG сохраняет эти области прозрачными, и логотип или иконка аккуратно ляжет на любой фон без некрасивой белой рамки. Если нужен сплошной фон — добавьте его в SVG перед конвертацией. В любом случае то, что вы видите в векторе, PNG и сохранит — именно поэтому PNG, а не JPG, естественная цель для иконок, значков и наложений.
Всё остаётся на вашем устройстве
Этот конвертер работает как локальный код в браузере с использованием Canvas API. Ваш SVG считывается, рисуется и экспортируется без какой-либо отправки на сервер — нет загрузки, нет очереди, нет копии вашей графики в чужом хранилище. Это быстрее для вас и безопаснее для всего, что вы предпочтёте не передавать третьим сторонам: от невыпущенных брендов до внутренних схем. Закончив, изучите остальные наши инструменты для работы с изображениями — если создаёте значок для Windows или фавикон, конвертер PNG в ICO — естественный следующий шаг.
Часто задаваемые вопросы
Будет ли PNG таким же чётким, как SVG?
В размере экспорта — да. Поскольку вектор рендерится заново с выбранным разрешением, края остаются чёткими. Разница в том, что PNG нельзя будет увеличить без потери качества, а оригинальный SVG — можно.
Сохраняется ли прозрачность при конвертации?
Да. PNG имеет альфа-канал, поэтому прозрачные области SVG остаются прозрачными в PNG. Добавьте фон в SVG перед конвертацией, если нужна сплошная заливка.
Какое разрешение выбрать?
Подберите разрешение, равное максимальному размеру отображения или превышающее его. Используйте 1x для стандартных экранов, 2x для Retina и High-DPI, 3x или 4x для печати или крупной графики. Рендеринг в большем размере ничего не стоит по качеству, поскольку источник — вектор.
Почему не использовать SVG везде?
Многие почтовые клиенты, редакторы документов, маркетплейсы и социальные платформы не принимают SVG или не отображают его надёжно. PNG работает почти везде и фиксирует графику в предсказуемом, фиксированном размере.
Мои файлы куда-то загружаются?
Нет. Всё выполняется локально в браузере. Ваш SVG никогда не отправляется на сервер — ничего не загружается, не хранится и не отслеживается.
Можно ли конвертировать PNG обратно в SVG?
Без потерь — нет. Растеризация отбрасывает исходную математику, поэтому обратный путь означает трассировку пикселей в новые векторные пути, что редко совпадает с источником. Храните оригинальный SVG как мастер-файл.