Как пользоваться инструментом «PNG в SVG»
- Перетащите спрайт в формате PNG, GIF или WebP.
- Выберите режим вывода: один path на цвет (самый компактный), объединённые прямоугольники или один rect на пиксель.
- Задайте размер отображения; viewBox остаётся в пикселях, так что SVG в любом случае масштабируется чисто.
- При желании добавьте сплошной фон.
- Скачайте .svg или скопируйте разметку.
Что вы получаете
- SVG с shape-rendering="crispEdges"
- Сравнение размера файла для каждого режима
- Исходный код SVG для копирования
Советы из практики геймдева
- Режим path обычно даёт самый маленький файл и лучше всего подходит для веба, иконок и лазерной резки.
- Режим прямоугольников проще всего править вручную или анимировать через CSS, ведь каждый блок — отдельный элемент.
- Держите спрайты небольшими. Спрайт 64×64 конвертируется мгновенно, а похожее на фото изображение с тысячами цветов даст огромный SVG.
- Полупрозрачные пиксели превращаются в fill-opacity, так что мягкие тени переживают конвертацию.
Сценарии использования
- Спрайты в роли чётких иконок или логотипов на сайте
- Печать пиксель-арта в большом размере (постеры, стикеры, мерч)
- Импорт пиксель-арта в Figma, Illustrator или Inkscape
- Лазерная и плоттерная резка по пиксельным дизайнам
Вопросы и ответы
Конвертация проходит без потерь?
Да. Каждый пиксель покрыт ровно одной фигурой с его точным цветом и альфой. Растеризуйте SVG в исходном размере — и получите исходный PNG.
Почему бы просто не сделать трассировку?
Инструменты трассировки сглаживают края в кривые, а это губит пиксель-арт. Этот конвертер сохраняет жёсткие углы 90° по пиксельной сетке.
Какой режим даёт самый маленький файл?
Path. Прямоугольники одного цвета собираются в один элемент path с короткими относительными командами. Инструмент показывает размер для каждого режима, чтобы их можно было сравнить.
Не будет ли размытия при масштабировании?
Нет. SVG использует shape-rendering="crispEdges" и целочисленные координаты, поэтому края остаются резкими при любом зуме.
Есть ли ограничение по размеру?
До 512×512 пикселей. Из изображений крупнее получаются слишком тяжёлые SVG, от которых мало толку.
Моё изображение загружается на сервер?
Нет, конвертация происходит в вашем браузере.