Я работаю над проектом по обучению и оцениванию на уровне страны, в котором участвуют 1,5 миллиона учащихся, выполняющих оценивание, и сотни авторов контента, создающих элементы оценивания.

Одна из проблем, которую я обнаружил при написании, заключалась в том, что мы видели изображения SVG размером более 350 КБ, которые в некоторых случаях содержали только один символ!

Быстрый поиск в Google привел меня к замечательному инструменту SVGO (SVG Optimizer), чтобы посмотреть, сможет ли он легко удалить мусор из SVG.

У меня уже был установлен homebrew, поэтому установка была такой же простой, как:

brew install svgo

Запуск его на образце файла дал следующее:

svgo sample.svg -o sample1.svg
sample.svg:
Done in 1495 ms!
383.944 KiB - 25.5% = 286.095 KiB

Это был хороший прогресс, но все еще казался слишком большим, поэтому, просматривая варианты SVGO, я попробовал плагин «removeOffCanvasPaths», который выглядел многообещающе, учитывая теорию о том, что за пределами экрана есть невидимый хлам.

svgo sample.svg —-enable=removeOffCanvasPaths -o sample2.svg
sample.svg:
Done in 1502 ms!
383.944 KiB — 25.6% = 285.525 KiB

Это лишь незначительно лучше — так что же здесь не так?

Я хотел глубже понять, на что похожи эти изображения, поэтому скачал Inkscape — отличный бесплатный инструмент с открытым исходным кодом для создания и редактирования SVG.

Я открыл изображение и увидел это:

Немного уменьшив масштаб, я увидел это:

И затем, когда я полностью уменьшил масштаб, все изображение становится четким. Обратите внимание, что я размыл изображение, чтобы защитить невиновных:

Единственная часть этого изображения, которая используется, — это крошечная цифра «6» посередине.

Итак, это подтвердило теорию о том, что контент был за кадром — так почему же не работал плагин SVGO?

Оказывается, плагин «mergePaths» по умолчанию в SVGO связывал пути вместе, что означало, что они больше не были OffCanvasPath и, следовательно, не удалялись. Отключив плагин mergePaths, мы получим следующее:

svgo sample.svg --disable=mergePaths —-enable=removeOffCanvasPaths -o sample3.svg
sample.svg:
Done in 597 ms!
383.944 KiB — 99% = 3.767 KiB

Бинго — уменьшение размера файла на 99 % — без потери качества и простота автоматизации.