Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Лого в SVG - не найкраща ідея


Чому не варто використовувати SVG для логотипа?
– Логотип у SVG може мати величезний розмір файлу, якщо він складний і деталізований. Це не стиснутий векторний формат, і передача через мережу лого в SVG стає катастрофою.

– Core Web Vitals (LCP) враховує перше зображення, яке завантажується на сторінці. У більшості випадків це саме логотип. Коли він у SVG та має надмірну вагу, браузер довго завантажує його (особливо на 3G). Весь цей час рендеринг блоку LCP чекає → падають показники, сайт виглядає «гальмівним». В Аналітику Google йдуть помилки

– Масштабування SVG у різних браузерах не завжди коректне. Один і той самий файл може відображатися по-різному.
Є реальні кейси: коли лого у favicon засунули SVG-лого вагою 5 Мб. При масштабуванні браузер настільки навантажував процесор, що кулер починав ревіти, робота у браузері ставала неможливою, а потім він взагалі падав... це особливість роботи браузерів з SVG
 

Який висновок?
– Для логотипів краще використовувати легкі формати (JPG, на крайній випадок PNG), які потім можуть бути стиснуті модулем Jet Cache у WEBP.
Тоді розмір буде малий і не перешкоджати рендерінгу блока LCP
SVG може залишатися як додатковий варіант для векторної чіткості, але тільки після ретельної оптимізації (мінімум коду, стиснення, відсутність зайвих шарів) і дуже простих схематичних зображень


Comments

Лого в SVG - це єдина ідея.
З усією повагою - в статті не згадано переваг SVG.

Не зрозуміло про яку надмірну вагу йде мова. Мій логотип важить 4 кб. Якщо зробити в JPG або PNG з таким розміром, щоб хоч трохи нагадувало SVG, це буде 20-30 кб.

Але якщо у людини немає розуміння і забувати його немає бажання, то вона з будь чого може зробити "5 Мб".

Орієнтуйтесь на лідерів ринку. Всі вже давно перейшли на SVG

Поділитися коментарем


Надіслати
В 06.11.2025 в 17:37, Siberex сказав:

Орієнтуйтесь на лідерів ринку. Всі вже давно перейшли на SVG

"Лідери ринку" )))) Це не завжди еталон якості. Часто рішення там робили люди без глибокого розуміння продуктивності (цитата Едгара внизу)
Так, ваші 4 кб особливої різниці не дадуть, але вже 20-40 кб починають впливати на оцінку. А люди начитавшись і не розуміючи як це все працює роблять SVG і набагато більше

Схоже, ви недооцінюєте, як браузер рендерить блоки. Якщо теми рендерингу незнайомі, краще не робити категоричних висновків.
Якщо з 4 кб SVG не виходить отримати 1-2 кб з порівнянною якістю (для маленького блоку на кшталт лого), то навіть якщо ви відмалюєте його піксельно за трафаретом SVG і стиснете, результат усе одно буде меншим, бо блок лого малий - тож продовжувати дискусію складно

Ви, ймовірно, пропустили деталь: у SVG є особливості з масштабуванням і рендерингом. Це принципово інший підхід. SVG - вектор, JPG/PNG/WebP - растрові формати. Щоб відрендерити вектор, браузеру треба прорахувати геометрію та пікселі; у растрових зображень цього етапу немає.

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

Не варто орієнтуватися лише на більшість. Як казав Едгар Алан По: "Думка більшості помилкова - бо більшість людей, ідіоти"
Я часто бачу у "лідерів" "компроміси", особливо в оптимізації під PageSpeed. Подивіться на їхні реальні оцінки - вони добре все показують.
Де там SVG.. так.. а ось знайшов - розетка (думає не будите проти цього прикладу). Лого малий в SVG, хоч це добре вже - оптимізували його. Дивимося далі. Упс .. що там в нас з LCP. Проблема - Не пройдено

Печаль в усьому до речі.

7526197400.png
https://pagespeed.web.dev/analysis/https-build-rozetka-com-ua-ua-436650578-p436650578/qp1njrc87d?form_factor=mobile

 

Бо їм по великому рахунку плювати - в них реклама та маркетинг, їх знають вже.

Поділитися коментарем


Надіслати
Гість
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.