SVGView

Очистка SVG

Удалите лишнее и сохраните разметку SVG чистой и читаемой. Полезно перед оптимизацией, конвертацией или сохранением в репозиторий. Открывайте SVG-файлы онлайн и начинайте обработку сразу.

Добавьте SVG-файл перетаскиванием

или нажмите, чтобы выбрать, или вставьте код SVG

Только .svg файлы
Вставить код SVG с помощью Ctrl+V / Cmd+V

Почему стоит использовать инструмент очистки SVG?

Удаление метаданных

Очистка SVG удаляет блоки метаданных, описания и теги генераторов, которые добавляют вес, но не имеют визуальной ценности. Она сохраняет значимый текст для доступности, чтобы屏幕阅读ers по-прежнему имели контекст.

Чистая разметка

Очистка SVG сохраняет структуру читаемой с меньшим количеством пустых групп и комментариев. Очищенный вывод легче сравнивать в git, просматривать в коде и поддерживать между версиями.

Меньшие файлы

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

Очистка редактора

Очистка SVG удаляет атрибуты, специфичные для редакторов, как data-name или метки inkscape, сохраняя при этом ID, на которые вы ссылаетесь. Это делает CSS-хрюки и JS-селекторы стабильными.

Безопасная обработка

Обработка происходит в браузере, поэтому файлы никогда не загружаются. Это идеально подходит для клиентских активов, работы по NDA и внутренних библиотек бренда.

Готов к оптимизации

Запустите очистку SVG перед минификацией или оптимизацией для более предсказуемых результатов. Лишний шум убран, поэтому инструменты фокусируются на структурной экономии.

Как очистить SVG

1

Загрузите SVG

Перетащите файл или вставьте разметку для начала очистки SVG. Инструмент читает ваш SVG локально и подготавливает чистый вид, чтобы вы могли сначала проверить оригинал. Открывайте SVG-файлы онлайн и начинайте обработку сразу.

2

Очистите метаданные

Запустите очистку SVG для удаления метаданных, комментариев и остатков редакторов. Сравните размер и проверьте очищенную разметку, чтобы подтвердить, что визуально ничего не изменилось.

3

Экспортируйте SVG

Скачайте очищенный файл или скопируйте новую разметку. Имена файлов остаются неизменными, что упрощает замену в вашем репозитории.

Часто задаваемые вопросы об очистке SVG

Что очистка SVG удаляет из моих файлов?
Очистка SVG удаляет блоки метаданных, комментарии, теги генераторов и неиспользуемые атрибуты, которые не влияют на рендеринг. Она не удаляет пути или фигуры. Если ваш SVG включает метки доступности, как title или aria, очистка SVG сохраняет их, если они не пустые или дублированные. Для командных рабочих процессов храните оригинал без изменений, чтобы вы могли сравнивать diffs во время ревью, отслеживать изменения и быстро откатываться при необходимости. Удаление метаданных также снижает случайное раскрытие имен авторов или версий инструментов в публичных активах.
Изменит ли очистка SVG внешний вид SVG?
Очистка SVG фокусируется на невизуальной разметке, поэтому рендереный вывод должен выглядеть одинаково. Тем не менее, если файл полагается на атрибуты только редактора или необычные метаданные, запустите очистку SVG и preview перед релизом. Быстрое сравнение помогает обнаружить пограничные случаи. Если SVG использует фильтры, маски или встроенные шрифты, preview в целевых браузера�� и подтвердите, что рендереный вывод не изменился перед релизом.
Следует ли оптимизировать SVGs после очистки?
Да. Очистка SVG - это первый проход; оптимизация и минификация могут дальше уменьшить размер. Запустив очистку SVG сначала, вы даете SVGO более простой файл, что может дать лучшие результаты и меньше предупреждений. Если вы делаете ручные правки позже, второй проход очистки SVG может удалить новые комментарии или метаданные, введенные редакторами.
Очистка сохраняет IDs и viewBox?
Очистка SVG сохраняет существенные атрибуты, как viewBox, width, height и IDs, которые вы используете в CSS или скриптах. Если ID пустой или дублированный, очистка SVG может удалить его для избежания конфликтов. Проверьте вывод, если вы полагаетесь на пользовательские IDs. Если очистка SVG удаляет ID, который вам все еще нужен, добавьте его обратно и перезапустите инструмент, затем задокументируйте требуемые IDs для вашей команды.
Мой SVG загружается на сервер?
Нет. Очистка SVG работает полностью в вашем браузере и никогда не загружает файл. Этот локальный рабочий процесс очистки SVG безопасен для чувствительных логотипов, невыпущенных иконок или клиентской работы. Вы также можете использовать его офлайн или за файрволом, потому что сетевые вызовы не требуются после загрузки страницы.
Он удаляет метки доступности?
Если метки значимые, они остаются. Пустые или дублированные метки могут быть удалены для уменьшения шума. Вы можете добавить title или aria-label после очистки, если ваша команда требует определенный формат. Для более строгих правил доступности добавьте краткий title и aria-label после очистки и проверьте с screen reader в вашем целевом браузере. Если ваша организация следует WCAG, включите role и aria-labelledby и валидируйте с инструментом аудита доступности.
Могу ли я форматировать после очистки?
Да. Форматирование может сделать очищенную разметку легче для чтения. Запустите форматирование после прохода очистки для стандартизации отступов и порядка атрибутов. Команды часто запускают форматирование в CI для поддержания сти��я согласованным между репозиториями и избежания шумных diffs в pull requests. Если вы храните SVGs в компонентном репозитории, согласованный формат ускоряет ревью и уменьшает конфликты слияния.
Очистка SVG бесплатна без загрузки?
Да. Очистка SVG бесплатна для использования в вашем браузере. Загрузки или установка не требуются.
Нужен ли аккаунт для использования очистки SVG?
Нет. Очистка SVG работает мгновенно в браузере без регистрации, и файлы остаются локальными.

Связанные инструменты SVG

После очистки SVG используйте эти инструменты для оптимизации, минификации или санитизации очищенной разметки.

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

Сжимайте SVGs после очистки SVG для удаления избыточных узлов и уменьшения размера файла.

Открыть инструмент

Минификатор SVG

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

Открыть инструмент

Форматтер SVG

Красиво форматируйте вывод для читаемости и согласованных diffs.

Открыть инструмент

Санитизатор SVG

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

Открыть инструмент

Связанный SVG-блог

Продолжите чтение практических материалов о рабочих процессах SVG, устранении проблем и продакшене.