Оптимизатор SVG
Перетащите файлы сюда или нажмите, чтобы выбрать
- Безопасно
- Обработка выполняется на вашем устройстве, поэтому ввод/вывод никуда не отправляется.
Объяснение
Анализирует структуру SVG и удаляет лишнюю разметку, если это не влияет на отображение. Разворачивает стили, оптимизирует размеры, сокращает атрибуты и упрощает числовые данные и контуры, эффективно уменьшая файл при сохранении визуального качества.
Что делает оптимизация
| Стили | CSS из <style> по возможности переносится в атрибуты style отдельных элементов. Затем он может быть преобразован в атрибуты представления, такие как fill и stroke. Пустые и ненужные элементы <style> удаляются. |
|---|---|
| Размеры | Удаляет объявления width и height из style, а также атрибуты width и height корневого элемента <svg>. Необходимый для адаптивного отображения viewBox сохраняется. |
| Атрибуты | Удаляет лишние атрибуты, добавленные такими инструментами дизайна, как Figma, Adobe XD и Illustrator, например data-name. Атрибуты id и class также могут быть удалены, если на них нет ссылок или они стали ненужными после объединения либо преобразования элементов, например <line> в <path>. |
| Ссылки | Проверяет ссылочные атрибуты, такие как filter, clip-path и mask, и удаляет их, если указанная цель не существует. Корректные ссылки, влияющие на внешний вид, сохраняются. |
| Числа и контуры | Сравнивает результат отображения при разных значениях точности округления (floatPrecision) и автоматически выбирает самый компактный вариант с минимальными визуальными отличиями. Также упрощает данные контуров, например атрибут d элемента <path>, удаляет лишние пробелы и повторения и применяет multipass для многократной оптимизации и максимального уменьшения размера. |
| Совместимость | Чтобы избежать ошибок отображения, viewBox сохраняется. Если SVG содержит элементы <text>, также сохраняется xml:space, управляющий пробелами; при отсутствии <text> он может быть удалён. Для SVG с анимацией некоторые оптимизации отключаются из соображений безопасности. Сложный CSS, который трудно встроить, тоже может быть сохранён, чтобы не изменить исходный вид. |
Примечания
Степень уменьшения и итоговый результат зависят от структуры и разметки SVG. Стили, которые трудно автоматически развернуть или встроить, например сложные селекторы или медиазапросы, могут быть сохранены ради корректного отображения.
При объединении или преобразовании элементов, например <line> в <path>, атрибуты id и class исходных элементов могут быть удалены, если после изменения структуры они больше не нужны.
Ссылочные атрибуты, такие как filter, clip-path и mask, автоматически удаляются, если их цель не существует, например при неработающей ссылке url(#...), чтобы сохранить согласованность SVG.
SVG с анимацией, например CSS-анимациями или тегами <animate>, можно оптимизировать, но часть операций отключается, поскольку поведение анимации легко нарушить. Если SVG содержит скрипты (JS), оптимизация может привести к неожиданному поведению.