35: Optimering af SVG med værktøjer - CSS-tricks

Vi talte om at optimere SVG manuelt allerede. Valg manuelt om detaljer og hvilke slags ting der kan kombineres eller fjernes. I denne screencast ser vi på at optimere SVG med værktøjer. Værktøjer, der kan reducere filstørrelsen på SVG uden (forhåbentlig) at ændre udseendet på det overhovedet. Ting, der er perfekte til automatisering. Synes godt om:

Fjernelse af mellemrum
Reducere præcisionen af tal
Fjernelse af metadata cruft

Det mest populære værktøj til det er SVGO, et knudebaseret kommandoværktøj til optimering af SVG på denne måde. Den har en GUI-version, så du kan bare trække og slippe så godt som noget som ImageOptim. (I videoen havde vi brug for dette for at pakke det ud.)

Vi kiggede også på Peter Collingridge's SVG-optimeringsværktøjer, som var pæne, idet du kan vælge og vælge, hvilke regler du vil anvende, så se resultaterne og filstørrelsen.

Optimering i hånden kan være OK i nogle tilfælde, hvor du arbejder med et lille antal filer og lejlighedsvis. Men hvis du arbejder meget med SVG, som om du bygger et ikon-system, er det sandsynligvis bedst at integrere værktøjet i build-systemet.

Vi har set på Grunt her før, så lad os forestille os et system, der:

Optimerer SVG når som helst en SVG-fil tilføjes eller ændres i vores projekt
Bygger dem derefter alle sammen til en defs.svg-blok

Du foretager optimeringen først og bygger en mappe fuld af dem (så de kan inspiceres en efter en, hvis det er nødvendigt), og derefter bygge dem sammen. Sådan ser Gruntfile ud ved at bruge 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 falder i SVG-billedet, vi spillede med (fra Freepik) og en zip af Grunt-projektet som downloads.