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

Ми вже говорили про оптимізацію SVG вручну. Вибір вручну деталей та типів речей, які можна поєднувати чи вилучати. У цьому скрінкасті ми розглянемо оптимізацію SVG за допомогою інструментів. Інструменти, які можуть зменшити розмір файлу SVG без (сподіваємось) взагалі зміни його зовнішнього вигляду. Речі, які ідеально підходять для автоматизації. Подібно до:

Видалення пробілів
Зменшення точності чисел
Видалення розриву метаданих

Найпопулярніший інструмент для цього - SVGO, командний інструмент на основі вузла для оптимізації SVG таким чином. Він має графічну версію інтерфейсу, тому ви можете просто перетягувати і перетягувати, як щось на зразок ImageOptim. (На відео нам це потрібно було для розпакування.)

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

Оптимізація вручну може бути нормальною в деяких випадках, коли ви працюєте з невеликою кількістю файлів і іноді. Але якщо ви багато працюєте з SVG, як, наприклад, створюєте систему значків, напевно, найкраще включити інструмент до системи складання.

Ми вже розглядали тут Грунта, тому давайте уявимо систему, яка:

Оптимізує 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), та архіву проекту Grunt як завантаження.