Об этом инструменте
Этот инструмент растрирует векторный файл SVG в изображение PNG или JPEG с выбранным вами разрешением — прямо в браузере. Перетащите файл .svg, и инструмент считает его собственные width, height и viewBox, чтобы предложить разумный начальный размер — после этого вы можете указать любые нужные выходные размеры перед конвертацией.
Он пригодится всякий раз, когда нужна растровая версия векторной графики: превратить логотип или иконку в PNG для платформы, не принимающей загрузку SVG, сгенерировать несколько фиксированных пиксельных размеров (иконки приложений, favicon, аватары соцсетей) из одного мастер-файла, или вставить чёткую графику в документ или презентацию, ожидающую обычный формат изображения.
Поскольку SVG — это векторная графика, а не сетка пикселей, увеличение или уменьшение до выбранного вами размера остаётся чётким — без размытия и пикселизации, которые возникают при растягивании JPEG- или PNG-фото сверх исходного разрешения. Выберите PNG, чтобы сохранить прозрачность исходного SVG, или JPEG с цветом фона, если нужно плоское, полностью непрозрачное изображение. Всё происходит локально через Canvas API — ваш файл SVG никуда не загружается.
Частые вопросы
Почему мой растрированный PNG выглядит пикселизированным при больших размерах?
Этого не должно происходить, если само преобразование работает правильно — SVG представляет собой векторные данные, поэтому оно чисто масштабируется до ЛЮБОГО выходного размера в пикселях без пикселизации, в отличие от увеличения растрового изображения. Если ваш PNG выглядит пикселизированным, перепроверьте, действительно ли установленные вами ширина/высота вывода соответствуют тому, что вы имели в виду (гораздо меньший целевой размер, чем задумано, будет выглядеть «правильно», но крошечным, а затем БУДЕТ выглядеть размытым/пикселизированным, если вы отобразите его в гораздо большем размере в конечном варианте использования — это проблема масштабирования во время отображения, а не во время преобразования). Экспортируйте заново с истинными предполагаемыми конечными размерами в пикселях, чтобы получить чёткий результат.
Почему мой SVG отображается меньше/больше ожидаемого до установки пользовательских размеров?
Отображаемый размер по умолчанию берётся из собственных заявленных атрибутов `width`/`height` файла SVG, если они присутствуют, или из его размеров `viewBox`, если нет, или из общего запасного значения 512×512, если в файле нет ни того, ни другого — многие SVG (особенно экспортированные из инструментов дизайна) объявляют только `viewBox` без явных размеров в пикселях, поэтому «естественный» размер, который вы видите, не всегда имеет значение. Просто установите поля ширины/высоты на то, что вам действительно нужно; поскольку SVG — это векторные данные, нет компромисса в качестве при выборе размера, отличного от обнаруженного по умолчанию.