2 formas de añadir SVG WordPress 👌

Por motivos de seguridad no puedes subir imágenes SVG a WordPress. Y si tratas de subir un fichero con la extensión SVG verás este error:

Lo siento, este tipo de archivo no está permitido por motivos de seguridad.

Resulta que los SVG son ficheros de texto —puedes abrirlos con el bloc de notas y verás que define puntos y líneas geométricas que conforman una imágen— y son peligrosos ya que pueden guardar y ejecutar Javascript.

Por eso tienes que ser precavido y evitar descargar ficheros svg de cualquier sitio, ya que pueden estar manipulados por personas malintencionadas.

Y por el contrario, las imágenes SVG bien utilizadas tienen sus ventajas:

• El tamaño de los ficheros es muy pequeño: unos pocos KB en comparación con las decenas o cientos de KB de una imagen jpg o png.
• Al ser pequeñas, su descarga y tu web son más rápidas.
• No tienen pérdida de calidad al cambiar su tamaño (son responsivas).
• Cualquiera puede editar la imagen y añadir o eliminar elementos, ya que son puntos y líneas.

Y por encima de todo, es el formato que usan los ilustradores en programas como: Corel Draw, Inkscape e Illustrator. Por eso —cómo diseñador— puedes necesitar activar svg en WordPress y desbloquear esta medida de seguridad.

Te mostraré dos formas, la primera es tan fácil como instalar un plugin. La segunda opción consiste en añadir unas líneas de código y te servirá si estas creando un tema personalizado.

Opción 1 - Instalar un plugin (fácil)

Es la opción que te recomiendo si quieres una solución fácil. Sólo tienes que instalar y activar el plugin Save SVG y podrás subir ficheros SVG desde la biblioteca de medios de WordPress.

Encontrarás el plugin en el repositorio público de WordPress y esta es su apariencia:

Además de permitir la subida de ficheros svg, el plugin se encarga de analizar y neutralizar cualquier amenaza que pudiera tener dentro.

La versión básica es gratuita y es la que te recomiendo cuando eres el único administrador del sitio. En cambio, si tienes varios usuarios o redactores, es mejor que instales el plugin SVG Support que permite restringir la subida de ficheros SVG sólo a los administradores.

Opción 2 - Programar un filtro (mejor rendimiento)

Para el segundo lugar he dejado la opción más compleja que consiste en programar un filtro —sirven para modificar el funcionamiento original de WordPress— que permite añadir los SVG a WordPress. Si eres valiente y te atreves a enredar con los entresijos de WordPress conseguirás ahorrar la instalación de un plugin y que tu sitio esté optimizado.

En este enlace te explico como crear un tema hijo que es una técnica que usan los programadores para hacer modificaciones en el tema principal de forma segura y rápida.

Con el tema hijo activo, edita el fichero functions.php al que tienes que añadir estás líneas:

function custom_mimes( $mimes = array() ) {
	// New allowed mime types.
    $mimes['svg'] = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'custom_mimes' );

A la hora de subir las imágenes es importante que estén en formato xml, en caso contrario obtendrás un error de seguridad.

Es fácil solucionarlo, abre el fichero de la imagen con un editor de texto y añade este código al principio del fichero:

<?xml version="1.0" encoding="utf-8"?>

Guarda el fichero y trata de subir la imagen de nuevo.

Así que tienes dos métodos, uno fácil y otro con mejor rendimiento para añadir svg a WordPress.