Gráficos vectoriales

Los gráficos vectoriales ofrecen grandes ventajas sobre las imágenes tradicionales, que son únicamente una matriz de bits. Por citar sólo las dos más obvias, con los gráficos vectoriales la imagen se ve correctamente a cualquier escala, y permiten crear gráficos "inteligentes": zonas activas, cambios dinámicos y adaptación a datos externos (por ejemplo de una base de datos).

Leyenda.net usa el formato SVG, que es el estándar internacional para gráficos vectoriales. Hasta hace poco, Internet Explorer usaba exclusivamente el formato vectorial propio de Microsoft, el VML, lo cual ha conllevado ciertos problemas (pero ya llegaremos a eso más adelante).

SVG es un campo con posibilidades asombrosas y enormes. Tan asombrosas y enormes, que a poco complejo que sea el SVG, no hay dos navegadores que lo muestren igual. Por ello, en Leyenda.net usamos sólo este tipo de gráficos cuando no existe una alternativa más sencilla (básicamente los utilizamos para los mapas) y del modo que más navegadores puedan visualizar. Como veremos, las buenas intenciones no son suficientes.

Ejemplo de imagen vectorial.

A la izquierda de este texto deberíais ver una sencilla imagen vectorial dentro de un marco habitual de Leyenda.net. En su comportamiento normal, hay dos zonas activas, que normalmente tienen fondo gris pero al pasar el ratón por encima pasan a granate. Al pulsarlas se va a otras zonas de Leyenda.net.

Inline

Para poder adaptar una imagen vectorial al estilo en particular elegido por cada usuario, se usa lo que se llama Inline SVG, un estándar definido en HTML5 por el que el código del archivo gráfico se suministra junto al de la propia página, y no como un objeto externo. Aunque los navegadores se van adaptando a esta nueva posibilidad, esto añade problemas adicionales a la visualización de estos gráficos.

Diferencias entre navegadores

Tenemos registradas las siguientes divergencias entre los diversos navegadores.

Firefox 5

El soporte SVG de Firefox es de lo mejor que hay en el mercado. No obstante, hasta hace poco tenía un feo defecto y es que se liaba al calcular dobles tamaños relativos (puede que lo veáis en versiones antiguas). Dicho de otro modo, a veces la imagen vectorial se veía demasiado pequeña.

Curiosamente, la vesión de Firefox sobre Ubuntu no muestra ninguno de estos problemas.

Chrome 12

Chrome también tiene muy buen soporte de SVG, pero tampoco se libra de ciertos problemas.

Al igual que otros navegadores, ignora la directiva xml:base, por lo que suele calcular mal el destino de los enlaces de un mapa SVG. Para comprobarlo podéis pichar en el mapa de la izquierda. Debería ir a los foros y a la sección de descargas, y sin embargo con Chrome os llevará a la página principal de Leyenda.net. Este bug ha sido reportado innumerables veces y afecta a la validación de HTML 5, por lo que seguramente se corrija en versiones próximas del navegador.

Chrome también puede liarse a veces al calcular tamaños relativos, aunque no es tan obvio como en Firefox. La web también se encarga de corregirlo al cargar la imagen, de modo inmediato mediante JavaScript.

IE9

Internet Explorer 9 incluye por fin soporte nativo de SVG, y en general es suficiente para lo que precisamos.

No obstante, IE9 se ve afectado por el "problema xml:base". Eso quiere decir que el navegador calcula mal adónde apuntan los enlaces de un mapa SVG. Si pulsáis en las zonas del mapa os enviará a la página principal de Leyenda.net en lugar de sus destinos correctos. Esto es un bug, igual que ocurre con Chrome, y debería corregirse en versiones posteriores.

Además, para SVG Inline también aquí es necesario corregir el tamaño mediante JavaScript.

IE8

Internet Explorer 8 (y con él las versiones anteriores de IE) carece de soporte nativo para archivos SVG. El motivo ya mencionado era la predilección de MS por su formato VML. La única solución es instalar un plugin de otra empresa que proporcione el soporte para SVG. El más conocido era el Adobe SVG Viewer; lamentablemente Adobe dejó de darle soporte en 2009 y ya está totalmente desfasado. Otro bastante fiable era el Renesis Player, pero la empresa que lo desarrollaba quebró y encontrarlo ahora es cuestión de suerte.

Ninguno de estos plugins permite cargar archivos de estilo (CSS) externos al archivo SVG, que son los lógicos para reutilizar código. Por ello, cuando los CSS sean externos veréis una silueta negra. Tampoco suelen admitir animaciones y similares. Además, sufren un problema similar al de Firefox, por lo que al poco de cargar la imagen puede que observéis cómo se redimensiona.

Lamentablemente, este sistema no sirve de nada con el Inline SVG. Mientras aparece un fallback razonable, será imposible ver este tipo de gráficos.

Opera 11

No hay problemas detectados en Opera para la visualización normal de archivos SVG, pero la versión actual no admite el modo inline. Está previsto que la versión 12 ya incorpore esta funcionalidad, por lo que quedamos a la espera.

Safari 5

Safari usa el motor Webkit, al igual de Chrome, y comparte el problema de los enlaces y del tamaño relativo. En versiones anteriores de Safari, el motor no aplicaba bien la transparencia de fondo y quedaba un recuadro blanco alrededor de la imagen.

Konqueror 4.6

Aunque se supone lo contrario, la capacidad del motor SVG de Konqueror ha mostrado resultados realmente pobres. Las imágenes no se escalan y no se cargan las hojas de estilo. Prácticamente inservible.

Móviles

La visualización de SVG en móviles aún está en pañales. Por ahora no cuentes con ver este tipo de imágenes en tu dispositivo.