У цій статті
Що таке оптимізація SVG?
SVG (Scalable Vector Graphics) — це формат на основі XML для опису двовимірної векторної графіки. Хоча SVG не залежить від роздільної здатності та ідеально масштабується до будь-якого розміру, файли, експортовані з інструментів дизайну, таких як Figma, Illustrator або Inkscape, часто містять непотрібні метадані, коментарі, приховані елементи та надлишкову розмітку, що значно збільшує розмір файлу без впливу на візуальний результат.
Оптимізація SVG — це процес зменшення розміру файлу шляхом видалення надлишкових даних та спрощення розмітки SVG зі збереженням візуальної точності. Добре оптимізований SVG може бути на 30-80% меншим за свій неоптимізований аналог, що призводить до швидшого завантаження сторінок, зменшення використання пропускної здатності та кращих показників Core Web Vitals.
Як працює оптимізація SVG
Сучасні оптимізатори SVG, такі як SVGO, аналізують структуру документа SVG та застосовують серію трансформацій для зменшення розміру файлу без зміни відтвореного результату.
- Видалення метаданих — видаляє метадані редактора, XML-коментарі, приховані елементи, порожні групи та невикористані визначення, які вбудовують інструменти дизайну, але ігнорують браузери
- Оптимізація шляхів — спрощує дані шляхів зменшенням десяткової точності, перетворенням абсолютних координат у відносні та об'єднанням суміжних сегментів шляху де це можливо
- Очищення атрибутів — видаляє значення атрибутів за замовчуванням, скорочує значення кольорів (наприклад, #ffffff до #fff), згортає надлишкові трансформації та вбудовує невеликі блоки стилів
Спробуйте безкоштовно — реєстрація не потрібна
Оптимізувати SVG →Коли оптимізувати SVG
Оптимізація SVG цінна скрізь, де векторна графіка використовується в вебі, особливо коли важливі продуктивність та швидкість завантаження.
- Веб-продуктивність — оптимізовані SVG завантажуються швидше та зменшують загальну вагу сторінки, безпосередньо покращуючи Largest Contentful Paint (LCP) та загальні Core Web Vitals
- Системи іконок — бібліотеки іконок з десятками або сотнями SVG значно виграють від оптимізації, оскільки сукупна економія на багатьох малих файлах швидко накопичується
- Підготовка анімації — чиста, мінімальна розмітка SVG легше анімується за допомогою CSS або JavaScript та створює плавніші анімації з меншою складністю DOM
Поширені запитання
Оптимізація SVG з втратами чи без?
Більшість оптимізацій SVG фактично без втрат — візуальний результат залишається ідентичним. Деякі операції, як-от зменшення десяткової точності в даних шляху, технічно є з втратами на субпіксельному рівні, але різниця непомітна для людського ока. Ви можете контролювати рівень точності для балансу між зменшенням розміру та математичною точністю.
Коли не слід оптимізувати SVG?
Уникайте оптимізації, якщо SVG використовує функції, які оптимізатори можуть некоректно змінити, такі як складні фільтри, анімації, що залежать від конкретних ідентифікаторів елементів, або SVG, на які посилається зовнішній CSS або JavaScript. Завжди порівнюйте оптимізований результат візуально перед використанням у продакшені.
Як продуктивність SVG порівнюється з PNG?
SVG зазвичай менші за PNG для простої графіки, як-от іконки, логотипи та ілюстрації, особливо при високій роздільній здатності. Один SVG замінює кілька розмірів PNG, необхідних для різних щільностей екрану. Однак для складних фотографічних зображень або дуже детальних ілюстрацій з тисячами шляхів растрові формати, такі як WebP або AVIF, можуть бути ефективнішими.