Онлайн SVG Очиститель

Оптимизируйте и очищайте SVG, экспортированные из Figma, Adobe Illustrator или Inkscape. Удаляйте метаданные, ненужные атрибуты и пустые группы, чтобы получить готовый к продакшену SVG.

Студия утилит

Хотите эту утилиту на своём сайте?

Настройте цвета и тёмную тему для WordPress, Notion или вашего сайта.

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

Могу ли я вставить полный HTML страницы с встроенным SVG?

Да. Очиститель обнаружит SVG-элемент внутри HTML и извлечёт только этот блок для обработки. Также работает, если вставить SVG-фрагмент напрямую.

Работает ли это с SVG из Illustrator?

Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат — это SVG, совместимый со всеми современными браузерами.

Какая разница между очисткой и минификацией?

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

Может ли удаление ID-элементов повредить SVG?

Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию «Удалить ID». Она отключена по умолчанию именно чтобы избежать этой проблемы.

Передаётся ли код SVG на какой-нибудь сервер?

Нет. Вся обработка происходит в вашем браузере с помощью встроенных API DOMParser и XMLSerializer. Код никогда не покидает ваше устройство.

# SVG Очиститель: Чистый код из Figma и Illustrator

Вставьте любой SVG, экспортированный из Figma, Adobe Illustrator или инспектора браузера, и получите чистый, оптимизированный векторный файл, готовый к продакшену.

# Почему экспортированные SVG такие грязные?

Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: data-name, xml:space, ссылки на внутренние слои и метаданные дизайна. Результат — это SVG, весящий на 40-70% больше необходимого.

# Что удаляет очиститель

  • Метаданные редактора: теги metadata, title и desc, которые Figma и Illustrator добавляют автоматически.
  • Пространства имён Inkscape: все элементы с префиксом inkscape: и sodipodi:.
  • Ненужные атрибуты: xml:space, version, лишние xmlns:* и Figma data-* атрибуты.
  • Пустые группы: элементы <g> без содержимого, оставшиеся от удалённых слоёв.
  • XML объявления: объявление <?xml version="1.0"?> и DOCTYPE, ненужные при встраивании SVG в HTML.

Библиографические ссылки