Просмотрщик и минификатор SVG

Что такое просмотрщик и минификатор SVG?#

SVG — формат по умолчанию для иконок, логотипов и линейной графики в вебе: он остаётся резким при любом размере и редактируется как текст. Но SVG-файлы, экспортируемые дизайнерскими инструментами, несут массу мусора: пространства имён Inkscape и Sodipodi, блоки <metadata>, комментарии редактора и пробелы между каждым тегом. Этот багаж раздувает файл и даёт головную боль каждому, кто читает исходник. Минификатор SVG срезает то, что не влияет на рендер, и сообщает, сколько удалось сэкономить.

Эта страница — одновременно просмотрщик и минификатор. Вставьте исходник SVG слева, увидите рендер справа, переключитесь на Сжать, чтобы запустить собственную очистку — она удаляет комментарии, метаданные, пространства имён редакторов и пробелы между элементами — и считайте экономию байт. Превью рендерится через image data URI, так что любой скрипт, встроенный в SVG, никогда не выполняется — можно безопасно инспектировать ненадёжный файл.

Как пользоваться#

1. Вставьте SVG в панель Ввод слева или нажмите Пример, чтобы загрузить небольшую демонстрацию.
2. Панель Вывод и превью обновятся немедленно. По умолчанию на панели инструментов выбрано Сжать, поэтому вывод — очищенный, более мелкий SVG.
3. Переключитесь на Оригинал, если хотите, чтобы вывод показывал исходный, нетронутый код (удобно для сравнения с минифицированной версией).
4. Читайте панель статистики под панелями:
   • До / После / Сэкономлено — размер ввода против вывода в UTF-8 байтах и процент сэкономленного.
   • Сводка удалённого — сколько комментариев, блоков метаданных, элементов редактора, атрибутов редактора и текстовых узлов было срезано.
   • viewBox — геометрия width / height / viewBox, считанная с корневого <svg>, чтобы размер монтажной области можно было подтвердить с одного взгляда.
5. Используйте Копировать или Скачать на панели вывода, чтобы забрать минифицированный SVG. Используйте Очистить, чтобы стереть обе панели.

Ключевые возможности#

• Настоящий минификатор, написанный с нуля — не svgo. svgo — стандартный Node-инструмент, но зависит от fs и path Node и не запускается чисто в браузере. Эта страница поставляет собственный обход дерева, поэтому работает без серверных зависимостей.
• Пять категорий удаляемого мусора. Комментарии, блоки <metadata>, элементы и атрибуты пространств имён Inkscape/Sodipodi и пробелы между элементами — каждое посчитано и отражено.
• Учитывающая текст обработка пробелов. Пробелы внутри <text>, <tspan>, <title>, <desc>, <style> и <script> сохраняются, поэтому подписи и встроенный CSS переживают проход.
• Безопасный превью. Рендер использует <img> с data URI, который браузер считает неисполняющим изображением — встроенные в SVG скрипты не запускаются. Можно вставить ненадёжный файл без риска.
• Честный подсчёт байт. Размеры измеряются в UTF-8 байтах (а не в количестве символов), поэтому файл с CJK-текстом или эмодзи сообщит свой истинный размер при передаче.
• 100 % локально. Разбор и сериализация происходят в вашем браузере. SVG никогда не покидает страницу.

Разбор примера#

Типичный экспорт из Inkscape может начинаться с нескольких строк объявлений пространств имён редактора и блока <metadata> перед собственно графикой:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Вставьте это, оставьте режим на Сжать, и вывод сожмётся до:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

Панель статистики сообщит примерно До ~520, После ~210, Сэкономлено ~60 %, а сводка удалённого покажет 1 комментарий, 1 блок метаданных и 1 атрибут редактора (inkscape:connector-curvature). Галочка в превью рендерится идентично — ничего, влияющего на рисунок, не было удалено.

FAQ#

Запускает ли инструмент скрипты, встроенные в SVG?#

Нет. Превью рендерится как <img src="data:image/svg+xml;base64,…">, а изображения, загруженные через <img>, — не-скриптовый контекст: браузер не выполнит ни одного <script> внутри этого SVG. Это делает страницу безопасной для инспекции SVG-файлов, автором которых вы не являетесь. Исходный тег <script> в минифицированном выводе, однако, сохраняется; запустится ли он, зависит от того, как вы встроите SVG позже.

Почему бы не использовать просто svgo?#

svgo — правильный инструмент в сборочном конвейере Node, но он зависит от модулей fs и path Node и не запускается чисто в браузерной вкладке. Минификатор этой страницы — самодостаточный обход дерева без Node-зависимостей, поэтому он работает полностью на клиенте — ценой того, что он менее агрессивен, чем глубочайшие оптимизации svgo.

Экономия на моём файле невелика.#

Файлы, уже написанные вручную (без пространств имён редактора, без метаданных, без комментариев), мало что удаляют, поэтому экономия может составить всего несколько процентов за счёт пробелов. Крупнейший выигрыш дают экспорты из дизайнерских инструментов — Inkscape, Illustrator, — где и зарождается львиная доля мусора.

Изменит ли минификация рендер SVG?#

Нет, для тех категорий, что удаляет этот инструмент: комментарии, метаданные, пространства имён редакторов и пробелы между элементами не несут семантики рендеринга. Пробелы внутри текстовых элементов (<text>, <title>, <desc>, <style>, <script>) намеренно сохранены, потому что там они могут быть критичны.