35: Optimización de SVG con herramientas - Trucos CSS

Ya hablamos de optimizar SVG a mano. Tomar decisiones manualmente sobre los detalles y qué tipo de cosas se pueden combinar o eliminar. En este screencast veremos cómo optimizar SVG con herramientas. Herramientas que pueden reducir el tamaño del archivo SVG sin (con suerte) cambiar su apariencia en absoluto. Cosas que son perfectas para la automatización. Me gusta:

Eliminar espacios en blanco
Reducir la precisión de los números
Eliminando cruft de metadatos

La herramienta más popular para eso es SVGO, una herramienta de comando basada en nodos para optimizar SVG de esta manera. Tiene una versión de GUI, por lo que puede arrastrar y soltar, así como algo como ImageOptim. (En el video, necesitábamos esto para descomprimirlo).

También analizamos las herramientas de optimización SVG de Peter Collingridge, que eran ingeniosas porque puede elegir qué reglas desea aplicar y luego ver los resultados y el tamaño del archivo.

La optimización manual puede estar bien en algunos casos en los que está trabajando con una pequeña cantidad de archivos y en ocasiones. Pero si trabaja mucho con SVG, como si estuviera construyendo un sistema de iconos, probablemente sea mejor incorporar la herramienta en el sistema de construcción.

Hemos visto a Grunt aquí antes, así que imaginemos un sistema que:

Optimiza SVG cada vez que se agrega o cambia un archivo SVG en nuestro proyecto
Luego los construye todos juntos en un bloque defs.svg

Primero haría la optimización y construiría una carpeta llena de esos (para que puedan ser inspeccionados uno por uno si es necesario), luego los construiría juntos. Así es como se vería ese Gruntfile usando grunt-svgmin y 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')); );

Colocaré la imagen SVG con la que jugamos (de Freepik) y un archivo zip del proyecto Grunt como descargas.