Оптимизатор SVG (SVGO)
Оптимизируйте и минифицируйте код SVG с помощью SVGO в браузере. Удаляет метаданные редактора, комментарии и лишнюю разметку, показывает экономию и превью.
Используется стандартный пресет SVGO, который сохраняет viewBox, заголовки и описания для доступности.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Оптимизатор SVG?
Оптимизатор SVG запускает SVGO — стандартную библиотеку оптимизации SVG — над вашим кодом SVG. Он удаляет метаданные редактора, комментарии, скрытые и пустые элементы, сокращает данные путей, числа и цвета и объединяет то, что можно объединить. Вы получаете оптимизированный код, превью до и после и степень уменьшения размера.
Как пользоваться Оптимизатор SVG
- Вставьте код SVG в поле Код SVG либо перетащите или выберите файл
.svg. - Настройте параметры: Несколько проходов (меньше результат), Точность чисел (знаков после запятой), Сохранять ID (нужно, если на них ссылаются CSS или скрипты), Заменить width/height на viewBox (адаптивно), Форматировать результат.
- Сравните превью до и после и значок размера.
- Скопируйте оптимизированный SVG или скачайте его как
name-min.svg.
Пример
100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>
Когда использовать Оптимизатор SVG
Используйте для значков, логотипов и иллюстраций, экспортированных из Figma, Illustrator, Inkscape или Sketch, перед публикацией на сайте или в приложении. Включите сохранение ID, если от идентификаторов элементов зависят CSS, JavaScript или ссылки <use> в других местах. Всегда проверяйте превью: необычные SVG со скриптами или внешними ссылками могут потребовать ручной правки.
Как работает Оптимизатор SVG
Инструмент по требованию загружает браузерную сборку SVGO 4 и применяет плагины preset-default: удаление объявления XML, doctype, комментариев, метаданных и пространств имён редакторов, очистку атрибутов и числовых значений, преобразование фигур в контуры, схлопывание групп, переписывание данных путей и трансформаций и другое. Стандартный пресет SVGO 4 сохраняет viewBox, <title> и неслужебный <desc>, так что масштабирование и доступность сохраняются. При нескольких проходах плагины повторяются, пока результат не перестанет уменьшаться.
Распространенные Случаи Использования
- Уменьшить значки, экспортированные из дизайнерских инструментов, перед добавлением в библиотеку компонентов.
- Очистить логотип SVG, чтобы встроить его в HTML.
- Уменьшить SVG-спрайты для более быстрой загрузки страниц.
- Удалить метаданные редактора, раскрывающие пути к файлам или имена авторов.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Происходит ли оптимизация SVGO без потерь?
С пресетом по умолчанию — визуально без потерь почти всегда. Слишком сильное снижение точности чисел (0–1 знак после запятой) может сместить мелкие фигуры, поэтому сравнивайте превью.
Почему после оптимизации перестал работать мой CSS?
SVGO сокращает или удаляет неиспользуемые ID. Включите Сохранять ID (нужно, если на них ссылаются CSS или скрипты), если на них ссылаются ваши стили или скрипты.
Удаляет ли он viewBox?
Нет. Стандартный пресет SVGO 4 сохраняет viewBox. Необязательный пункт Заменить width/height на viewBox (адаптивно), наоборот, убирает фиксированный размер, делая SVG адаптивным.