Три способа уменьшения размера файла SVG с SVGO

 svgo yoursvgfile.svg --enable='removeComments,mergePaths' 

Приведенная выше команда создает оптимизированную версию yoursvgfile.svg , удаляя комментарии и объединяя несколько путей в исходном коде.

# 2. Интегрируйте SVGO в ваш рабочий процесс Gulp

В наши дни широко распространенный интерфейсный рабочий процесс включает запускщик задач, который выполняет автоматизированные операции, такие как компиляция Sass в CSS, минимизация скриптов и т. Д.

Одним из наиболее популярных исполнителей задач является Gulp , который является одновременно мощным и быстрым в реализации.

Благодаря gulp-svgmin легко интегрировать SVGO с рабочим процессом на основе gulp-svgmin .

Вы устанавливаете gulp-svgmin с помощью npm :

 npm install gulp-svgmin 

Основная задача gulp для svgmin выглядит так:

 var gulp = require('gulp'); var svgmin = require('gulp-svgmin'); gulp.task('default', function () { return gulp.src('logo.svg') .pipe(svgmin()) .pipe(gulp.dest('./out')); }); 

Приведенный выше код, который вы добавляете в файл конфигурации Gulp, Gulp.js , принимает logo.svg , вызывает svgmin для его оптимизации и выводит в svgmin папку.

Вы можете найти более gulp-svgmin примеры на странице gulp-svgmin GitHub . Если вы не слишком хорошо знакомы с Gulp, но хотите быстро освоиться с ним, не пропустите «Введение в Gulp.js » Джулио Майнарди, в котором предлагается простое руководство по прохождению.

# 3. SVGOMG: онлайн версия графического интерфейса SVGO

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

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

Входит в СВГОМГ Джейк Арчибальд

Это бесплатная онлайн-версия графического интерфейса пользователя SVGO (SVGOMG означает SVGO Missing GUI):

SVGOMG Интерфейс.

Чтобы начать, выберите любой из следующих трех способов:

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

Или вы можете нажать « Демо», чтобы опробовать приложение, используя уже доступный вам демонстрационный SVG-файл.

Сделав это, вы можете настроить параметры инструмента, которые соответствуют плагинам SVGO, и сразу же просмотреть их влияние как на качество графики, так и на размер файла / экономию в килобайтах.

СВГОМГ в действии.

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

Если вы нажмете « Код» в меню в левом верхнем углу приложения, вы также сможете мгновенно получить отзыв об изменениях кода, которые SVGOMG вносит в ваш файл, когда вы переключаетесь с параметрами.

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

Еще одна отличительная особенность SVGOMG — это то, что он работает и в автономном режиме, используя технологию Service Workers .

Вывод

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

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

• Grunt-SVGmin , плагин Grunt для SVGO
• Атом-SVGO , плагин SVGO для Атома
• Sublime-SVGO , плагин SVGO для Sublime Text
• SVGO-Inkscape , чтобы экспортировать чистый SVG из Inkscape, используя SVGO
• И более.

Как вы используете SVGO? Каков ваш рабочий процесс оптимизации SVG? Нажмите на поле комментария ниже, чтобы поделиться.