Photo by Pankaj Patel on Unsplash

Los Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG son cada vez más utilizados en páginas web, ya que como su nombre indica, son automáticamente redimensionables lo que los hace independientes de la resolución de la pantalla donde se muestran. En otras palabras, una imagen SVG se verá igual de bien en cualquier dispositivo, sea cuál sea la resolución del mismo. Hoy en día, con la gran variedad de dispositivos móviles que tenemos, la verdad es que esto es música para los oídos.

Diferencia SVG con otros formatos
La diferencia entre las imágenes vectoriales y las de mapas de bits (fuente: Wikipedia)

El formato SVG se convirtió en un estándard W3C en 2001 con lo que ya está ampliamente soportado por la gran mayoría de navegadores (con algunos, y no miro a nadie, mi querido IE, sólo en versiones recientes).

¿Convencido de las ventajas del formato SVG? ¿Listo para utilizarlo en tu próxima entrada? Pues ahora empiezan los «problemas». Si intentas subir una imagen SVG a la librería multimedia de WordPress te encontrarás con un mensaje de error como éste

Error SVG librería multimedia WordPRess

ya que por defecto, el formato SVG no es uno de los tipos de archivo admitidos en la librería multimedia. Para solucionar esto, tenemos dos opciones. O bien modificamos nosotros mismos el archivo functions.php de esta manera:

add_filter( 'upload_mimes', 'custom_upload_mimes' );
function custom_upload_mimes( $existing_mimes = array() ) {
	// Add the file extension to the array
	$existing_mimes['svg'] = 'image/svg+xml';
	return $existing_mimes;
}

o, más fácil todavía, dejamos que este plugin lo haga por nosotros (opción recomendada para todos los principiantes y también para los no tan principiantes 😉 ).

Una vez tenemos la imagen SVG en la librería, ya podemos usarla igual que cualquier otra imagen, simplemente utilizando el tag HTML img (un ejemplo en una entrada WordPress). Aunque ésta es la manera más fácil de añadir una imagen SVG ten en cuenta que no es la única (aparte de con el tag img, se puede también usar object, iframe o embed). Un ejemplo de las (acaloradas) discusiones acerca de cuál es la mejor opción sería esta pregunta en StackOverflow.

Para más detalles acerca del formato SVG no olvides consultar su página oficial.

Photo by Pankaj Patel on Unsplash.

13 respuestas a «Cómo utilizar imágenes SVG en la librería multimedia de WordPress»

  1. Avatar de Josep
    Josep

    Hola. No funciona ni una cosa ni otra. Al incluir el código me da un fatal error. Y el plugin pone que no funciona.
    ¿Alguna otra idea?
    Saludos.

    1. Avatar de Jordi Cabot

      Yo el plugin lo sigo utilizando habitualmente y nunca me ha dado ningún problema. ¿Has probado de añadir la imagen con el media uploader en lugar de escribir directamente tu el tag img? ¿o el plugin te da error ya al activarlo?

      El problema puede estar no en la configuración de WordPress sinó en la configuración de tu servidor web, que también tiene que aceptar este tipo de ficheros (ver por ejemplo esta discusión: https://wordpress.org/support/topic/could-not-display-svg )

  2. Avatar de andres
    andres

    Gracias, funciona el plugin !

  3. […] Si quieres saber como poder insertar imágenes en wordpress mira en este enlace https://neliosoftware.com/es/blog/como-utilizar-imagenes-svg-en-wordpress/ […]

  4. Avatar de hugo
    hugo

    Porque algunos lo desestiman usar el svg por seguridad?

    1. Avatar de Antonio Villegas

      Hola Hugo,

      El problema de los SVG es que pueden contener JavaScript que se ejecuta por el navegador al mostrar la imagen. De este modo, un atacante podría hacer maldades en nuestra web. Puedes ver más información al respecto en esta entrada (en inglés). Sin embargo, siempre que utilicemos archivos SVG de fuentes fiables, o los crees tu mismo no hay problema alguno en usarlos.

      1. Avatar de Coco Laura
        Coco Laura

        A mi me fue bien con el código, Y los archivos SVG los creo yo mismo, Buen CÓDIGO.

  5. Avatar de Carmen Quintana

    Hola! El plugin me ha funcionado perfectamente, pero en el dispositivo móvil no sale bien. ¿Qué puedo hacer?
    Muchas gracias!!

    Carmen

    1. Avatar de Antonio Villegas

      En principio SVG está soportado en todos los dispositivos recientes. ¿Qué versión de navegador o dispositivo estás usando?

  6. Avatar de ESPACIO LABORAL

    saludos me parecio muy buena la informacion voy a implementarla y les comento como me fue, gracias

    1. Avatar de Antonio Villegas

      ¡Mucha suerte, seguro que lo consigues!

  7. Avatar de Viejo Xennial

    Gracias por tu «altruismo», que te vaya super bien en tus proyectos y progresos.

    Copiando el codigo en functions.php funcionó a la primera

    Gran Blog.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *