Твой SVG в 10 раз больше, чем должен быть
Как инструменты дизайна раздувают SVG-файлы и что с этим делать.
Экспортируй иконку из Illustrator. Проверь размер файла. Открой его в текстовом редакторе.
Ты найдёшь: метаданные, которые никому не нужны, десятичные точки до 15 знаков, пустые группы, мусор, специфичный для редактора, и комментарии из 2019 года. Простой логотип весит 50KB, когда мог бы быть 3KB.
SVG — это просто XML. Каждый ненужный символ — это байты, которые загружают твои пользователи.
Что добавляют инструменты дизайна
Illustrator, Figma, Sketch — все они встраивают дополнительные данные:
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100"
style="enable-background:new 0 0 100 100;" xml:space="preserve">
Ничего из этого не нужно для рендеринга. Это метаданные для инструмента дизайна, чтобы правильно переоткрыть файл.
Проблема точности
Инструменты дизайна используют высокоточные координаты:
<path d="M12.374892749237,45.293847293847 L67.293847293847,89.374892749237"/>
Браузеры округляют примерно до 1-2 десятичных знаков в любом случае. Все эти цифры — потраченные байты.
Лучше:
<path d="M12.37,45.29 L67.29,89.37"/>
Тот же визуальный результат, доля размера.
Пустые группы и ID
Экспорт часто создаёт структуры типа:
<g id="Layer_1">
<g id="icon">
<g>
<path d="..."/>
</g>
</g>
</g>
Три вложенные группы для удержания одного пути. Каждая группа добавляет байты. Удаляй их, если они не делают что-то (например, применяют трансформации или стили).
ID аналогичны. id="XMLID_847_" на каждом элементе накапливается. Храни ID, на которые ссылаешься в CSS или JavaScript. Удаляй остальные.
Что оптимизировать
Удаляй метаданные. Комментарии, информация редактора, пространства имён, которые ты не используешь.
Уменьшай точность. 2-3 десятичных знака обычно достаточно.
Сплющивай группы. Ненужная вложенность не служит цели.
Очищай ID. Храни те, на которые ссылаешься, удаляй автогенерированный мусор.
Объединяй пути. Несколько путей, которые могли бы быть одним, должны быть объединены.
Удаляй скрытые элементы. Слои, которые ты скрыл в инструменте дизайна, но не удалил.
Когда сохранять размер файла
Иногда больше правильно:
Анимации. ID и группы часто служат целями анимации. Не удаляй их слепо.
CSS-стилизация. Если ты стилизуешь SVG внешним CSS, тебе нужны эти ID и классы.
Будущее редактирование. Ультраоптимизированный SVG сложно редактировать. Храни исходный файл, оптимизируй продакшн-версию.
Сравнение
Простая иконка, до оптимизации:
Оригинал: 24KB
После удаления метаданных: 8KB
После уменьшения точности: 4KB
После очистки структуры: 2KB
Это в 12 раз меньше. Загружается быстрее. Парсится быстрее. Каждая загрузка страницы, каждый пользователь.
Встроенный vs внешний
Маленькие SVG (менее 1KB оптимизированные) часто лучше работают встроенными прямо в HTML. Без дополнительного HTTP-запроса.
Большие SVG или переиспользуемые иконки лучше работают как внешние файлы, которые могут кэшироваться.
Точка безубыточности зависит от твоей ситуации. В целом: если ты используешь SVG один раз и он крошечный, встрой его. Если ты используешь его повторно или он сложный, внешний файл.
Оптимизация SVG — это бесплатная производительность. Прогони свои иконки через оптимизатор перед отправкой. Занимает секунды, экономит байты на каждой загрузке страницы, навсегда.