35: Optimalisering av SVG med verktøy - CSS-triks

Vi snakket om å optimalisere SVG for hånd allerede. Å ta valg manuelt om detaljer og hva slags ting som kan kombineres eller fjernes. I denne skjermsendingen ser vi på å optimalisere SVG med verktøy. Verktøy som kan redusere filstørrelsen på SVG uten (forhåpentligvis) å endre utseendet på det i det hele tatt. Ting som er perfekte for automatisering. Som:

Fjerner mellomrommet
Redusere presisjonen til tall
Fjerner metadata cruft

Det mest populære verktøyet for det er SVGO, et nodebasert kommandoverktøy for å optimalisere SVG på denne måten. Den har en GUI-versjon, så du kan bare dra og slippe så godt som noe som ImageOptim. (I videoen trengte vi dette for å pakke ut det.)

Vi så også på Peter Collingridge's SVG-optimaliseringsverktøy, som var ryddige ved at du kan velge hvilke regler du ønsket å bruke og deretter se resultatene og filstørrelsen.

Optimalisering for hånd kan være OK i noen tilfeller der du jobber med et lite antall filer og noen ganger. Men hvis du jobber mye med SVG, som om du bygger et ikon-system, er det sannsynligvis best å innlemme verktøyet i byggesystemet.

Vi har sett på Grunt her før, så la oss forestille oss et system som:

Optimaliserer SVG når som helst en SVG-fil legges til eller endres i prosjektet vårt
Bygg dem deretter sammen til en defs.svg-blokk

Du gjør først optimaliseringen og bygger ut en mappe full av dem (slik at de kan inspiseres en etter en om nødvendig), og deretter bygger du dem sammen. Slik ser Gruntfile ut med grunt-svgmin og 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')); );

Jeg slipper inn SVG-bildet vi spilte med (fra Freepik) og en zip av Grunt-prosjektet som nedlastinger.