Cómo añadir SVG en WordPress

Seguro que alguna vez has añadido un logo a la web y no termina de estar definido al 100%. La mejor solución es añadir nuestro logo en formato SVG para que se vea perfectamente.

¿Qué es el SVG?

El SVG (Scalable Vector Graphics) es un formato de archivo que define los gráficos vectoriales utilizando el lenguaje de marcado XML. La principal ventaja de SVG es que permite ampliar una imagen sin perder calidad y no pixela.

¿Cómo funciona el SVG?

SVG (Scalable Vector Graphics) es una tecnología que utiliza XML para mostrar dibujos en dos dimensiones. Es diferente de los formatos de imagen más utilizados, como PNG, GIF y JPEG.

Si se amplía un archivo de imagen png o jpeg, notarás que la imagen se vuelve borrosa y pixelada.

Los gráficos vectoriales no utilizan píxeles, sino un mapa bidimensional que define el gráfico a mostrar. Al ampliar la imagen, ésta no se pixela.

Esto te permite ampliar la imagen sin perder la calidad de los gráficos vectoriales. Además, las imágenes SVG tienen un tamaño de archivo mucho menor que las imágenes JPEG o PNG. Ideal para que nuestra web cargue más rápido.

Los gráficos vectoriales suelen utilizarse para iconos, fuentes de iconos, logotipos de sitios web e imágenes de marca. Para los logotipos corporativos, iconos y otros gráficos, puede añadir archivos SVG a WordPress.

Sin embargo, los archivos SVG no son seguros. Por esta razón, WordPress no permite subir archivos SVG por defecto.

Si sube una imagen SVG a WordPress, recibirá el siguiente mensaje de error:

Lo sentimos, pero este tipo de archivo no está permitido por razones de seguridad.

Errores de seguridad con SVG en WordPress

Los archivos SVG contienen código en un lenguaje de marcado XML similar al HTML. Los navegadores y los programas de edición de SVG analizan este lenguaje de marcado XML y lo muestran en la pantalla.

Sin embargo, esto abre el sitio web a la posibilidad de vulnerabilidades XML. Puede utilizarse para obtener acceso no autorizado a los datos del usuario, desencadenar ataques de fuerza bruta, ataques de secuencias de comandos entre sitios, etc.

Los métodos descritos en este artículo intentan mejorar la seguridad limpiando los archivos SVG. Sin embargo, estos plugins no impiden completamente la descarga o la inyección de código malicioso.

La mejor solución es utilizar únicamente archivos SVG creados por fuentes de confianza y limitar las descargas de SVG a los usuarios de confianza.

Veamos cómo utilizar archivos SVG en WordPress de forma sencilla y segura.

Método 1: Cargar archivos SVG en WordPress utilizando el soporte SVG
Con este método, puede añadir archivos SVG a WordPress. También le permite mostrar SVGs en línea en sus entradas y páginas de WordPress.

SVG Support

En primer lugar, debe instalar y activar el plugin SVG Support.

Una vez que haya activado el plugin, vaya a Configuración > Soporte SVG para configurar los ajustes del plugin.

Configuración de la compatibilidad con SVG

En la página de configuración, tendrás que marcar la casilla junto a la opción «Restringir a los administradores». Esto asegurará que sólo los administradores del sitio puedan subir archivos SVG con WordPress.

La siguiente opción es activar el modo avanzado. Sólo debe marcar esta opción si desea utilizar funciones avanzadas como las animaciones CSS o el renderizado SVG en línea.

No olvide hacer clic en el botón «Guardar cambios» para guardar la configuración.

Ahora puedes crear un nuevo mensaje o editar uno existente. En el editor de publicaciones, cargue su archivo SVG de la misma manera que lo haría con cualquier otro archivo de imagen. Añade un bloque de imagen en el editor y sube el archivo SVG.

Ahora podrás subir e incrustar archivos SVG en WordPress.

Plugin para subir archivos SVG con Safe SVG

Método 2: Subir archivos SVG a WordPress utilizando Safe SVG

Este método también utiliza un plugin y permite sanear los archivos SVG subidos a WordPress.

Lo primero que hay que hacer es instalar y activar el plugin Safe SVG.

El plugin funciona de forma inmediata, no hay que configurar nada. Puedes simplemente seguir adelante y empezar a subir tus archivos SVG.

La desventaja es que este plugin permite la carga de SVG por todos los usuarios que pueden escribir entradas en su sitio de WordPress.

Para controlar quién puede subir archivos, debe adquirir la versión premium del plugin.

Esperamos que este artículo te haya ayudado a aprender cómo añadir SVGs con WordPress de forma segura.