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

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.

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

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.