Как я уменьшил SVG в 3 раза: рабочий пайплайн

Откуда берётся лишний вес

В Illustrator часто остаётся много «мусора»:

• пустые группы и слои;
• скрытые объекты;
• лишние артборды;
• неиспользуемые стили и эффекты;
• длинные ID и классы, которые не нужны в вебе.

Это всё увеличивает размер файла и усложняет анимацию.

Мой пайплайн: от Illustrator до Joomla

1. Подготовка в Illustrator. Убираю всё лишнее, объединяю контуры, где можно. Если текст нужен как текст (для SEO) — оставляю как <text>. Если важна типографика и анимация — делаю Type → Create Outlines.
2. Экспорт. Сохраняю как SVG, в настройках убираю лишние опции (например, «Preserve Illustrator Editing Capabilities»).
3. Очистка. Прогоняю через SVGO (CLI или онлайн). Это убирает пустые группы, лишние атрибуты, оптимизирует пути.
4. Проверка viewBox. Смотрю, чтобы viewBox был компактным и точно соответствовал содержимому. Лишний «воздух» вокруг иконки — это лишние отступы и проблемы с позиционированием в CSS.
5. Адаптация под анимацию. Если планирую анимировать отдельные части, даю им понятные классы и убеждаюсь, что структура SVG простая: минимум вложенности, понятные группы.

Пример: логотип для фавикона

Допустим, у тебя есть логотип в Illustrator на большом артборде. Делаешь:

1. Выделяешь содержимое.
2. Object → Artboards → Fit to Artwork Bounds.
3. Экспортируешь SVG.
4. Прогоняешь через SVGO.
5. Проверяешь в браузере: нет ли лишних отступов, корректно ли масштабируется.

Результат: файл становится легче, а анимация работает предсказуемо.

Что это даёт на практике

• Скорость загрузки. Меньше байт — быстрее отрисовка.
• Чистота кода. Проще поддерживать и анимировать.
• Совместимость с Joomla. Оптимизированный SVG легко вставить в HTML‑модуль или в материал.

А как ты оптимизируешь SVG? Напиши в комментариях свой любимый инструмент или лайфхак — соберём подборку