Оптимизатор SVG онлайн

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

Оптимизируйте SVG размером до 2 МБ: удаляйте опасные элементы, внешние ссылки, комментарии и метаданные, округляйте координаты, сравнивайте размер и проверяйте результат в предпросмотре. Обработка выполняется локально в браузере.

Как пользоваться

1. Откройте SVG-файл, перетащите его в область выбора или вставьте XML-код вручную.
2. Выберите удаление комментариев, метаданных, пробельных узлов и при необходимости размеров width/height.
3. Укажите точность дробных координат: обычно достаточно 2–3 знаков.
4. Нажмите «Очистить и оптимизировать» и изучите статистику удалённых элементов и атрибутов.
5. Проверьте изображение в предпросмотре, затем скопируйте код или скачайте готовый SVG.

Примеры

• Иконка интерфейса: 2–3 знака точности, удаление комментариев и метаданных.
• Адаптивный логотип: сохраните viewBox и при необходимости удалите width и height.
• SVG из графического редактора: сравните градиенты, маски и кривые после очистки.
• Недоверенный файл: защитная очистка удалит активное содержимое, но для публикации также используйте CSP.

Как безопасно оптимизировать SVG для сайта

SVG — текстовый векторный формат на основе XML. Он масштабируется без потери чёткости, но файлы из графических редакторов часто содержат комментарии, метаданные, лишнюю точность координат и потенциально опасные конструкции. Оптимизатор Terabita.by очищает и сжимает код локально в браузере, показывает результат и позволяет скачать отдельный SVG-файл.

Что удаляет защитная очистка

Инструмент всегда удаляет скрипты, обработчики событий, внешние ссылки, foreignObject, встраиваемые объекты, стили с опасными URL и анимационные элементы. Это уменьшает поверхность атаки, но не заменяет серверную проверку, Content Security Policy и безопасный способ публикации недоверенных файлов.

Комментарии и метаданные

Комментарии и блок metadata не влияют на обычное отображение и могут занимать место или раскрывать сведения о редакторе. Их можно удалить отдельными параметрами. Элементы title и desc сохраняются, потому что помогают доступности и могут использоваться вспомогательными технологиями.

Точность координат

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

Пробелы и читаемость кода

Сжатие удаляет технические пробельные узлы между элементами, не меняя содержимое текстовых элементов. Результат становится компактнее, но хуже читается вручную. Храните редактируемый исходник отдельно, а оптимизированную версию используйте для публикации.

width, height и viewBox

viewBox задаёт внутреннюю систему координат и позволяет масштабировать изображение. Параметр удаления width и height применяется только при наличии viewBox, чтобы не лишить SVG размеров без основы для адаптивного масштабирования. Фактический размер на странице после этого задаётся CSS или атрибутами HTML.

Градиенты, маски и внутренние ссылки

Внутренние ссылки вида url(#gradient) и href="#symbol" сохраняются, поэтому градиенты, маски, clipPath и символы продолжают работать. Ссылки на внешние документы и ресурсы удаляются. После очистки обязательно проверьте сложные фильтры и нестандартные SVG, созданные специализированными программами.

Почему файл иногда не становится меньше

XMLSerializer может добавить обязательное пространство имён, а короткий исходник уже может быть оптимизирован. В таком случае размер почти не изменится или немного вырастет. Главный результат защитной обработки — предсказуемая структура без активного содержимого, а не гарантированный процент сжатия.

Доступность SVG

Для смысловой иллюстрации сохраняйте понятный title или desc и задавайте доступное имя в HTML. Декоративный SVG следует скрывать от скринридера с помощью aria-hidden="true". Оптимизация не определяет назначение изображения автоматически.

Как проверить результат

1. Сравните предпросмотр с исходником при нескольких размерах.
2. Проверьте градиенты, маски, прозрачность, текст и тонкие линии.
3. Посмотрите статистику удалённых элементов и атрибутов.
4. Скачайте готовый файл, не перезаписывая мастер-копию.
5. При публикации задайте корректный MIME-тип image/svg+xml и CSP.

Ограничения оптимизатора

Инструмент не объединяет пути, не переводит текст в кривые, не удаляет геометрически неиспользуемые элементы и не выполняет полный аудит SVG. Для сложной производственной графики дополнительно используйте специализированный оптимизатор и визуальные регрессионные тесты.

Приватность локальной обработки

Исходный код, настройки, предпросмотр и готовый файл остаются в памяти текущей вкладки и не отправляются на сервер Terabita.by. После обновления или закрытия страницы данные исчезают. Для растровых PNG, JPEG, WebP и AVIF используйте конвертер изображений, а для проверки размера загрузки — калькулятор времени скачивания.