35: Оптимизация SVG с помощью инструментов - CSS-хитрости

Мы уже говорили об оптимизации SVG вручную. Выбор вручную деталей и элементов, которые можно объединить или удалить. В этом скринкасте мы рассмотрим оптимизацию SVG с помощью инструментов. Инструменты, которые могут уменьшить размер файла SVG без (надеюсь) изменения его внешнего вида. То, что идеально подходит для автоматизации. Нравиться:

Удаление пробелов
Снижение точности чисел
Удаление мусора метаданных

Самый популярный инструмент для этого - SVGO, командный инструмент на основе узлов для оптимизации SVG таким образом. У него есть версия с графическим интерфейсом, так что вы можете просто перетаскивать, как что-то вроде ImageOptim. (В видео нам это нужно, чтобы разархивировать.)

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

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

Мы уже видели здесь Grunt, поэтому давайте представим систему, которая:

Оптимизирует SVG каждый раз, когда файл SVG добавляется или изменяется в нашем проекте.
Затем собирает их все вместе в блок defs.svg

Сначала вы выполните оптимизацию и создадите папку, полную этих файлов (чтобы их можно было проверять по одному, если необходимо), а затем создайте их вместе. Вот как этот Gruntfile будет выглядеть при использовании grunt-svgmin и grunt-svgstore:

module.exports = function(grunt) ( grunt.initConfig(( svgmin: ( options: ( plugins: ( ( removeViewBox: true ), ( removeUselessStrokeAndFill: false ) ) ), dist: ( files: (( expand: true, cwd: "svg/", src: ('*.svg'), dest: 'svgo/' )) ) ), svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svgo/*.svg'), ) ) ) )); grunt.loadNpmTasks('grunt-svgstore'); grunt.loadNpmTasks('grunt-svgmin'); grunt.registerTask('default', ('svgmin', 'svgstore')); );

Я добавлю изображение SVG, с которым мы играли (из Freepik), и zip-архив проекта Grunt для загрузки.