SVG-файл завеликий? 8 порад зі стисканням та оптимізацією

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

1. На рівні шляху: менше anchor-точок, об’єднані шляхи

Порада 1: Зменшіть кількість anchor-точок (спростіть шляхи)

Чим більше anchor-точок має шлях, тим більший файл і тим повільніше рендеринг. Під час конвертації підніміть згладжування, щоб відрізати anchor-точки ще на джерелі. Для наявного SVG скористайтеся Object → Path → Simplify в Illustrator або Path → Simplify (Ctrl+L) в Inkscape, щоб прибрати зайві anchor-точки. Налаштування згладжування та кількості кольорів у конвертері PolySVG дозволяє в реальному часі зважувати якість проти розміру файлу.

Порада 2: Об’єднайте шляхи та шари

Об’єднайте кілька шляхів з однаковою заливкою в один, щоб прибрати повторювані атрибути, вирівняйте зайву вкладеність груп і видаліть приховані шари та порожні елементи. У графічній програмі скористайтеся операцією unite інструмента pathfinder або об’єднайте шари перед експортом.

2. Усередині файлу: приберіть метадані та зменшіть точність

Порада 3: Видаліть метадані редактора

SVG, експортовані з Illustrator або Inkscape, часто містять namespace-и редактора, <metadata>, коментарі та параметри експорту, які не впливають на рендеринг, тож їх можна видалити вручну або очистити автоматично через SVGO. Натомість збережіть <title> і <desc> — вони допомагають доступності.

Порада 4: Зменшіть десяткову точність

Координати шляхів часто мають шість-вісім десяткових знаків, тоді як рендеринг на екрані потребує одного-двох. Якщо задати floatPrecision рівний 1 або 2 у конфігурації SVGO, файл помітно меншає без видимої різниці. Для дуже малих піктограм будьте обережні, щоб не надто стиснути координати, бо форма спотвориться.

3. Автоматизація: одна команда з SVGO

Порада 5: Оптимізуйте автоматично з SVGO

SVGO — це де-факто стандартний інструмент оптимізації SVG, що постачається з десятками модулів: видалення коментарів і метаданих, об’єднання шляхів, оптимізація команд шляху та очищення чисел. Базове використання:

npx svgo input.svg -o output.svg

Типові файли меншають на 30–70%. Два застереження: не видаляйте атрибут viewBox, бо масштабування зламається; і для піктограм, які хочете перефарбовувати через CSS, залиште fill успадкованим, а не вписуйте колір у код.

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

4. Структура та повторне використання: symbol-и та кольорові шари

Порада 6: Повторно використовуйте форми через defs і use

Якщо та сама піктограма з’являється на сторінці кілька разів, визначіть її один раз у <defs> і посилайтеся через <use> або зберіть SVG-аркуш спрайтів — розмір файлу й кількість запитів зменшаться одночасно.

Порада 7: Контролюйте кольорові шари та уникайте вбудованих растрів

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

5. Передавання: стискання трафіку та кеш

Порада 8: Увімкніть gzip/Brotli і кеш

SVG — це текст, тому ввімкнення gzip або Brotli на сервері зазвичай зменшує обсяг передавання ще на 60–80%; статичним SVG-файлам задайте тривалі заголовки кешу. Дуже малі піктограми можна вбудувати просто в HTML, що повністю економить один запит. Принципи, що стоять за цим, розкриває посібник «Переваги SVG»; а щоб контролювати розмір на етапі конвертації, прочитайте посібник «Способи перетворити зображення на SVG».

Порядок має значення: контролюйте anchor-точки та кольорові шари на джерелі, чистіть метадані й точність усередині файлу, потім запускайте SVGO і наприкінці вмикайте стискання трафіку. З усіма чотирма шарами SVG-файли зазвичай меншають на порядок.