PNG vs SVG: что выбрать и когда конвертировать
PNG состоит из пикселей, а SVG — из математических инструкций, поэтому правильный формат зависит от задачи. Простое руководство по выбору между ними и по тому, как превратить PNG в настоящий SVG.
На этой странице
PNG и SVG — это не удачная и неудачная версии одного и того же. Это два разных типа файлов, и правильный выбор зависит от того, что именно вы делаете. PNG состоит из пикселей, как маленькая мозаика из цветных квадратов. SVG состоит из математических инструкций: линий, кривых и форм, которые компьютер заново отрисовывает в любом размере. Это одно различие определяет все остальное. Короткое правило такое: используйте PNG для фотографий и детальных изображений, а SVG — для логотипов, иконок, текста и всего, что нужно масштабировать, крупно печатать или резать на плоттере. А если у вас есть PNG-логотип, который нужен в SVG, его нельзя просто сохранить как SVG. Его нужно конвертировать, и именно качество конвертации решает, получится ли хороший результат.
Коротко
- PNG = пиксели. Лучше всего подходит для фотографий, скриншотов и детальных изображений, которым нужна прозрачность.
- SVG = математические инструкции. Лучше всего подходит для логотипов, иконок, текста и всего, что вы будете масштабировать, крупно печатать или резать.
- Масштабирование сразу все показывает: увеличьте оба файла в 10 раз — PNG станет размытым, а SVG останется идеально четким.
- Нельзя просто переименовать PNG в
.svg. Чтобы превратить PNG в настоящий SVG, его нужно трассировать. Конвертируйте PNG в SVG и проверьте результат. - Остерегайтесь псевдо-SVG: PNG, завернутый в файл
.svg, все равно пикселизируется и все равно не редактируется как вектор.
В чем разница на самом деле: пиксели и математика
Откройте PNG, сильно приблизьте его, и рано или поздно вы упретесь в квадраты. Это фиксированная сетка пикселей. Если увеличить изображение больше его исходного размера, компьютеру приходится угадывать, что должно быть между этими квадратами, поэтому края становятся мягкими и блочными. Вот почему маленький логотип, сохраненный с сайта, выглядит мутным сразу после увеличения.
SVG хранит вместо этого инструкции: нарисовать здесь кривую, там — форму, залить ее таким-то цветом. Поскольку это математика, компьютер заново отрисовывает изображение идеально четким в любом размере — от favicon до билборда. Нечего угадывать и нечему размываться. Если идея "инструкций вместо пикселей" для вас новая, материал о том, что такое векторизация изображений, объясняет это подробнее.
PNG vs SVG: краткое сравнение
| PNG | SVG | |
|---|---|---|
| Из чего состоит | Пиксели (растр) | Математика (вектор) |
| Масштабируется без размытия | Нет, разрешение фиксировано | Да, в любом размере |
| Редактируемые формы | Нет, одно плоское изображение | Да, отдельные контуры и цвета |
| Прозрачность | Да | Да |
| Анимация | Нет | Да |
| Фотографии и мелкие детали | Хорошо справляется | С трудом, упрощает их |
| Поддержка в браузерах и приложениях | Универсальная | Широкая, но не во всех старых приложениях и email-клиентах |
| Типичный размер файла | Больше | Меньше для плоской графики, но может быть больше для сложной |
| Лучше всего подходит для | Фотографий, скриншотов, детальной графики | Логотипов, иконок, текста, файлов для резки |
Одно уточнение про размер: часто говорят, что "SVG меньше", и для плоского логотипа или иконки это обычно правда. Но SVG сложного, почти фотографического изображения может стать больше PNG, потому что ему приходится описывать каждую крошечную форму, которую он нашел. По размеру SVG выигрывает именно на простой плоской графике.
Что использовать? Решайте по задаче
Здесь нет единственного победителя. Все зависит от работы, которую должен выполнить файл. Вот быстрый выбор для самых частых случаев.
| Что вы делаете | Используйте | Почему |
|---|---|---|
| Графика для сайта, иконки, UI | SVG | Четко выглядит на любом экране и retina-дисплее, быстро загружается |
| Логотип, который будет использоваться везде | SVG | Один файл масштабируется от визитки до баннера для выставки без повторного экспорта |
| Фотографии | PNG (или JPG) | Векторы не могут воспроизвести непрерывные фотографические тона |
| Скриншоты, макеты приложений | PNG | Пиксельная точность и прозрачность там, где она нужна |
| Cricut, Silhouette, виниловые плоттеры | SVG | Режущие машины идут по контурам, а не по пикселям |
| Сублимация, DTG, печатные футболки | Зависит от печати или резки, см. ниже | |
| QR-коды | SVG | Остается четким и считываемым при любом размере печати |
| Печать: визитки, вывески | SVG для логотипа или графики, PNG/JPG для фотографии | Линейная графика печатается резче в векторе; фотографии лучше печатать как растр высокого разрешения |
Сублимация и печатные футболки часто сбивают с толку. В крафт-сообществах часто спрашивают, что заказывать для футболки: SVG или PNG. Честный ответ зависит от того, как эту футболку делают. Сублимация и прямая печать по ткани — растровые процессы, где наносится краска, поэтому принтеру обычно нужен PNG высокого разрешения с прозрачным фоном. Термотрансферная пленка — противоположный случай: машина режет по контурам, поэтому нужен SVG. Если сомневаетесь, задайте типографии один вопрос: вы это печатаете или вырезаете? Для резки подготовка SVG для Cricut — отдельный небольшой навык.
А если ваш логотип постоянно появляется с белым прямоугольником вокруг, это не битва форматов. Это прозрачность. Вы сохранили JPG, который не умеет хранить прозрачный фон, когда нужен был PNG или SVG.
Можно ли превратить PNG в SVG?
Можно ли превратить PNG в SVG? Да, но его нельзя просто сохранить как SVG. Его нужно трассировать: программа перерисовывает пиксельное изображение в векторные контуры. Обратный путь, из SVG в PNG, простой и надежный, потому что вы просто сплющиваете формы в пиксели фиксированного размера. Путь из PNG в SVG сложнее, и качество трассировки решает все.
Именно в этом сложном направлении результаты отличаются радикально. Хороший трассировщик пересобирает графику в чистые редактируемые контуры. Неаккуратный создает хаос из тысяч лишних опорных точек, рваных краев и цветов, которые невозможно разъединить. Один и тот же исходник, совершенно разный результат. Полное пошаговое руководство есть в статье как конвертировать PNG в SVG без потери качества.
Ловушка, о которой стоит знать: некоторые конвертеры вообще не трассируют изображение. Они заворачивают ваш исходный PNG внутрь файла .svg и отдают его обратно. Расширение правильное, файл открывается, но это все еще пиксели. Он размывается при масштабировании, и ни одну отдельную форму отредактировать нельзя. Это псевдовектор, и он тихо сводит на нет весь смысл конвертации. Та же ловушка часто встречается при векторизации логотипа.
Три быстрые проверки покажут, получили ли вы настоящий SVG:
- Увеличьте его. Настоящий вектор остается четким. Псевдовектор пикселизируется как PNG, которым он тайно все еще является.
- Нажмите на форму. Вы должны иметь возможность выбирать и двигать отдельные контуры, а не одну плоскую картинку.
- Посмотрите на сложность. Чистые кривые используют несколько опорных точек, а не тысячи. Раздутая трассировка тяжело редактируется и медленно режется — подробнее о том, почему в трассировках бывает слишком много узлов.
Важное ограничение лучше сказать сразу: не каждый PNG стоит превращать в SVG. Фотография, скриншот фотографии или ИИ-графика с большим количеством градиентов не трассируются во что-то чистое, потому что векторы описывают плоские формы, а непрерывные тона превращаются в постеризованные пятна. Если исходник — логотип, иконка или плоская иллюстрация, шансы хорошие. Если это фото, оставьте его PNG.
Как это выглядит с PerfectVector
Для направления PNG-to-SVG главное — получить трассировку, которая проходит эти проверки без часа ручной чистки после конвертации. Именно для этого создан PerfectVector. Он пересобирает изображение как чистые контуры с малым числом узлов, сохраняет каждый цвет отдельной редактируемой формой и выдает настоящий SVG, который корректно открывается в Illustrator, Figma или Inkscape. Вы можете превратить PNG в SVG и самостоятельно проверить контуры. Первые конвертации бесплатны, без кредитной карты.
Когда стоит оставить PNG
SVG не всегда является улучшением. Оставьте PNG, если:
- Это фотография или любое изображение с фотографическими деталями и градиентами.
- Вам просто нужна быстрая картинка для веба или email, и она уже нужного размера.
- Вам нужно, чтобы файл открывался где угодно без сюрпризов. PNG — универсальный растровый формат.
PNG оказывается правильным ответом чаще, чем признают поклонники форматов. Цель не в том, чтобы "всегда использовать SVG". Цель — выбрать подходящий файл для конкретной задачи.
FAQ
SVG лучше PNG? В целом ни один формат не лучше другого. Они подходят для разных задач. SVG выигрывает для логотипов, иконок, текста и всего, что нужно масштабировать, крупно печатать или резать, потому что он увеличивается без размытия. PNG выигрывает для фотографий, скриншотов и детальных изображений, потому что хранит настоящие пиксельные детали, которые SVG не может воспроизвести.
Можно ли превратить PNG в SVG?
Да, через трассировку, а не через переименование. Конвертер перерисовывает пиксели в векторные контуры. Это хорошо работает для плоской контрастной графики вроде логотипов и иконок и плохо — для фотографий. Всегда проверяйте, что результат является настоящим вектором с редактируемыми контурами, а не PNG, завернутым в .svg.
Какие недостатки есть у SVG? SVG плохо справляется с фотографиями и непрерывными тонами, некоторые старые приложения и email-клиенты поддерживают его не полностью, а неаккуратная конвертация может создать раздутый файл с тысячами лишних узлов, который трудно редактировать. Для плоской графики все это обычно не проблема.
Для Cricut лучше PNG или SVG? SVG. Cricut и другие режущие машины идут по векторным контурам, поэтому SVG режется чисто, а PNG сначала приходится трассировать внутри Design Space, часто с плохим результатом. Загружайте SVG всегда, когда есть такая возможность.
Для печати на футболке использовать PNG или SVG? Зависит от метода. Сублимация и прямая печать по ткани — растровые процессы, поэтому им нужен PNG высокого разрешения с прозрачным фоном. Термотрансферная пленка вырезается, поэтому для нее нужен SVG. Спросите у исполнителя, будут ли дизайн печатать или резать.
Что меньше: PNG или SVG? Для плоской графики вроде логотипов и иконок SVG обычно намного меньше. Для сложных или похожих на фото изображений SVG может оказаться больше PNG, потому что ему нужно описать каждую форму. Подбирайте формат под само изображение.
Логотип или графика застряли в PNG? Конвертируйте их в чистый редактируемый SVG и пройдите три проверки выше, чтобы убедиться, что получили настоящий вектор.
Ещё из блога
Можно ли преобразовать фото в SVG? Что происходит на самом деле и когда это работает
Фото можно пропустить через SVG-конвертер, но детализированный снимок не станет четким вектором. Вот что вы получите на самом деле и какие фото стоит конвертировать.
Как сделать многослойный SVG для Cricut
В многослойном SVG каждый цвет вырезается отдельной деталью. Самый чистый способ — сначала разделить изображение по цветам в SVG, чтобы оно загружалось в Cricut уже слоями.