SVG-файлы меньше, а выглядят точно так же
SVG, экспортированные из Illustrator, Figma, Inkscape или Sketch, несут много лишнего веса, который браузер никогда не рисует: метаданные редактора, комментарии, скрытые слои, числа с восемью знаками после запятой, группы внутри групп. Этот оптимизатор запускает SVGO — стандартный инструмент оптимизации SVG — прямо в вашем браузере, чтобы всё это убрать, и показывает результат рядом с оригиналом, чтобы вы видели: изменился только размер.
Как оптимизировать SVG
- 1Перетащите один или несколько SVG-файлов, выберите их или вставьте SVG-разметку.
- 2Проверьте превью до и после, а также сэкономленный размер для каждого файла.
- 3Уменьшите Точность, чтобы файлы стали меньше; увеличьте её, если кривые начинают выглядеть неправильно.
- 4Включайте и отключайте отдельные плагины SVGO — например, удалите width и height, чтобы SVG масштабировался через CSS.
- 5Скачайте оптимизированный SVG, скопируйте разметку или скачайте все файлы сразу в ZIP.
Что удаляется
- Данные редактора
- Метаданные, комментарии, XML-декларация и doctype, а также пространства имён и атрибуты, которые Inkscape, Illustrator и Sketch добавляют для себя.
- Избыточная разметка
- Пустые группы и атрибуты, значения по умолчанию, скрытые элементы, неиспользуемые определения и ID, а также группы, обёрнутые вокруг единственного элемента.
- Многословная геометрия
- Данные путей переписываются относительными командами и с меньшим числом цифр, фигуры превращаются в более короткие пути, а трансформации по возможности встраиваются в координаты.
Безопасные настройки по умолчанию и более сильные опции
Набор по умолчанию — это собственный пресет SVGO, подобранный так, чтобы изображение не менялось. Дополнительные опции идут дальше, но меняют не только размер: без width и height SVG заполняет свой контейнер, без заголовка его название скрыто от экранных дикторов, а удаление xmlns подходит только для SVG, вставленного прямо в HTML.
Чтобы сначала превратить растровое изображение в SVG, используйте конвертер изображений — он может отправить SVG прямо сюда; чтобы встроить результат, используйте изображение в Base64.
Часто задаваемые вопросы
- Это то же самое, что SVGO или SVGOMG?
- Здесь работает сам SVGO — тот же движок, что использует SVGOMG, — с его пресетом по умолчанию и теми же плагинами в виде переключателей. Всё работает в вашем браузере.
- Изменит ли оптимизация внешний вид моего SVG?
- С настройками по умолчанию — нет. Очень низкая точность может исказить тонкие кривые, а некоторые дополнительные опции меняют размеры или доступность — превью до и после сразу показывает разницу.
- Можно ли оптимизировать несколько SVG-файлов сразу?
- Да. Перетащите сколько угодно файлов, измените настройки один раз для всех и скачайте их вместе в ZIP.
- Зачем показывается размер с gzip?
- Веб-серверы обычно отдают SVG в сжатом gzip виде, так что это ближе к тому, что посетители скачивают на самом деле.
- Мои файлы загружаются на сервер?
- Нет. SVGO работает в вашем браузере, и файлы никогда не покидают ваше устройство.