Loading…

О сервисе Онлайн оптимизатор и минификатор SVG

Работаете с беспорядочными или слишком большими SVG файлами? Вставьте свой код или загрузите файл `.svg`, выберите **Форматировать** для украшения или **Минифицировать** для уменьшения размера, и мгновенно получите чистую, оптимизированную SVG разметку. Идеально для дизайнеров, фронтенд-разработчиков и всех, кому нужна быстрая, безопасная оптимизация векторной графики. 🚀

Ключевые возможности нашего форматировщика SVG

  • **Режим украшения** с умными отступами, переносом строк и выравниванием атрибутов
  • **Режим минификации** удаляет пробелы, комментарии и избыточные метаданные
  • Форматирование в стиле Prettier и оптимизация в стиле SVGO под капотом
  • Настраиваемый стиль отступов (пробелы или табы) и размер отступа
  • Опциональная ширина обёртки для поддержания порядка в длинных путях и атрибутах
  • Единообразный стиль конца строки (LF / CRLF) для чистых различий между ОС
  • Перетаскивание файлов `.svg` до 5 МБ или вставка разметки SVG
  • 100% обработка на стороне клиента — ваши изображения никогда не покидают браузер
  • Копирование одним кликом или скачивание форматированного (`.formatted.svg`) или минифицированного (`.min.svg`) результата
  • Адаптивный интерфейс, хорошо работающий на ноутбуках, ПК и планшетах

🔧 Как форматировать или минифицировать SVG: Краткое руководство for svg-formatter

1

1. Вставьте или загрузите SVG

📥 Перетащите файл `.svg` или вставьте исходную разметку SVG в редактор. Инструмент автоматически определяет стандартное содержимое `image/svg+xml`.

2

2. Выберите форматирование или минификацию

✨ Выберите **Форматирование** для удобочитаемой разметки (отлично подходит для проверок и контроля версий) или **Минификацию** для минимального размера файла.

3

3. Настройте параметры форматирования

⚙️ Настройте **Стиль отступа** (пробелы или табы), **Размер отступа** и опционально **Перенос / Длину строки**. Эти параметры напрямую соответствуют настройкам форматировщика.

4

4. Просмотр и экспорт

👀 Проверьте оптимизированный код SVG, быстро протестируйте его в своём проекте, затем скопируйте в буфер обмена или скачайте результат как новый файл `.svg`.

Технические детали

Движок форматирования (Режим форматирования)

Режим форматирования использует движок в стиле Prettier, настроенный для разметки SVG XML. Он фокусируется на читаемости и стабильных, предсказуемых различиях.

АспектПоведениеПримечания
Стиль отступаПробелы или ТабыНастраивается через **Стиль отступа** (соответствует `indentStyle`).
Размер отступа1–8 пробеловОпределяет ширину вложенности при использовании пробелов (соответствует `indentSize`).
Перенос / Длина строки0–120 символов`0` отключает перенос; в противном случае длинные строки переносятся на выбранной колонке (соответствует `wrapLineLength`).
Конец строкиLF (`\n`) или CRLF (`\r\n`)Сохраняет единообразие окончаний строк между ОС (соответствует `endOfLine`).
Выходной языкSVG в стиле XMLСохраняет совместимую с SVG структуру XML для безопасного встраивания.

Конвейер минификации (Режим минификации)

Режим минификации использует конвейер, вдохновленный SVGO, сфокусированный на уменьшении размера при сохранении визуального вывода.

ШагОписаниеЭффект
Удаление комментариевУдаляет узлы комментариев `<!-- ... -->`, которые не влияют на отображение.Меньшие файлы, более чистые различия.
Удаление избыточных пробеловСжимает ненужные пробелы, табуляции и переносы строк.Значительное уменьшение для многословных SVG, экспортированных из редакторов.
Обрезка метаданныхОпционально удаляет узлы метаданных, не влияющие на отображение, когда это безопасно.Полезно для публичных производственных ресурсов.
Нормализация атрибутовУпрощает и переупорядочивает атрибуты стабильным способом.Более компактный вывод, лучшая кэшируемость.

Кодировка и совместимость

Вывод представляет собой UTF-8 SVG, совместимый с современными браузерами и инструментами, соответствующий спецификации SVG 2.

Производительность и ограничения (Типичный настольный браузер)

Тип файлаРазмер входного файлаВремя форматированияВремя минификацииТипичное уменьшение размера
Иконка5 КБ⚡ < 15 мс⚡ < 20 мс≈ 25–40%
Иллюстрация100 КБ⚡ < 60 мс⚡ < 90 мс≈ 40–55%
Главное изображение500 КБ⏱️ < 300 мс⏱️ < 450 мс≈ 50–60%
Фактическая производительность зависит от вашего процессора, браузера и сложности SVG.

Альтернативы CLI для опытных пользователей

Предпочитаете рабочие процессы в терминале или интеграцию с CI? Объедините Prettier и SVGO для поведения, аналогичного этому инструменту:

Linux / 🍎 macOS

Форматирование SVG с помощью Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Применяет единообразные отступы и переносы строк к вашей SVG-разметке.

Минификация SVG с помощью SVGO

npx svgo input.svg -o input.min.svg

Удаляет комментарии, метаданные и лишние пробелы для уменьшения размера файлов.

Windows (PowerShell или CMD)

Форматирование SVG с помощью xmlstarlet (через WSL или нативно)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Форматирует SVG/XML с отступом в 2 пробела.

Минификация SVG с помощью SVGO (без глобальной установки)

npx svgo input.svg -o min.svg

Запускает SVGO напрямую через `npx` для разовых оптимизаций.

Добавьте Prettier + SVGO в вашу сборку или pre-commit хуки, чтобы дизайнеры могли экспортировать исходные SVG, а ваш пайплайн поддерживал их оптимизацию.

Практическое применение

Веб-производительность и фронтенд-бандлы

  • Уменьшение размера SVG в дизайн-системах, наборах иконок и спрайт-листах.
  • Встраивание минифицированных SVG в HTML/CSS для экономии HTTP-запросов.
  • Улучшение Core Web Vitals за счёт уменьшения главных иллюстраций на целевых страницах.
<img src="/assets/hero.min.svg" alt="Оптимизированное главное изображение" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Передача дизайна и контроль версий

  • Форматирование экспортированного SVG перед код-ревью для читаемости различий.
  • Хранение форматированного `.formatted.svg` для совместной работы и `.min.svg` для продакшена.
  • Обеспечение единообразных отступов и порядка атрибутов в дизайн-системе.

Мобильные устройства, почта и гибридные приложения

  • Минификация встроенных SVG в HTML-письмах для облегчения кампаний.
  • Уменьшение размера бандла приложений в React Native / Capacitor / Ionic при использовании множества иконок.
  • Экономия трафика для пользователей с медленным или лимитированным подключением.

❓ Frequently Asked Questions

❓Что такое форматирование SVG?

Форматирование (или «приведение в порядок») перестраивает разметку вашего SVG с последовательными отступами, переносами строк и порядком атрибутов. Оно не меняет то, как изображение отображается, а только то, как выглядит код и ведёт себя при сравнении.

📏Изменит ли минификация внешний вид моего SVG?

В обычных случаях — нет. Минификация удаляет комментарии, избыточные пробелы и неотображаемые метаданные. Она разработана для сохранения визуального результата при уменьшении размера. Если вы полагаетесь на специальные метаданные для инструментов редактирования, сохраните резервную копию исходного файла.

🔒Загружается ли мой SVG на сервер?

Никогда. Все операции форматирования и минификации выполняются полностью в вашем браузере с использованием JavaScript/WebAssembly. Ваши SVG-файлы не отправляются на какие-либо серверы и не хранятся удалённо.

🚀Насколько можно уменьшить размер при минификации?

Реальная экономия обычно составляет от **30% до 70%**, в зависимости от того, как SVG был экспортирован и сколько метаданных или пробелов он содержит.

⚠️Может ли удаление `<metadata>` или комментариев нарушить мой рабочий процесс?

Для публичной веб-графики удаление метаданных и комментариев обычно безопасно. Однако если ваши инструменты дизайна хранят данные редактирования или информацию о лицензировании в этих разделах, сохраните оригинальную, немодифицированную копию в системе контроля версий для будущих правок.

Pro Tips

Best Practice

Храните немодифицированный `icon.formatted.svg` в вашем репозитории для чистых сравнений, а затем генерируйте `icon.min.svg` как часть процесса сборки.

Best Practice

Всегда включайте осмысленные элементы `<title>` и `<desc>` перед минификацией, чтобы ваши SVG оставались доступными для скринридеров.

Best Practice

Комбинируйте минификацию SVG со сжатием HTTP (Gzip/Brotli), чтобы выжать ещё больше байтов из тяжёлых иллюстраций и графиков.

Best Practice

Для наборов иконок рассмотрите стратегию спрайтов: минифицируйте один раз, а затем ссылайтесь на иконки через `<use>` вместо дублирования кода SVG повсюду.

Additional Resources

Спецификация W3C SVG 2
Technical specification
Документация MDN: SVG
Documentation
SVGO (GitHub)
Documentation
Форматирование Prettier для XML/SVG
Documentation

Other Tools