35: Optimiser SVG avec des outils - Astuces CSS

Nous avons déjà parlé d'optimiser le SVG à la main. Faire des choix manuellement sur les détails et les types d'éléments qui peuvent être combinés ou supprimés. Dans ce screencast, nous examinerons l'optimisation de SVG avec des outils. Des outils qui peuvent réduire la taille du fichier SVG sans (espérons-le) changer l'apparence de celui-ci. Des choses parfaites pour l'automatisation. Aimer:

Suppression des espaces
Réduire la précision des nombres
Suppression du cruft de métadonnées

L'outil le plus populaire pour cela est SVGO, un outil de commande basé sur des nœuds pour optimiser SVG de cette façon. Il a une version GUI, vous pouvez donc simplement glisser-déposer comme quelque chose comme ImageOptim. (Dans la vidéo, nous en avions besoin pour la décompresser.)

Nous avons également examiné les outils d'optimisation SVG de Peter Collingridge, qui étaient intéressants en ce sens que vous pouvez choisir les règles que vous souhaitez appliquer, puis voir les résultats et la taille du fichier.

L'optimisation manuelle peut être acceptable dans certains cas où vous travaillez avec un petit nombre de fichiers et à l'occasion. Mais si vous travaillez beaucoup avec SVG, comme si vous construisez un système d'icônes, il est probablement préférable d'incorporer l'outil dans le système de construction.

Nous avons déjà examiné Grunt ici, alors imaginons un système qui:

Optimise SVG à chaque fois qu'un fichier SVG est ajouté ou modifié dans notre projet
Puis les construit tous ensemble dans un bloc defs.svg

Vous feriez d'abord l'optimisation et créer un dossier plein de ceux-ci (afin qu'ils puissent être inspectés un par un si nécessaire), puis les construire ensemble. Voici à quoi ressemblerait ce fichier Grunt en utilisant grunt-svgmin et 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')); );

Je vais déposer l'image SVG avec laquelle nous avons joué (de Freepik) et un zip du projet Grunt en téléchargement.