Cómo utilizar SVG en WordPress

Las siglas SVG significan Scalable Vector Graphics, es decir, gráficos vectoriales escalables. Al final, no es más que otro tipo de imagen (como jgp, png, etc) pero con numerosas ventajas de cara a la edición y visualización en un sitio web:

• Peso muy reducido en comparación con otros formatos de imagen.
• Escalabilidad sin pérdida de resolución: puedes ampliar o reducir el gráfico manteniendo la calidad.
• Posibilidad de modificar libremente el SVG, a través de su código.

Ejemplo de SVG

Esto es el código de un SVG inline:

Que se traduce en esta imagen:

Sabemos que uno de los principales inconvenientes a la hora de cargar una web son las imágenes, y más si cabe, cuando están mal optimizadas. Si disponemos de los gráficos a insertar en formato «vector», podemos exportarlo a SVG e integrarlos directamente en nuestra web sin mayor complicación.

Sin embargo, a día de hoy, la biblioteca de medios de WordPress no permite subir directamente un SVG. Esto se puede arreglar con algún plugin o añadiendo este bloque de código al functions.php de tu child theme:

// añadir soporte para svg
function add_file_types_to_uploads($file_types){
	$new_filetypes = array();
	$new_filetypes['svg'] = 'image/svg+xml';
	$file_types = array_merge($file_types, $new_filetypes );
	return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Cómo insertar imágenes SVG en páginas y posts

Existen varias formas de agregar un gráfico SVG. En esta web podéis ver las diferentes posibilidades de insertarlo con ejemplos. Yo me voy a centrar en las que me parecen más relevantes:

• Como imagen (img): es la manera más sencilla de colocarlo si no queremos hacer modificaciones de forma, contenido, etc. Podemos subir directamente el archivo .svg a través de la biblioteca de medios. Comentar que, al contrario que con otros tipos de imagen, la biblioteca no nos ofrece una previsualización de la miniatura de los SVG.
  

  

• Como objeto (object): de esta forma tendremos un control total para manipular el gráfico. Se colocaría de la siguiente forma:

  Para definir una hoja de estilos externa deberemos hacerlo dentro del propio código del .svg antes de subirlo, añadiendo lo siguiente, delante del tag :

  También podemos editar los estilos dentro del propio archivo .svg pero creo que esta opción nos da mucha menos versatilidad a la hora de hacer modificaciones.

  NOTA: existe la posibilidad de insertar directamente en nuestro código el svg inline pero no aconsejo hacer esto ya que el mantenimiento se puede dificultar bastante sobre todo si tenemos varios.

Controlando SVG

Estos iconos de mi página de servicio Puesta en marcha están colocados como SVG. Los tengo como imagen (img) porque no está pensado modificarlo a futuro pero he hecho una versión inline aquí para demostrar las capacidades de modificación del SVG.