Оптимизация изображений SVG - Mozilla Hacks - блог веб-разработчика

1. Представляем свго
2. плагины svgo
3. Оптимизация еще дальше
4. Заключительные соображения

SVG формат векторного изображения на основе XML У этого есть большие преимущества, особенно это легкий. Поскольку SVG является текстовым форматом, его можно просматривать и изменять с помощью простого текстового редактора, а применение сжатия GZIP дает отличные результаты.

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

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

Представляем свго

Оптимизация SVG очень похожа на минимизацию CSS или других текстовых форматов, таких как JavaScript или HTML. В основном это удаление ненужных пробелов и лишних символов.

Инструмент, который я рекомендую уменьшить размер изображений SVG, svgo , Написано для node.js. Чтобы установить его, просто сделайте:

В своей базовой форме вы будете использовать командную строку, например:

$ svgo --input img /graph.svg --output img /optimised-graph.svg

$ svgo --input img / graph.svg - выходной img / optimized-graph.svg

Пожалуйста, не забудьте указать параметр --output, если вы хотите сохранить исходное изображение. В противном случае svgo заменит его оптимизированной версией.

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

Это работает без сюрпризов для простых изображений. Однако в более сложных случаях манипулирование изображением может привести к искажению файла.

плагины svgo

svgo очень модульный благодаря архитектуре на основе плагинов.

При оптимизации сложных изображений я заметил, что основные проблемы вызваны двумя плагинами svgo:

• convertPathData
• mergePaths

Отключение этих параметров гарантирует, что вы получите правильный результат в большинстве случаев:

$ svgo --disable = convertPathData --disable = mergePaths -i img /a.svg

$ svgo --disable = convertPathData --disable = mergePaths -i img / a.svg

convertPathData преобразует данные пути, используя относительные и сокращенные обозначения. К сожалению, некоторые среды не будут полностью распознавать этот синтаксис, и вы получите что-то вроде:

Снимок экрана: средство просмотра изображений Gnome с исходным изображением SVG (слева) и версией, оптимизированной с помощью svgo on (справа)

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

Другой плагин, который может вызвать проблемы - mergePaths - объединит фигуры одного стиля, чтобы уменьшить количество тегов <path> в источнике. Однако это может создать проблемы, если два пути перекрываются.

На изображении справа обратите внимание на различия в рендеринге вокруг шеи и кисти персонажа, а также логотип Twitter. Контурный вид показывает 3 перекрывающихся пути, которые составляют голову персонажа.

Я предлагаю сначала попробовать svgo со всеми активированными плагинами, а затем, если что-то не так, деактивировать два упомянутых выше.

Если результат по-прежнему сильно отличается от исходного изображения, вам придется отключить плагины один за другим, чтобы обнаружить тот, который вызывает проблему. Вот список плагины svgo ,

Оптимизация еще дальше

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

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

Если вы хотите использовать плагин mergePaths для svgo, вы должны самостоятельно комбинировать перекрывающиеся пути. Вот как это сделать:

Откройте свое изображение в Inkscape и определите путь в том же стиле (заливка и обводка). Выберите их все (удерживайте нажатой клавишу Shift для множественного выбора). Нажмите на меню Path и выберите Union. Вы сделали - все три пути были объединены в один.

3 различных пути, которые создают голову персонажа, объединены, как показано на схеме справа.

Повторите эту операцию для всех путей одного и того же стиля, которые перекрываются, и тогда вы будете готовы снова использовать svgo, сохраняя плагин mergePaths.

Существует множество различных оптимизаций, которые вы можете применить вручную:

• Преобразуйте штрихи в пути, чтобы их можно было объединить с путями одинакового стиля.
• Обрежьте пути вручную, чтобы избежать использования пути обрезки.
• Исключите нижний путь из перекрывающегося пути и объедините его с аналогичным путем, чтобы избежать проблем со слоями. (На изображении выше, посмотрите на волосы персонажа - боковые волосы находятся под его головой, но верхние волосы над ним - так что вы не можете объединить 3 волосковых пути как есть.)

Заключительные соображения

Эти ручные оптимизации могут занять много времени для скудных результатов, поэтому подумайте дважды, прежде чем начинать!

Хорошее правило при оптимизации изображений SVG - убедиться, что конечный файл имеет только один путь на стиль (тот же стиль заливки и обводки) и не использует теги <g> для группировки пути к объектам.

В Firefox OS мы используем иконку шрифта, Гея-иконка , сгенерированный из SVG глифов. Я заметил, что оптимизация их привела к значительно более легкому файлу шрифта, без визуальных различий.

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

Гийом работает в веб-индустрии более десяти лет. Он увлечен веб-технологиями и регулярно участвует в проектах с открытым исходным кодом, о которых он пишет на своем технический блог , Он также увлечен видеоиграми, анимацией и, как японский, иностранными языками.

Другие статьи Гийома Седрика Марти ...

Похожие

Комментарии