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

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

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 comentarios en «Cómo utilizar imágenes SVG en la librería multimedia de WordPress»

  1. 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. 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. Porque algunos lo desestiman usar el svg por seguridad?

    1. 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. A mi me fue bien con el código, Y los archivos SVG los creo yo mismo, Buen CÓDIGO.

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

    Carmen

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

  4. 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

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.