Crear y administrar archivos SVG en WordPress

Hace ya algún tiempo que los archivos SVG están cobrando importancia en el diseño web por todas las ventajas que ofrecen. Si intentas subir un archivo SVG a tu blog WordPress a través de la librería multimedia, podrás comprobar que WordPress no trae soporte nativo para este formato. Como consecuencia de lo anterior hoy vamos a hablar sobre el plugin SVG Spritemap que agrega soporte para los archivos SVG en la librería multimedia y además nos permite crear spritemaps SVG (combinar varios archivos SVG en uno sólo).

Este artículo voy a analizar el plugin SVG Spritemap y además voy a comentar brevemente las ventajas de los archivos SVG que tan de moda se han puesto.

Ventajas de los archivos en formato SVG

• Los archivos SVG (Scalable Vector Graphics) son gráficos vectoriales y escalables, por lo que se pueden redimensionar sin perder calidad.
• Son archivos compactos y soportan transparencias.
• Estos gráficos admiten texto y además es editable, por lo que los buscadores pueden indexarlo (Google lo indexa, el resto de buscadores lo desconozco).
• Los principales navegadores tienen soporte nativo para este formato.
• Los archivos SVG son archivos de texto (aunque parezca raro, es así, los podemos editar con un editor de texto).
• Se le pueden añadir estilos CSS, lo cual nos da un control total del aspecto del gráfico (en mi opinión esta ventaja es una de las más importantes).
• Emplean el formato XML y además pueden incluir scripts que modifiquen el gráfico de forma dinámica.
• Los archivos SVG se pueden agrupar formando un pack de iconos, de hecho hay algunos packs muy conocidos y gratuitos como puede ser Font Awesome.

Análisis del plugin SVG Spritemap para WordPress

Imagino que tras mencionar las ventajas del formato SVG ha despertado tu curiosidad y quieres emplear este formato en tu blog WordPress, pues la mejor forma es instalar el plugin SVG Spritemap.

El uso de SVG Spritemap es muy sencillo, una vez instalado ya podemos agregar las imágenes SVG desde el menú Medios → Añadir nuevo y podremos previsualizar estos archivos en la librería multimedia.

La segunda funcionalidad del plugin que es crear un spritemap para combinar varios archivos SVG en un único archivo y así reducir las peticiones HTTP. Para crear el spritemap accedemos al menú Medios → SVG Spritemap. Una vez situados el menú anterior, podemos ver que se nos muestran todos los archivos SVG que subimos a nuestro blog y para crear el spritemap sólo tenemos que hacer click en los que queremos incluir y luego pulsar el botón “Update SVG Spritemap”.

El archivo que se crea con el spritemap se llama defs.svg y para acceder a un SVG concreto tenemos que hacerlo con el nombre. Por ejemplo si uno de los SVG combinados se llama bunny, emplearemos el siguiente código:

<svg><use xlink:href="http://www.urldetublog.com/wp-content/plugins/svg-spritemap/defs.svg#:bunny"></svg>

Espero que os haya gustado el plugin o que al menos el artículo haya despertado vuestra curiosidad por los archivos SVG.