35: Ottimizzazione di SVG con Strumenti - Trucchi CSS

Abbiamo già parlato dell'ottimizzazione manuale di SVG. Fare scelte manualmente sui dettagli e sul tipo di cose che possono essere combinate o rimosse. In questo screencast vedremo come ottimizzare SVG con gli strumenti. Strumenti che possono ridurre la dimensione del file SVG senza (si spera) cambiarne l'aspetto. Cose perfette per l'automazione. Piace:

Rimozione di spazi bianchi
Ridurre la precisione dei numeri
Rimozione di metadati cruft

Lo strumento più popolare per questo è SVGO, uno strumento di comando basato su nodi per ottimizzare SVG in questo modo. Ha una versione GUI, quindi puoi semplicemente trascinare e rilasciare come qualcosa come ImageOptim. (Nel video, avevamo bisogno di questo per decomprimerlo.)

Abbiamo anche esaminato gli strumenti di ottimizzazione SVG di Peter Collingridge, che erano chiari in quanto puoi scegliere le regole che desideri applicare, quindi vedere i risultati e le dimensioni del file.

L'ottimizzazione manuale potrebbe andare bene in alcuni casi in cui lavori con un numero limitato di file e occasionalmente. Ma se lavori molto con SVG, come se stessi costruendo un sistema di icone, probabilmente è meglio incorporare lo strumento nel sistema di compilazione.

Abbiamo già visto Grunt qui, quindi immaginiamo un sistema che:

Ottimizza SVG ogni volta che un file SVG viene aggiunto o modificato nel nostro progetto
Quindi li costruisce tutti insieme in un blocco defs.svg

Dovresti prima eseguire l'ottimizzazione e creare una cartella piena di quelli (in modo che possano essere ispezionati uno per uno se necessario), quindi costruirli insieme. Ecco come apparirebbe Gruntfile usando grunt-svgmin e 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')); );

Inserirò l'immagine SVG con cui abbiamo giocato (da Freepik) e un file zip del progetto Grunt come download.