Оптимизация SVG: меньше вес, меньше DOM, быстрее рендер
Практическая оптимизация SVG: чистка через SVGO, упрощение path, повторное использование symbol и use и сокращение DOM.
Джоан Леон разобрал, как правильно оптимизировать SVG на практике — от базовой чистки файла до оптимизации повторяющихся иконок. Статья хороша тем, что показывает не только инструменты, но и где именно теряется производительность.
Вот несколько полезных инсайтов 👇
⚙️ Начните с чистки SVG
Экспорт из Figma/Illustrator почти всегда содержит мусор: metadata, комментарии, лишние g, inline-стили и т.д.
Инструменты вроде SVGO удаляют это автоматически и часто уменьшают файл на 30–70%.
🧹 Упростите path
Дизайнерские тулзы генерируют слишком сложные path.
Иногда один и тот же shape можно описать гораздо проще — это уменьшает размер SVG и ускоряет парсинг.
📦 Используйте SVG symbols для повторяющихся иконок
Если одна и та же иконка вставлена на странице десятки раз, браузер создаёт отдельный DOM для каждой.
Лучше вынести её в <symbol> и переиспользовать через <use>:
<svg>
<use href="#icon-check"></use>
</svg>Это сильно сокращает DOM и экономит память.
🎨 Удаляйте inline-стили
Многие SVG приходят с кучей style="fill:#000" и подобного.
Чаще всего это лучше вынести в CSS — файл станет меньше и иконки будет проще переиспользовать.
🚫 Не злоупотребляйте SVG
Иногда обычный img или даже CSS-shape будет проще и быстрее. SVG хорош для иконок, иллюстраций и векторной графики, но не всегда лучший выбор.
💡 Главная мысль статьи:
SVG часто считают «бесплатным» форматом, но при большом количестве иконок он может заметно раздувать DOM и влиять на производительность.