Что такое оптимизатор SVG и что он удаляет?

Это браузерный минификатор SVG, который удаляет XML-пролог, doctype, комментарии, метаданные, title и desc, а также мусор редакторов от инструментов вроде Inkscape, Sodipodi и Adobe, затем сворачивает пробелы. Вы контролируете каждый шаг переключателями.

Как минифицировать SVG с помощью этого инструмента?

Вставьте разметку SVG в поле ввода, переключите нужные очистки, затем скопируйте оптимизированный вывод. Количество байтов и процент экономии появляются над результатом, чтобы вы могли подтвердить уменьшение.

Изменит ли оптимизация то, как выглядит мой SVG?

Нет, настройки по умолчанию удаляют только невизуальные данные и пробелы. Визуальные контуры и фигуры сохраняются, поэтому отрендеренная графика остаётся идентичной.

Стоит ли удалять атрибуты width и height?

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

Чем оптимизатор SVG отличается от SVGO?

Это лёгкий, не зависящий от внешних библиотек оптимизатор, который покрывает наиболее распространённые очистки SVGO в браузере, без установки инструмента сборки или настройки Node.

Загружается ли мой SVG куда-либо?

Нет. Оптимизатор SVG обрабатывает вашу разметку локально в вашем браузере, поэтому ваши данные не покидают устройство и ничего не загружается на сервер.

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

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

Ваш SVG оптимизируется локально в браузере, и ничего не загружается на сервер.

Создаёт и поддерживает Udit Agarwal

Нужно уменьшить и растровые изображения? Попробуйте Image Optimizer.

Об инструменте Оптимизатор SVG

Этот оптимизатор SVG минифицирует разметку SVG, чтобы ваши иконки и графика поставлялись меньше по размеру и загружались быстрее. Вставьте SVG, экспортированный из Figma, Illustrator, Inkscape или Sketch, и инструмент удалит XML-пролог, doctype, комментарии, метаданные и специфичный для редакторов мусор от Inkscape, Sodipodi и Adobe, затем свернёт пробелы, чтобы сэкономить байты. Вы можете при желании убрать корневые атрибуты width и height, чтобы viewBox держал графику полностью масштабируемой для адаптивных макетов. Это удобная, лёгкая альтернатива SVGO для фронтенд-разработчиков, дизайнеров и всех, кому нужно минифицировать SVG или встраивать иконки в HTML, CSS или компоненты React. Всё обрабатывается локально в вашем браузере, и инструмент сообщает количество байтов до и после, чтобы вы видели, насколько именно уменьшился ваш файл.

Возможности

Удаляет XML-пролог и объявления DOCTYPE, которые не нужны встроенным и веб-SVG
Удаляет комментарии для очистки экспортированной разметки
Удаляет элементы metadata, title и desc, которые раздувают размер файла
Очищает мусор редакторов от Inkscape, Sodipodi и Adobe, включая атрибуты с пространствами имён
При желании удаляет корневые width и height, чтобы viewBox держал графику масштабируемой
Сворачивает пробелы и лишние отступы между тегами
Показывает оптимизированное количество байтов и процент экономии
Переключайте каждую очистку, чтобы сохранить ровно ту разметку, которая вам нужна

Как использовать Оптимизатор SVG

Вставьте исходник вашего SVG в поле ввода.
Переключите опции для комментариев, метаданных, данных редактора, размеров и пробелов под ваши нужды.
Читайте оптимизированный вывод и экономию байтов, показанную над ним.
Скопируйте оптимизированный SVG и вставьте его в свой проект.

Пример

Ввод

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- иконка сердца -->
  <title>сердце</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

Результат

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

Пролог, комментарий и title удалены, пробелы свёрнуты.

Частые ошибки и устранение неполадок

Графика исчезает или выглядит неправильного размера после удаления размеров. — Удаление width и height работает только когда у SVG есть viewBox. Если viewBox нет, оставьте переключатель размеров выключенным.
ID или метка, на которую ссылается ваш CSS или JavaScript, была удалена при очистке. — Опция данных редактора удаляет data-name и атрибуты редактора с пространствами имён. Выключите её, если ваш код зависит от этих зацепок.
Доступность ломается, потому что title и desc были удалены. — Опция метаданных удаляет элементы title и desc. Отключите её, когда вы полагаетесь на них для меток программ чтения с экрана.
Вывод пуст после вставки. — Оптимизатору нужна настоящая разметка SVG; убедитесь, что вы вставили полный элемент svg, а не просто путь к файлу или бинарное изображение.

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

Что такое оптимизатор SVG и что он удаляет?: Это браузерный минификатор SVG, который удаляет XML-пролог, doctype, комментарии, метаданные, title и desc, а также мусор редакторов от инструментов вроде Inkscape, Sodipodi и Adobe, затем сворачивает пробелы. Вы контролируете каждый шаг переключателями.
Как минифицировать SVG с помощью этого инструмента?: Вставьте разметку SVG в поле ввода, переключите нужные очистки, затем скопируйте оптимизированный вывод. Количество байтов и процент экономии появляются над результатом, чтобы вы могли подтвердить уменьшение.
Изменит ли оптимизация то, как выглядит мой SVG?: Нет, настройки по умолчанию удаляют только невизуальные данные и пробелы. Визуальные контуры и фигуры сохраняются, поэтому отрендеренная графика остаётся идентичной.
Стоит ли удалять атрибуты width и height?: Убирайте их только если у вашего SVG есть viewBox. viewBox держит графику масштабируемой, что идеально для адаптивных и задаваемых через CSS иконок.
Чем оптимизатор SVG отличается от SVGO?: Это лёгкий, не зависящий от внешних библиотек оптимизатор, который покрывает наиболее распространённые очистки SVGO в браузере, без установки инструмента сборки или настройки Node.
Загружается ли мой SVG куда-либо?: Нет. Оптимизатор SVG обрабатывает вашу разметку локально в вашем браузере, поэтому ваши данные не покидают устройство и ничего не загружается на сервер.

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

Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик JS / TS — Форматирует JavaScript, TypeScript и JSX/TSX с опциями Prettier или минифицирует обычный JavaScript.
Оптимизатор изображений — Перекодируйте и уменьшайте изображения (JPEG/WebP/PNG) с опциональным изменением размера.
Конвертер форматов изображений — Конвертируйте изображения между PNG, JPEG и WebP полностью в вашем браузере.
Генератор Open Graph — Генерируйте мета-теги Open Graph и Twitter с предпросмотром социальной карточки.
Рендер диаграмм Mermaid — Рендерит диаграммы Mermaid (поток, последовательность, gantt) в SVG в вашем браузере.

Другие инструменты: Форматировщики кода

Форматировщик запросов MongoDB — Форматируйте и выравнивайте запросы MongoDB и выражения find() в браузере.
Форматировщик агрегаций MongoDB — Форматируйте и выравнивайте конвейеры агрегации MongoDB в браузере.
Обозреватель MongoDB — Изучайте образец документа или коллекции MongoDB и определяйте схему и типы его полей.
Форматировщик OpenAPI / Swagger — Форматируйте и проверяйте спецификации OpenAPI / Swagger (JSON или YAML) и считайте пути и операции.
Конвертер единиц CSS — Преобразование px, rem, em, pt и % вживую.
Glob в regex — Преобразование glob-шаблона в regex JavaScript с тестером.
HTML в Markdown — Преобразование HTML в чистый, читаемый Markdown.
Форматировщик TOML — Форматирование TOML и преобразование в JSON и обратно.
Конвертер logfmt в JSON — Преобразуйте логи logfmt key=value в JSON и обратно.
dotenv в JSON — Преобразуйте файл .env в объект JSON и JSON обратно в .env.
CSV в таблицу Markdown — Превратите CSV или TSV в таблицу Markdown в стиле GitHub.
INI в JSON — Преобразуйте конфигурацию INI в JSON и JSON обратно в INI.

Все инструменты: Форматировщики кода (32) · Все инструменты