PNG или SVG: какой формат выбрать

Два изображения могут выглядеть на экране одинаково и при этом вести себя совершенно по-разному, когда вы их масштабируете, редактируете или выкладываете в продакшн. PNG и SVG стоят по разные стороны этой границы, и правильный выбор экономит много переделок потом.

Что на самом деле хранит каждый формат

PNG - это сетка пикселей. У каждой точки фиксированный цвет, поэтому файл описывает, как изображение выглядит ровно при одном размере. Увеличьте его сверх этого размера, и браузеру придётся додумывать недостающие детали, из-за чего растянутый PNG становится мягким и блочным.

SVG хранит не пиксели, а инструкции. Он говорит: нарисуй здесь круг, залей эту форму таким цветом, пройди по этому контуру. Браузер перерисовывает эти инструкции в любом нужном размере, поэтому результат остаётся чётким и на телефоне, и на ноутбуке, и на билборде.

Когда лучше PNG

Фотографиям место в PNG или JPG. В них тысячи тонких переходов цвета, которые векторные контуры не описывают эффективно, а попытка их трассировать даёт раздутый файл, выглядящий хуже оригинала.

PNG также безопасный выбор, когда нужна гарантированная прозрачность и детали без потерь для скриншота, текстуры или макета интерфейса.

Когда выигрывает SVG

Логотипы, иконки и плоские иллюстрации - идеальные кандидаты на SVG. В них немного сплошных цветов и чистые края, которые векторы воспроизводят точно. Один файл затем покрывает любую плотность экрана, которую вы когда-либо задействуете.

Поскольку SVG - это просто текст, он хорошо сжимается, аккуратно кешируется и перекрашивается одной строкой CSS.

Конвертация с умом

Если ваш логотип застрял в PNG, трассировка обратно в векторные контуры снова даёт гибкий ресурс. Наш конвертер PNG в SVG предлагает для этого режим трассировки, а также режим встраивания, когда нужен лишь контейнер SVG вокруг исходных пикселей.

Правило простое. Берите SVG, когда графика должна масштабироваться, и оставайтесь на PNG, когда изображение фотографическое или очень детализированное.