Оптимизатор SVG

Что такое Оптимизатор SVG?

Оптимизатор SVG — это бесплатный браузерный инструмент для веб-дизайнеров, авторов иконок и фронтенд-разработчиков, которым нужно облегчить рукописный или экспортированный SVG перед публикацией. Векторные редакторы добавляют невидимый вес: XML-комментарии, блоки метаданных, атрибуты Inkscape/Sodipodi/Illustrator, лишние десятичные, бесполезные трансформации, обёрточные группы, а также ID и defs, на которые ничто не ссылается. Включайте каждую очистку в Настройках, вставьте разметку или перетащите файл .svg, наблюдайте, как рендеры Оригинал и Оптимизировано обновляются рядом, и читайте статистику До, После, Сэкономлено, Gzip и Brotli. Скопируйте результат или скачайте как .min.svg. Используйте для облегчения инлайновых иконок, спрайтов, логотипов и иллюстраций.

Как пользоваться Оптимизатор SVG

1. Вставьте свой SVG или перетащите/загрузите файл .svg — разметка заполнит поле ввода.
2. Откройте Настройки и включите именно нужные очистки: округление координат, удаление комментариев, метаданных и атрибутов редактора, пустых групп, неиспользуемых ID и defs, объединение трансформаций, минификация инлайновых стилей, сокращение hex-цветов, удаление значений по умолчанию и минификация пробелов.
3. Если округление координат включено, задайте точность (0-5 знаков).
4. Сравните рендеры Оригинал и Оптимизировано рядом, чтобы убедиться, что рисунок в порядке.
5. Прочитайте статистику До, После, Сэкономлено, Gzip и Brotli, чтобы увидеть реальную экономию размера.
6. Скопируйте оптимизированный SVG или скачайте его как файл .min.svg.

Примеры

<svg xmlns="http://www.w3.org/2000/svg"><!-- Generator: Sketch --><title>icon</title><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1.00000 2.49999 L10.333333 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 2.5 L10.33 8"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#FFFFFF" fill-opacity="1" width="24" height="24"/></svg>

<svg xmlns="http://www.w3.org/2000/svg"><rect fill="#fff" width="24" height="24"/></svg>

Часто задаваемые вопросы

Что именно удаляет оптимизатор?

При включённых соответствующих переключателях: XML-комментарии, элементы <metadata>, <title> и <desc>, атрибуты пространств имён редактора (Inkscape, Sodipodi, Illustrator), пустые группы, ID, на которые ничто не ссылается, и <defs> без ссылок. Он также может округлять числовые атрибуты и данные пути, объединять бесполезные трансформации, минифицировать атрибуты style и CSS в <style>, сокращать hex-цвета (#ffffff→#fff) и удалять стандартные атрибуты представления, такие как fill-opacity="1".

Изменит ли округление координат вид моего SVG?

Округление до низкой точности может сдвинуть точки на крошечную долю единицы — обычно незаметно, но файл меньше. Повысьте точность (до 5 знаков) для точной геометрии или отключите округление, чтобы не трогать числа.

Могу ли я загрузить файл и посмотреть результат?

Да. Перетащите или загрузите файл .svg (или вставьте разметку), и рендеры Оригинал и Оптимизировано появятся рядом, чтобы вы заметили любые поломки. Затем скопируйте вывод или скачайте оптимизированный .min.svg — ничего не загружается; файл читается локально.

Что означают цифры Gzip и Brotli?

Размер Gzip измеряется путём реального сжатия оптимизированного SVG в вашем браузере, поэтому отражает реальные байты по соединению с gzip. Цифра Brotli — это оценка, выведенная из этого размера gzip (brotli обычно сжимает текст немного сильнее); настоящий brotli-кодировщик слишком тяжёл для включения, поэтому он помечен тильдой.

Загружается ли мой SVG куда-либо?

Нет. Разбор, очистка, измерение размера и сериализация происходят локально в вашем браузере с помощью встроенного DOMParser. Ничего не отправляется на сервер, поэтому инструмент работает офлайн, а ваша графика остаётся приватной.