35: Optimera SVG med verktyg - CSS-tricks

Vi pratade om att optimera SVG för hand redan. Att göra val manuellt om detaljer och vilka typer av saker som kan kombineras eller tas bort. I denna screencast kommer vi att titta på att optimera SVG med verktyg. Verktyg som kan minska SVG-filstorleken utan att (förhoppningsvis) ändra utseendet på det alls. Saker som är perfekta för automatisering. Tycka om:

Avlägsnar mellanslag
Minska siffrans precision
Tar bort metadata cruft

Det mest populära verktyget för det är SVGO, ett nodbaserat kommandoverktyg för att optimera SVG på detta sätt. Den har en GUI-version, så du kan bara dra och släpp lika bra som något som ImageOptim. (I videon behövde vi detta för att packa upp det.)

Vi tittade också på Peter Collingrids SVG-optimeringsverktyg, som var snygga genom att du kan välja vilka regler du ville tillämpa och sedan se resultaten och filstorleken.

Optimering för hand kan vara OK i vissa fall där du arbetar med ett litet antal filer och ibland. Men om du arbetar mycket med SVG, som om du bygger ett ikonsystem, är det nog bäst att integrera verktyget i byggsystemet.

Vi har tittat på Grunt här tidigare, så låt oss föreställa oss ett system som:

Optimerar SVG närhelst en SVG-fil läggs till eller ändras i vårt projekt
Bygg sedan dem alla tillsammans till ett defs.svg-block

Du skulle göra optimeringen först och bygga ut en mapp full av dem (så att de kan inspekteras en efter en om det behövs) och sedan bygga dem tillsammans. Så här ser Gruntfile ut med grunt-svgmin och 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')); );

Jag släpper in SVG-bilden vi spelade med (från Freepik) och en zip från Grunt-projektet som nedladdningar.