Cómo SUBIR Imágenes SVG en WordPress [+PLUGINS]

A diferencia de los formatos de imagen .PNG, .JPG o .GIF, SVG (o Scalable Vector Graphics o Gráficos Vectoriales Escalables) no es un formato de mapa de bits puro. En cambio, es un formato vectorial (un primo cercano al formato de AI de Adobe Illustrator y EPS) que se está convirtiendo en una opción atractiva para todos los diseñadores y desarrolladores de página web y UI (user interface o interfaz de usuario).

Un SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.

A veces es útil pensar en el formato SVG como el «HTML para ilustraciones» y necesitas aplicarlo de manera muy diferente a otros formatos de imagen. Este formato de imagen es el más adecuado, por ejemplo, para mostrar logos, iconos, mapas, banderas y otros gráficos creados en aplicaciones de gráficos vectoriales como Illustrator, Sketch e Inkscape.

Desarrollado con un marcado basado en XML, los archivos SVG pueden ser editados en cualquier editor de texto y modificado por JavaScript o CSS. Como los vectores pueden ser escalados a cualquier tamaño mientras conservan la calidad de imagen nítida, son ideales para el diseño responsive. Aunque SVG es un formato vectorial en su núcleo, es posible (incluso común) incrustar gráficos de mapa de bits dentro de archivos SVG (por ejemplo JPEG).

Esto se puede hacer enlazándolo a una imagen a través de una URL (como lo haces con tus imágenes JPG en tu sitio web) o encapsulando el pixel de la imagen como un esquema URI de datos. Esto brinda al SVG mucha flexibilidad y posibilidades. Los servicios online como WordPress, Flickr, Medio, Tumblr y Facebook convertirán (forzosamente) cualquier archivo SVG a otro formato o, más probablemente, bloqueen directamente su subida. Estos son los usos más habituales de las imágenes SVG:

El mayor potencial del formato SVG reside en su ligereza y su versatilidad. En un contexto en el que los diseñadores y desarrolladores web viven obsesionados con la optimización WPO, los archivos SVG han llegado para ayudar en esta tarea. Además, al ser archivos que contienen código, se comportan como cualquier otro elemento de la web, pudiendo ser reconocidos por el algoritmo de Google y ayudando de esta manera al posicionamiento de tu web. Mucha gente todavía no está familiarizada con el formato SVG porque no está tan establecido como los gráficos de píxeles. Pero esto no debería de ser así, pues este formato de gráficos tiene muchos beneficios:

Wordpress no permite subir este tipo de archivos. Si tan interesante es este tipo de archivo, ¿Por qué no lo deja abierto? ¡Muy fácil! 1Todo se debe a la seguridad. Y es que, realmente un archivo SVG es un documento de código en XML, es decir, no es un archivo de imagen habitual, por lo que, como todo documento, resulta muy susceptible a sufrir inyecciones de código (en ocasiones malicioso). Seguro que has intentado subir una archivo SVG a WordPress y te ha saltado el error «Lo siento, este tipo de archivo no está permitido por motivos de seguridad»:

Error de WordPress «Lo siento, este tipo de archivo no está permitido por motivos de seguridad»

No te preocupes, tiene solución, pero es importante que sepas que habilitar la subida de archivos SVG a WordPress tiene «sus peligros», ya que, en pocas palabra, al integrar archivos en vectores SVG dejas abierta la puerta abierta a muchos contratiempos que pueden afectar tu seguridad en Wordpress.. No obstante, si eres el único webmaster o el único que tienes permiso para subir archivos a la biblioteca de medios a tu instalación WordPress, puedes permitirte activar esta opción, porque tu actúas de filtro de seguridad.

No resulta buena idea que busques imágenes en este formato por Internet y las añadas a tu WordPress sin verificar antes que no están infectadas. Si eres tú el que crea los imágenes SVG no hay problema, no vas a infectar tu propio archivo, pero si hay que tener especial cuidado con las imágenes descargadas de Internet. También tienes que tener especial cuidado con no dejar que los usuarios puedan subir imágenes SVG a tu WordPress, como si que pueden hacer con archivo .jpg, por ejemplo. Puedes habilitar que los administradores o los editores de WordPress puedan subir este tipo de imágenes, pero nunca debes permitir que la pueda subir un usuario normal, suscriptor o cualquier otro tipo de usuario en el que no confíes ciegamente.

Si quieres conseguir subir archivos SVG a WordPress, es decir, soltar un archivo SVG en la biblioteca de medios (o desde cualquier otro sitio), existen varias opciones. Primeramente, y la opción más sencilla, es utilizar un plugin que únicamente debes instalar y configurar en tu instalación WordPress. Para el segundo lugar he dejado la opción más compleja que consiste en programar un filtro. Este filtro, sirve para modificar el funcionamiento original de WordPress y que abre la posibilidad de subir SVGs a WordPress (dejando una puerta abierta a hackers, por lo que ten cuidado). Deja que lo explique por partes.

Relacionado directamente con lo que te comentaba sobre la seguridad de tu instalación WordPress, es crítico que, a la hora de buscar imágenes SVG por Internet, recurras a fuentes y páginas fiables, porque sino te puedes enfrentar a problemas de malware o inyección de código malicioso (hazme caso, es mejor evitarlo). Por ello, he hecho un listado de las mejores páginas para descargar imágenes vectoriales gratis y de pago:

Optimizar las imágenes o archivos vectoriales que subes a la biblioteca de medios de WordPress no es importante, es crítico. De hecho, es un mercado que ha avanzado mucho y son muchos los plugins para optimizar imágenes los que han ido apareciendo para facilitar esta tarea. Eso sí, no todos optimizan los archivos SVG, por lo que es conveniente que arroje algo de luz sobre este tema y conozcas las mejores páginas para comprimir archivos SVG y así optimizar aún más el espacio que ocupan en tu alojamiento web:

A la hora de subir imágenes a tu sitio web es crítico que conozcas las ventajas y desventajas de cada formato de imagen. No es lo mismo un logotipo que un icono o una imagen vectorial. Por ello, he hecho una comparativa entre los distintos formatos de imagen .PNG, .JPG, .GIF y .SVG, para que utilices el formato de imagen correcto:

Como ves, el formato SVG ha llegado como un ciclón y va a dar mucho que hablar, más de lo que ya lo hace en la actualidad. El potencial que tiene, junto a la calidad que ofrece y su poco peso, va a hacer que las páginas web sean mucho más potentes y atractivas sin graves consecuencias para el rendimiento. Eso, siempre que se utilicen correctamente y cuidando la optimización, como sucede con los demás formatos. Como ves, casi todo son ventajas. Si estás con el diseño de una página web no dudéis en probar a utilizar las imágenes SVG.

En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG puedes utilizar el mismo y que se vaya reduciendo poco a poco, o bien utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial. Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.

¿Qué te ha parecido esta guía sobre los archivos SVG? ¿Conocías todos los formatos existentes? ¿Sabías sobre estos plugins para activar la subida de este formato en Worpress? ¿Crees que me he dejado alguno? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.