¿Qué es y qué ventajas tiene el formato SVG?

SVG (Scalable Vector Graphics) es un formato vectorial poco conocido pero muy útil para su uso online por su flexibilidad y por la capacidad de ofrecer gráficos con calidad.

El formato SVG es para muchos un total desconocido. Cuando queremos colocar algún gráfico en la web, en la mayoría de ocasiones optamos por JPG o alguna vez por un PNG o GIF, en caso de necesitar transparencia o animación. Lo que muchos no saben es que se pueden usar archivos vectoriales para su uso en navegadores.

Vectorial

SVG es vectorial, lo que supone tener todas las ventajas de cualquier formato vectorial. Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.

 

Standard abierto y compatible

Así como el formato Flash, que también era vectorial, propiedad de Macromedia, es decir de Adobe, el formato SVG es un formato abierto, estándar y basado en XML. Aunque las primeras versiones no se podían ver en los diferentes navegadores, hoy ya es un estándar que funciona sin problemas en todos los navegadores. SVG se convirtió en una recomendación del W3C en septiembre de 2001 con lo que en estos momentos ya es admitido por todos. A ser un formato basado en XML necesitamos cierto control de código para hacer que un archivo SVG funcione adecuadamente.

 

Tipografías

El formato SVG nos permite por un lado utilizar las tipografías con trazados pero también nos permite incluirlas dentro del propio archivo en formato TrueType y Tipo 1, lo que nos da una capacidad extraordinaria en cuanto a que los motores de búsqueda son capaces de indexarlo. Hay que tener en cuenta que para el texto puro colocado como tipografía tiene que ser o bien de las fuentes instaladas en el sistema o bien incluidas como estilo CSS.

Proyectos como Iconic también usan el formato SVG para hacer que una tipografía con iconos nos sirva para los diferentes usos y necesidades de tamaño y variación en función de las acciones que deseemos. Puedes ver ejemplos en su web con los que se entenderás realmente y en profundidad el verdadero uso del formato SVG.

INTERACTIVO
Los archivos SVG pesan poco, igual que lo haría un archivo vectorial. Soportan estilos CSS, con lo que si cambiamos el estilo en nuestra web también cambiará dentro del archivo. Puede incluir scripts que permiten caminos dinámicos. Puede admitir acciones como los rollovers o cambios al hacer click. Puedes ver un ejemplo en este enlace: http://codepen.io/chriscoyier/pen/evcBu

ICONOS RESPONSIVE
En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG podemos utilizar el mismo y que se vaya reduciendo poco a poco, o bien que utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial.