SVG
PNG
PNG
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
Ожидание файла...
Коротко об инструменте
PNG — простой способ вынести вектор в растр и ничего по дороге не потерять. Сжатие здесь без потерь, поэтому граница между заливками остаётся ровной на любом множителе, а альфа-канал переживает экспорт целиком. Отсюда и область применения: иконки интерфейса, логотипы, которые лягут на заранее неизвестный фон, ассеты для презентации. Расплата ровно одна — тот же рисунок в PNG весит заметно больше, чем в JPG. Смотрите также: тот же вектор в JPG, когда важен вес, обратный путь: трассировать PNG в вектор, собрать favicon из готового PNG.
Да, пока галочка «Прозрачный фон» отмечена, а отмечена она изначально. Альфа-канал переносится как есть, поэтому логотип ляжет на тёмную шапку сайта, на фотографию или на цветную плашку без прямоугольника вокруг. Снимите галочку — и под рисунок подставится белое: так удобнее, когда файл идёт в печать или в документ, где прозрачность всё равно превратится в белое, но уже без вашего контроля.
Двумя вещами. Он хранит прозрачность, которой у JPG нет вовсе. И сжимает без потерь, а значит, вдоль границ заливок не появляется ореол из светлых и тёмных точек — беда JPEG именно на векторной графике с резкими краями. Обратная сторона — вес: логотип в PNG легко окажется втрое тяжелее того же логотипа в JPG. Для фотографической иллюстрации внутри SVG выбор обратный.
Отталкивайтесь от места, где картинка будет жить, и умножайте на плотность экрана. Иконке в макете 24 px нужен файл 48 px для retina, кнопке 48 px — 96 px. Брать больше «на всякий случай» вредно: браузер будет уменьшать растр на лету и съест часть резкости, ради которой всё и затевалось. Размеры самого SVG тут ни при чём, у вектора они условные.
Значит, в вашем SVG не оказалось ни атрибута width, ни height, ни viewBox — файлу просто нечем сообщить свой размер. Страница берёт 512 px как разумную середину и пишет об этом в статусе, чтобы значение не выглядело загадкой. Впишите нужную ширину в поле, и картинка перерисуется под неё.
Внутри вектора есть ссылка на внешний ресурс: подгружаемый шрифт или растровая вставка с другого адреса. Из-за неё браузер помечает холст как небезопасный и не выпускает из него готовое изображение. Это ограничение самого браузера, обойти его страница не может. Соберите SVG самодостаточным — шрифт в кривые, картинку в data:URI — и повторите.
Никуда за пределы вкладки. Разбор SVG, отрисовка на холсте и сборка PNG выполняются скриптом страницы, никаких обращений к серверу с содержимым файла нет. Ни макет, ни фирменный знак до релиза никуда не утекут, а после закрытия вкладки от них не останется и следа.
До: icon.svg размером 24×24 в атрибутах
После: множитель 4x — icon.png 96×96 с прозрачностью, края ровные без замыливания
До: logo.svg с альфой, ширина в файле 300
После: вписал 1200 — logo.png ложится на любой фон, белой рамки вокруг нет
Оценка и фидбек помогают понять, что улучшать дальше.