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.
Sin embargo una de sus ventajas es también un problema de seguridad, y es el que se podría insertar código javascript malicioso como parte del archivo SVG, es por eso que WordPress por defecto no permite el uso de SVG.
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');
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.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
yo no estoy utilizando el tema hijo puedo poner esto en mi tema que es astra
Hola, si colocas el código directamente en el archivo functions.php de tu tema, documenta este cambio ya que tendrás que volver a realizarlo cada vez que actualices el tema.
Hay otra opción, en caso no quieras usar un tema hijo, se trata de usar un plugin para agregar código, revisa: https://decodecms.com/agregar-codigo-a-tu-sitio-sin-usar-functions-php/
Muchas gracias! Funciona estupendamente!
Que bueno que te sirvió. Saludos.
Parece ser que a mi theme no le gusto el functions y no funcionó.
Hola, si al agregar el código ya no pudiste cargar la web, puede ser que hayas tenido algún error de sintaxis, revisa bien el código. Si por el contrario simplemente no funcionó prueba con otro theme y verifica si te sucede lo mismo.
Hola Jhon, he intentado replicar el código y no he podido hacer que funcione, trabajo con Astra y con su tema hijo en un multisitio de WordPress. No se que pueda estar haciendo mal , podrías decirme si algo a cambiado.
Si que debería funcionarte, prueba usar un plugin y verifica si te sucede lo mismo: https://es.wordpress.org/plugins/svg-support/
Ya no funcionan las líneas de código. WP Version 6.0.1
Hola, yo lo estoy usando en este blog con WordPress 6. Qué error te aparece?