35: Оптимизиране на SVG с инструменти - CSS-трикове

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

Премахване на празно пространство
Намаляване на точността на числата
Премахване на разпадането на метаданни

Най-популярният инструмент за това е SVGO, базиран на възел команден инструмент за оптимизиране на SVG по този начин. Той има GUI версия, така че можете просто да плъзгате и пускате като нещо като ImageOptim. (Във видеото имахме нужда от това, за да го разархивираме.)

Разгледахме и SVG инструментите за оптимизация на Peter Collingridge, които бяха спретнати, тъй като можете да изберете какви правила искате да приложите, след което да видите резултатите и размера на файла.

Оптимизирането на ръка може да е наред в някои случаи, когато работите с малък брой файлове и понякога. Но ако работите много със 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 като изтегляния.