• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Cómo usar imágenes SVG en WordPress

Cómo usar imágenes SVG en WordPress

Cómo usar imágenes SVG en WordPress

[ 8 enero 2019 ] [ Actualizado: 22 enero 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Puedes comprobar las etiquetas que componen el archivo svg fácilmente abriendo el archivo svg con algún editor de textos, por ejemplo revisa este enlace

 

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.
En un artículo anterior habíamos visto cómo insertar un archivo SVG animado como logo.

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.

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');

Puedes agregar este código al final de tu archivo functions.php de child-theme.

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Usar imágenes WebP en WordPressUsar imágenes WebP en WordPress
  • Modificar el mensaje de notificación de comentarios en WordPressModificar el mensaje de notificación de comentarios en WordPress
  • Cambiar el tipo de Taxonomía en WordPressCambiar el tipo de Taxonomía en WordPress
  • Habilitar comentarios en el inicio de WordPressHabilitar comentarios en el inicio de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. jordi Gonzalez Cirac

    27 agosto, 2020

    yo no estoy utilizando el tema hijo puedo poner esto en mi tema que es astra

    • Jhon Marreros Guzmán

      28 agosto, 2020

      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/

  2. Bruno

    1 octubre, 2020

    Muchas gracias! Funciona estupendamente!

    • Jhon Marreros Guzmán

      2 octubre, 2020

      Que bueno que te sirvió. Saludos.

  3. Rodrigo

    6 febrero, 2021

    Parece ser que a mi theme no le gusto el functions y no funcionó.

    • Jhon Marreros Guzmán

      8 febrero, 2021

      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.

  4. Joseph

    23 febrero, 2021

    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.

    • Jhon Marreros Guzmán

      25 febrero, 2021

      Si que debería funcionarte, prueba usar un plugin y verifica si te sucede lo mismo: https://es.wordpress.org/plugins/svg-support/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Agregar el campo de cantidad en la lista de productos de WooCommerce

Mostrar el nombre del archivo que esta usando un tema sin usar plugins

¿Qué es el Loop de WordPress?

Campos personalizados en productos de WooCommerce

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2022 Todos los derechos reservados