Hoy les comentaré sobre la librería SVGO (https://github.com/svg/svgo) utilizada para el tratamiento de imágenes vectoriales (SVG ) la cual se ha convertido en imprescindible en mi lista y más si voy a incluir muchas imágenes vectoriales en el proyecto.

Los archivos SVG, especialmente los que se exportan desde varios editores, suelen contener mucha información redundante e inútil. Esto puede incluir metadatos del editor, comentarios, elementos ocultos, valores predeterminados o no óptimos y otras cosas que se pueden eliminar o convertir de forma segura sin afectar al resultado del renderizado SVG. Lo mejor de la librería es que permite la optimización de varios archivos a la vez.

/*CODIGO SIN OPTIMIZAR */
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="2000px"
   height="2000px"
   viewBox="0 0 2000 2000"
   version="1.1"
   id="SVGRoot"
   inkscape:version="0.92.4 (unknown)"
   sodipodi:docname="sass-1.svg"
   inkscape:export-filename="/home/Pictures/logos/sass-CSS300x300a.png"
   inkscape:export-xdpi="14.4"
   inkscape:export-ydpi="14.4">
.......
.......
</svg>

 

SVGO permite optimizar nuestros ficheros SVG y sobre todo reducir su tamaño, algo esencial cuando los incrustamos directamente en el código HTML ahorrándonos de esta forma tener que hacer la petición HTTP para descargar el archivo A continuación podréis ver el código parcial del SVG anterior optimizado y sin que la capacidad de renderizado en el navegador se haya visto afectada, lográndose una reducción de un 41 porciento en el tamaño del archivo. Esta librería está basada en plugins por lo que ampliar o modificar cualquiera de sus prestaciones es relativamente sencillo.

/*CODIGO OPTIMIZADO */
<svg xmlns="http://www.w3.org/2000/svg" 
width="2000" height="2000">
.......
.......
</svg>

De forma automática también podemos tratar varias imágenes a la vez y usando la opción –multipass nos aseguramos una mayor compresión

[carlos@localhost testing_svgo]$ svgo --multipass *.svg 

Si en el momento de correr la utilidad te encuentras con el siguiente error. Es debido a que algunos programas sobre todo en la plataforma Windows agregan el byte order mark (BOM), el cual interfiere con el tratamiento de ficheros con codificación UTF-8.

La solución, si tienes linux es muy sencilla solo deberás de usar la utilidad dos2unix. Para ejecutarlo de forma recursiva en todos los ficheros de una carpeta solo ejecuta el siguiente comando y el se encargará de eliminar todos los BOM de los ficheros que lo contengan

find . -type f -print0 | xargs -0 dos2unix

A continuación verás el resultado de ejecutar el comando anterior

[carlos@localhost testing_svgo]$ find . -type f -print0 | xargs -0 dos2unix
dos2unix: converting file ./gulp.svg to Unix format...
...mas código...
...mas código...
dos2unix: converting file ./sass_optimizado.svg to Unix format...
...mas código....
dos2unix: converting UTF-16LE file ./aws.svg to UTF-8 Unix format...
[carlos@localhost testing_svgo]$ svgo --multipass *.svg