SVG у PNG — коли вам справді потрібні пікселі (і коли ні)

Є особливий різновид розчарування — мати ідеальний логотип і не мати куди його подіти. SVG чіткий за будь-якого розміру, важить майже нічого й має бездоганний вигляд у браузері, — а тоді ви пробуєте вкласти його в лист, поставити як прев'ю для соцмереж або вставити в трохи застарий софт, і він просто не показується. Порожньо. Файл цілий. Місце, куди ви його кладете, просто не володіє векторною мовою.

Ось і вся причина, чому SVG-у-PNG існує як задача. Не тому, що PNG кращий — зазвичай ні, — а тому, що чимала частина світу вміє читати лише пікселі.

Вектор і растр, коротко

SVG — це не картинка. Це набір інструкцій: намалюй тут коло, ось цей контур, залий його таким кольором. Браузер виконує інструкції й малює їх наново за будь-якого розміру, який ви попросите, тож він гострий як лезо і на 16 пікселях, і на 16 000, а файл лишається крихітним, бо це лише математика.

PNG — протилежність. Це фіксована сітка кольорових пікселів, вирішена один раз, в одній роздільності. Збільште її понад рідний розмір — і вона м'якшає й розсипається на квадрати, бо більше пікселів для малювання немає, лише ті, що вписані. Плюс у тім, що сітку пікселів може прочитати геть усе. Це універсальна валюта зображень.

Тож конвертація SVG у PNG — це обмін безкінечного масштабування на універсальну сумісність. Чи це вдалий обмін, цілком залежить від того, куди прямує зображення.

Коли вам справді потрібен PNG

Три випадки, коли я растеризую без вагань, бо вектор просто не спрацює:

Пошта. Поштові клієнти не показують SVG — Gmail, Outlook, Apple Mail, по суті всі відмовляють йому з міркувань безпеки. Логотип у підписі листа чи в розсилці мусить бути растровим форматом. PNG, бо вам потрібна прозорість.

Зображення для соцмереж і OG-прев'ю. Маленька картка, що з'являється, коли ви ділитеся посиланням, — зображення Open Graph — має бути растром фіксованого розміру, зазвичай 1200x630. Платформи не показуватимуть там SVG. Якщо ваше джерело векторне, ви експортуєте PNG рівно того розміру.

Старіший чи офлайновий софт. Чимало настільних застосунків, презентаційних інструментів, редакторів документів і друкарських процесів або не вміють імпортувати SVG, або перекручують його. Дати їм PNG у щедрій роздільності просто працює, щоразу, без сюрпризів.

У всіх трьох вирішальний чинник той самий: призначення фізично не вміє читати вектор, тож масштабованість не має значення. Формат, що показується, б'є формат, що ні, завжди.

Одне, що треба зробити правильно: роздільність

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

Експортуйте логотип як PNG 100x100, а тоді покажіть його на 300 пікселях на щільному екрані — і він матиме м'який, зубчастий вигляд. Пікселів, щоб заповнити цей простір, не існує. Ліки прості: експортуйте в розмірі, який реально використаєте, або більшому, особливо для дисплеїв Retina й 4K, де часто потрібен подвійний від номінального розмір. Це єдина справжня перевага, якою ви жертвуєте, лишаючи вектор, тож приділіть хвилину, щоб правильно взяти цільову роздільність.

Коли растеризувати НЕ треба

Якщо призначення вміє читати SVG, лишайте SVG. Крапка.

На вашому власному сайті іконка чи логотип мають лишатися вектором. Вони будуть чіткі на кожному екрані за будь-якого масштабу, будуть меншими за рівнозначний PNG, і вам ніколи не доведеться переекспортовувати більшу версію, коли вийде новий щільніший дисплей. Растеризувати їх там — суцільний мінус: ви викидали б найкращу рису формату заради сумісності, яку вже маєте.

І не растеризуйте свій майстер. SVG — джерело істини; він може згенерувати PNG будь-якого розміру, будь-коли. PNG не може піти у зворотний бік — ви не відновите чисті векторні контури із сітки пікселів. Тож зберігайте SVG і сприймайте кожен PNG як одноразовий експорт для одного конкретного місця. Той самий принцип, що й у всьому іншому: конвертуй копію, яку відправляєш, зберігай оригінал, який редагуєш.

Як я роблю це насправді

Коли мені потрібні пікселі з вектора, я беру конвертер SVG у PNG тут. Він рендерить SVG у вашому браузері й віддає вам PNG, тож нічого нікуди не завантажується — усе відбувається на вашій машині. Виберіть розмір, що підходить під місце призначення, отримайте чистий PNG із цілою прозорістю.

Але справжнє вміння не в конвертації. Воно в питанні, яке ви ставите першим: чи це місце читає вектор? Якщо так, лишіть SVG у спокої й тіштеся найгострішим і найменшим варіантом, який тільки є. Якщо ні — пошта, OG-картка, якийсь упертий старий застосунок — тоді растеризуйте, у правильному розмірі, і бережіть SVG на наступний раз. Візьміть це рішення правильно — і у вас більше ніколи не буде порожньої рамки там, де мав бути логотип.