Cómo usar imágenes SVG en WordPress

WordPress por defecto permite trabajar con imágenes jpg, png o gif, sin embargo por motivos de seguridad no es posible subir imágenes svg, en este artículo veremos cómo habilitar por código la subida de imágenes SVG en WordPress.

Generalidades

El formato SVG (Scalable Vector Graphics) es un formato vectorial, para representar figuras en 2D, similar a lo que usan los programas vectoriales como Adobe Illustrator o Corel Draw.

Tener en cuenta que SVG no es un formato de imagen en sí, sino más bien un documento XML, con etiquetas que definen la forma de la imagen.

Ventajas y desventajas de usar SVG

Algunas de las principales ventajas de usar imágenes svg son:

• No pierde calidad si hacemos zoom y se puede escalar.
• Se puede reducir su tamaño a través del formato de compresión GZIP.
• Se le puede aplicar estilos CSS.
• Se puede insertar código Javascript.

A pesar de que el uso de SVG podría ser un problema de seguridad, puede ser que en algunos proyectos aún consideres usar SVG. Evidentemente las imágenes que uses te recomiendo que sean imágenes que las hayas trabajado tu mismo o que provengan de fuentes confiables, y de ser posible comprobarlas antes en un servicio como SVG Sanitizer Test.

Habilitar imágenes SVG en WordPress

Puedes usar algún plugin para habilitar SVG en WordPress, sin embargo en este artículo usaremos directamente código

 Habilitar SVG para todos los usuarios

function dmc_add_svg_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘dmc_add_svg_mime_types’);

Habilitar SVG para usuarios de un determinado rol

Usando este código incluso puedes validar si el usuario pertenece a un determinado rol, por ejemplo para que sólo los administradores del sitio puedan subir imágenes SVG

function dmc_add_svg_mime_types($mimes) {
if ( current_user_can(‘administrator’) ){
$mimes[‘svg’] = ‘image/svg+xml’;
}
return $mimes;
}
add_filter(‘upload_mimes’, ‘dmc_add_svg_mime_types’);

Puedes comprobar a qué rol pertenece el usuario usando la función current_user_can()

Conclusión

Como hemos podido ver, a pesar de que WordPress tiene deshabilitado el uso de imágenes svg, puedes habilitar el uso de este tipo de imágenes fácilmente a través de código y evitar el uso de plugins adicionales.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.