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

Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.

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

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

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

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

Возможности

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

  1. Вставьте исходник вашего SVG в поле ввода.
  2. Переключите опции для комментариев, метаданных, данных редактора, размеров и пробелов под ваши нужды.
  3. Читайте оптимизированный вывод и экономию байтов, показанную над ним.
  4. Скопируйте оптимизированный 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 удалены, пробелы свёрнуты.

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

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

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

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

Все инструменты ArrayKit