Este es el primer post de una serie sobre el formato SVG. En este post veremos cuales son las bondades de este formato. En próximos post veremos cómo usarlo en nuestras aplicaciones.
El formato SVG (Scalable Vector Graphics) para gráficos web ofrece la mejor calidad en un gran abanico de dispositivos, más aún que gráficos basados en bitmaps. Además, SVG ya soporta temas de accesibilidad lo que le convierte en la mejor opción para gráficos interactivos.
El uso de SVG continúa creciendo en la web. En la SVG Open 2011 se vieron muchos desarollos que estaban usando SVG en una gran variedad de aplicaciones reales. Estas aplicaciones iban desde gráficas con datos, dibujos técnicos, juegos, visualización de datos geográficos y un largo etcétera.
Aunque la especificación de SVG tiene ya casi una decada, no era posible usarlo directamente como un elemento en HTML hasta que ha aparecido HTML 5. Ha medida que los navegadores dan soporte a SVG como parte de HTML 5, la próxima generación de aplicacioens web podrán usarlo sin necesidad de ningún timpo de plugin. De hecho, la facilidad de integración de SVG con HTML, CSS, el DOM y JavaScript lo convierte en la elección natural para crear experiencias interactivas adaptables. SVG ES la tecnología de gráficos vectoriales elegida para crear aplicaciones de estilo Metro para Windows 8 usando HTML.
A lo largo de una serie de post veremos algunas buenas prácticas a la hora de usar SVG en nuestros sitios con HTML 5 para asegurarnos del buen uso de esta tecnología.
¿Cuándo usar SVG en HTML5?
Como forma declarativa para formatos gráficos en HTML 5, SVG está diseñado para gráficos que pueden escalarse, que contienen texto “seleccionable”, son dinámicos e interactivos, y que pueden ser maquetados con CSS. (para ver una comparación entre SVG y el elemento <canvas> de HTML 5, leed esto).
Gráficos escalables.
Los gráficos se usan en muchos contextos y en diferentes medios. SVG es la opción más recomendable debido a su fidelidad se mantiene en cualquier resolución – algo muy importante a la hora de trabajar con diferentes dispositivos. Por ejemplo, es ideal para logos como podemos ver con el logo oficial de la W3C HTML5:
HTML5 Logo
Texto “seleccionable”
Las imágenes con texto es mejor ofrecerlas como SVG más que en cualquier otra alternativa. Las gráficas y diagramas entran en esta categoría. Además de incluir las ventajas de la escalabilidad, el texto en las gráficas y diagramas mantienen las propiedades de un texto cualquiera. Puede ser copiado y pegado, y puede actualizarse de forma fácil. Las imágenes de cabecera que contienen texto decorativo son candidatos a usar SVG. Para que veamos un ejemplo:
Gráficos interactivos.
En los gráficos interactivos y dinámicos se incluyen los juegos, mapas, gráficos, y más. Podemos encontrarnos el uso de SVG en herramientas como Bing y Google maps. Cuando se piden direcciones, se dibuja un camino azul con SVG que debemos seguir. SVG se puede generar en el lado cliente, lo que lo hace genial para añadir pequeñas cosas a imágenes ya existentes. El soporte de DOM hace fantástico el cambio dinámico de imágenes. Las gráficas se pueden actualizar a medida que cambian los datos. y un largo etcétera. Y para muestra un botón:
Formateo con CSS
Los beneficios del formateo de contenido con CSS los conocemos todos, y éste es otra razón para usar SVG. Cada forma en SVG está en el DOM y contiene toda la información sobre el gráfico, incluyendo la apariencia de cada forma. Esto hace realmente fácil el formateo de la información en cada forma (shape). Los elementos de la interfaz de usuario pueden aprovechar el uso de SVG ya que permite formas no rectangulares, es totalmente personalizable. El relleno, la opacidad, los trazos se pueden modificar a traves de la hoja de estilos, a través de script incluso a través de un :hover.
Pero un momento, que cada capacidad no excluye a las otras. Por ejemplo, aquí vemos un mapa que muestra datos en función del tiempo. Por problemas con WordPress no puedo incrustar contenido SVG todavía así que os dejo unas capturas de pantalla:
Y si seleccionasemos la opción del año 3013
Espero que os sirva.
Juan María Laó Ramos.
juanlao 
Hola.
Soy nuevo en el “Mundo SVG”, y llevo un día peleándome para que en mi página HTML pueda aparecer un mapa interactivo que al pasar el ratón sobre cada provincia/estado (dependiendo el país de la imagen…) se cambie de color, pero mi gozo en un pozo 😦 . He seguido unos cuantos tutoriales, utilizo la libreria Raphael.js pero imposible que al lanzar en local mi página aparezca el mapa!!!
¿Podría ayudarme?
Gracias!!
LikeLike