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

Об этом инструменте

Файлы SVG (Scalable Vector Graphics) описывают фигуры, пути и текст с помощью XML-разметки. Инструменты дизайна, экспорты CMS и вручную написанные иконки часто содержат гораздо больше данных, чем нужно браузеру для отображения того же изображения. Оптимизация SVG — это удаление лишней разметки — комментариев, метаданных редактора, избыточных групп, ненужной точности координат и неиспользуемых атрибутов — при сохранении идентичного визуального результата в обычных размерах. В отличие от растровых форматов PNG или JPEG, SVG остаётся редактируемым и независимым от разрешения после сжатия. Хорошо оптимизированная иконка может уменьшиться с 40 KB до 6 KB без потери видимых пикселей. Оптимизация необходима для логотипов, иконок интерфейса, иллюстраций и favicon, загружаемых при каждом просмотре страницы. Меньшие файлы означают более быструю загрузку страниц, меньший трафик в мобильных сетях и лучшие показатели Core Web Vitals. Поисковые системы поощряют быстрые страницы; пользователи замечают, когда иконки появляются с задержкой или блокируют рендеринг. Оптимизированные SVG чище встраиваются в HTML, React-компоненты и email-шаблоны, где раздутная разметка может ломать парсеры или увеличивать bundle. Продакшн-сайты ссылаются на SVG-иконки в CSS-фонах, inline-тегах <svg> или элементах img. Каждый килобайт вносит вклад в критический путь рендеринга, особенно когда несколько иконок above the fold. Удаление пробелов, свёртывание transform и удаление doctype уменьшает объём передачи без изменения CSS или JavaScript. При SVG favicon с link rel="icon" type="image/svg+xml" браузеры агрессивно кэшируют — компактный файл быстрее обновляется при ребрендинге. React-проекты часто импортируют SVG как компоненты или URL. Раздутые исходники увеличивают время parse JavaScript bundle, когда loaders встраивают их как строки. Перед добавлением иконки в библиотеку компонентов прогоните её через оптимизатор, чтобы tree-shaking и code splitting оставались эффективными. Вставляя оптимизированную разметку в .svg или SVGR pipeline, убедитесь, что viewBox сохранён — React-приложения полагаются на viewBox для адаптивного масштабирования. Современные браузеры поддерживают SVG favicon, связанные из head документа. Они чётко масштабируются на Retina-вкладках и закреплённых ярлыках, если файл мал и валиден. SVG favicon должны быть квадратными, с простой палитрой, без внешних ссылок и скриптов из соображений безопасности. После оптимизации конвертируйте в ICO или PNG для старых оболочек Windows или социальных краулеров, ожидающих растр. Оптимизированный SVG favicon — отличный master-файл для всего workflow пакета favicon. Дизайнеры часто экспортируют SVG со встроенными растровыми изображениями, избыточной десятичной точностью путей, дублирующимися перекрывающимися фигурами и блоками style вместо атрибутов. Illustrator иногда добавляет именованные слои как group-элементы; экспорты Figma включают xmlns и дробные координаты с шестью знаками. Забытые width и height без viewBox ломают адаптивную вёрстку. Скрытые слои и активные clipping masks экспортируют невидимую геометрию, увеличивающую размер файла. В Figma используйте Copy as SVG или экспорт с Outline stroke, когда иконки используют обводки, плохо конвертирующиеся. Файлы Figma часто содержат fill-rule и матрицы transform на каждой группе; оптимизация объединяет соседние пути, где это безопасно. В Illustrator выберите SVG export с Minify или Responsive, отключите лишнее встраивание шрифтов и разверните appearance перед экспортом. После экспорта вставьте разметку в этот браузерный оптимизатор. Обработка выполняется локально — ваши брендовые ресурсы никогда не загружаются на сервер. Скачайте очищенный файл или скопируйте результат в репозиторий, CMS или pipeline генератора favicon. Сочетайте результат с нашим конвертером SVG в ICO, SVG в PNG или генератором Favicon, когда нужны пакеты нескольких размеров для продакшн-запуска.

Частые вопросы