SVG проти PNG для логотипів: який формат використати (і коли)

У чому різниця між SVG і PNG?

Різниця — вектор проти растру. SVG (Scalable Vector Graphics) описує логотип як форми — точки, криві та заливки — визначені математикою. Він перемальовується в тому розмірі, у якому з'являється, тож лишається різким усюди. Будучи кодом, він до того ж крихітний для чистої геометрії більшості логотипів, часто лише кілька кілобайтів.

PNG (Portable Network Graphics) — це растрове зображення: фіксована сітка пікселів із заданими шириною й висотою. Він підтримує прозорість, тож логотип чисто сидить на будь-якому кольорі — але показаний більшим, ніж експортовано, пікселі розтягуються, а краї пом'якшуються.

Коли слід використовувати SVG?

Зробіть SVG своїм майстер-файлом і форматом за замовчуванням для всього на екрані:

• Сайти й вебзастосунки — логотип у шапці, підвалі та hero. Сучасні браузери відмальовують SVG ідеально різко на кожному екрані, зокрема retina й 4K.
• Усюди, де логотип має масштабуватися — адаптивні макети й дисплеї з високою щільністю.
• Як єдине джерело, з якого ви експортуєте все інше.
• Фавікони, оскільки сучасні браузери приймають SVG-фавікон.

Коли слід використовувати PNG?

Використовуйте PNG, коли потрібен растр фіксованого розміру чи місце, що не візьме SVG:

• Зображення профілю та обкладинки в соцмережах — більшість платформ приймають лише растрові завантаження, тож експортуйте квадратний PNG у розмірі, який рекомендує кожна.
• Деякі поштові клієнти та інструменти для підписів, що ненадійно відмальовують SVG.
• Документи, презентації та маркетплейси, що беруть лише растрові зображення.
• Швидкі попередні перегляди й мініатюри.

SVG проти PNG з першого погляду

А що з EPS, PDF, AI — і JPG?

SVG і PNG покривають веб, але повний пакет логотипа зазвичай містить ще пару інших:

• PDF — векторний формат, який приймає майже кожна друкарня й офісний інструмент. Це найбезпечніший файл, щоб передати до друкарні.
• EPS — старіший векторний формат, який деякі друкарні досі просять. Ставтеся до нього як до експорту для сумісності з друком, а не як до чогось для щоденного вжитку.
• AI (Adobe Illustrator) — робочий/вихідний файл. Якщо ваш логотип робив дизайнер, тримайте AI (або SVG) в архіві як редаговний оригінал.
• JPG — уникайте його для логотипів. JPG не має прозорості, тож змушує фонову рамку навколо знака, а його стиснення втратне, що розмазує чіткі краї. Він створений для фото, а не для логотипів.

Чи можна перетворити PNG назад на SVG?

Не чисто. Перетворення PNG на SVG означає трасування пікселів у форми, що рідко збігається з оригіналом і часто дає заплутані контури. Якщо у вас є SVG, завжди починайте з нього. Якщо все, що ви маєте, — це PNG низької роздільності, зазвичай краще перебудувати знак як вектор, ніж автоматично його трасувати.

А що з фавіконами й іконками застосунків?

Фавікон — це просто дуже мала версія вашого логотипа, тож експортуйте його з SVG: SVG-фавікон для сучасних браузерів плюс малі PNG (наприклад, 32×32 і Apple touch icon 180×180) для широкої сумісності. Те саме правило стосується іконок застосунків — згенеруйте розміри, які просить кожна платформа, з векторного майстра. Див. як зробити фавікон з логотипа.

Коротка відповідь

Проєктуйте й зберігайте свій логотип як SVG, використовуйте його в вебі, експортуйте PNG для растрових розміщень фіксованого розміру, друкарням давайте PDF чи EPS, а JPG повністю оминайте. Тримайте векторний майстер — і зможете виготовити будь-який розмір чи формат згодом без утрати якості.

Створіть логотип і експортуйте SVG, PNG і фавікон

Поширені запитання

Чи SVG кращий за PNG для логотипів?

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

Чи втрачає SVG-логотип якість при масштабуванні?

Ні. SVG описує форми математикою, тож він чітко перемальовується в будь-якому розмірі — від фавікона до білборда — ніколи не стаючи розмитим чи пікселізованим.

Чому мій PNG-логотип виглядає розмитим?

PNG має фіксований піксельний розмір. Показ більшим, ніж експортовано, або на екрані з високою щільністю розтягує ці пікселі й пом'якшує краї. Експортуйте більший PNG або використайте SVG.

Чи використовувати JPG для логотипа?

Ні. JPG не має прозорості (тож додає фонову рамку) і є втратним, що розмазує чіткі краї знака. Використовуйте SVG чи PNG для логотипів, ніколи JPG.

Який формат дати друкарні?

Векторний файл — зазвичай PDF чи EPS, експортований з вашого логотипа — щоб друкарня могла чисто масштабувати його до будь-якого розміру. Тримайте SVG як майстер, з якого ви їх генеруєте.