Как пользоваться: SVG Оптимизатор
- Вставьте разметку SVG или откройте файл
.svg. - Оставьте настройки по умолчанию для наилучшего сжатия или уменьшите точность, чтобы получить еще меньшие пути.
- Сравните исходный и оптимизированный предпросмотр, чтобы убедиться, что ничего не сместилось.
- Скопируйте оптимизированную разметку или скачайте файл
.svg.
Зачем оптимизировать SVG-файлы?
SVG, экспортированные из дизайн-инструментов, содержат много лишнего: метаданные редактора, комментарии, скрытые слои, значения атрибутов по умолчанию, пустые группы и координаты с шестью знаками после запятой. Ничто из этого не влияет на внешний вид изображения, но файл может быть в два–пять раз больше, чем нужно. Встроенные SVG-иконки повторяют этот «балласт» на каждой странице.
Что делает SVGO
SVGO — стандартный оптимизатор SVG, который используют большинство инструментов сборки. Он запускает набор безопасных плагинов:
- Удаляет XML-декларацию, комментарии,
<metadata>, пространства имен редакторов (Illustrator, Inkscape, Sketch) и скрытые элементы. - Убирает бесполезные группы, по возможности объединяет пути и преобразует фигуры в более короткие данные путей.
- Округляет числа до выбранной точности и записывает команды путей в самой короткой форме.
- Минифицирует встроенные стили и цвета (
#FFFFFF→#fff) и удаляет значения по умолчанию. - Сокращает ID и удаляет те, на которые ничего не ссылается.
Этот инструмент всегда сохраняет viewBox, без которого SVG не будет корректно масштабироваться.
Выбор точности
| Точность | Подходит для |
|---|---|
| 1 | Простые иконки, нарисованные по пиксельной сетке |
| 2–3 | Большинства иконок, логотипов и иллюстраций (по умолчанию 3) |
| 4–5 | Детальных иллюстраций, карт и диаграмм с тонкими кривыми |
Меньшая точность означает меньше знаков и меньший размер файла, но кривые могут немного сместиться. Для этого и нужен предпросмотр.
Ширина, высота и viewBox
Удаление width и height позволяет SVG растягиваться под контейнер с помощью CSS. Обычно это нужно для иконок и встроенного SVG. Оставьте эти атрибуты, если SVG используется в <img> без явно заданных размеров.
Что дальше: превратите оптимизированный SVG в CSS-фон, компонент React или элемент Webflow.
Также ищут как: svgo онлайн.
Инструменты, которые хорошо сочетаются с SVG Оптимизатор
- Масштабирование SVG viewBox — Приведите иконки к новому viewBox (например, 24×24), пересчитав реальные координаты внутри каждого path, circle, rect и polygon — без хаков вида transform="scale()".
- Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.
- Gzip сжатие и распаковка — Сжимайте текст или любой файл алгоритмами gzip, zlib или raw deflate, либо вставьте Base64 или откройте файл .gz, чтобы распаковать его.
- Brotli онлайн: сжатие и распаковка — Сжимайте текст или файлы в формате Brotli с уровнем качества от 0 до 11, распаковывайте данные .br и сравнивайте результат с gzip — всё локально в вашем браузере.