Softonic

Минификация кода SVG

Шаг 1 / 2
Далее

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

Как минифицировать код SVG

  1. 1

    Вставьте разметку

    Поместите весь элемент svg, включая открывающий и закрывающий теги, в поле исходного кода SVG.

  2. 2

    Выберите, что удалить

    Оставьте отмеченными комментарии, метаданные, пробелы и doctype, чтобы получить самый маленький результат.

  3. 3

    Выберите количество знаков после запятой

    Значение по умолчанию 2 подходит для большинства иконок. Увеличьте до 3, если после минификации кривая выглядит неправильно.

  4. 4

    Минифицируйте и скопируйте

    Нажмите Далее, затем Сжать и используйте кнопку Копировать в поле результата.

Что делает минификатор с вашим кодом

Инструмент обрабатывает текст SVG в фиксированном порядке: сначала удаляет XML-объявление и doctype, затем комментарии, затем элементы метаданных, title и description, далее округляет десятичные числа и наконец схлопывает пробелы. Любая последовательность пробелов, табуляций и переводов строк превращается в один пробел, а пробелы между закрывающим и открывающим тегами убираются, что даёт одну строку.

До и после

Входные данные, 126 байт:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <!-- dot -->
  <circle cx="8.000" cy="8.000" r="3.500"/>
</svg>

Результат с настройками по умолчанию, 97 байт (экономия 23 %):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3.5"/></svg>

Обратите внимание: 8.000 стало 8, а 3.500 стало 3.5. После округления завершающие нули удаляются.

Что инструмент не трогает

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

На что обратить внимание

  • Схлопывание пробелов работает и внутри текстовых элементов, поэтому подпись с несколькими пробелами подряд покажет один пробел.
  • Округление применяется ко всем десятичным числам, включая строки версий в атрибутах: например, 1.10 станет 1.1.
  • Минифицированный код трудно читать. Храните оригинал в системе контроля версий и используйте минифицированную копию только как результат.

Быстрая проверка после минификации

Вставьте минифицированную строку в пустой HTML-файл и откройте его в браузере рядом с оригиналом. Они должны выглядеть одинаково. Если градиент, маска или контурная обрезка перестали работать, проверьте, не изменили ли вы вручную какой-либо ID или ссылку, так как инструмент их не переименовывает. Если очень мелкая деталь сместилась, поднимите точность до 3 или выше и запустите снова.

Где использовать результат

SVG в одну строку аккуратно вставляется в HTML-файл, компонент JSX, data URI или правило фонового изображения в CSS, где переводы строк пришлось бы экранировать.

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

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

По умолчанию нет, так как ID, классы и структура элементов сохраняются. Удаляются только комментарии, элементы метаданных, doctype и пробелы.

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

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

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Обрезать GIF

Обрежьте статический или анимированный GIF по точным координатам и скачайте заново закодированный файл GIF.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Изображение в Word

Локально распознайте текст на изображении PNG, JPG или WebP с OCR на 18 языках. Проверьте его в браузере и скачайте редактируемый DOCX или TXT.

Текст в рукописный почерк

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

Генератор миллиметровой бумаги

Создавайте бумагу в клетку для печати онлайн: выберите сетку или точки, задайте шаг в мм, укажите A4 или Letter и свой цвет линий, затем распечатайте или скачайте чёткий SVG.

Инструмент доступен на других языках

Руководства и сценарии использования