Iniciar sesión

Gráficos vectoriales

Imágenes SVG en Leyenda.net


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.

Alerta No puedes ver gráficos vectoriales. Si usas IE prueba este plugin.
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.

Linux

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

Alerta No puedes ver gráficos vectoriales. Si usas IE prueba este plugin.

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.



Creado por Entropía
© de sus respectivos autores.

Página 1
Entropía Bibliotecario
26-07-2011 23:33

13833 mensajes
Twitter Web

Informadme si observáis cualquier problema en la visualización de estos tres mapas de imagen. Eso sí, antes haced F5 unas cuantas veces para asegurarnos de que tenéis la última versión.

Saludos,

Entro

Varghar
27-07-2011 11:48

2002 mensajes
↕ 12 horas ↕

Entro, que programa usas para hacer las imágenes vectoriales?

Entropía Bibliotecario
27-07-2011 12:45

13833 mensajes
Twitter Web
↕ 56 minutos ↕
Tal como dijo Varghar:

Entro, que programa usas para hacer las imágenes vectoriales?

Inkscape, y luego los modifico a mano.

Saludos,

Entro

berger
27-07-2011 14:31

2950 mensajes
Web
↕ 1 hora ↕

Hola,

Pruebas que puedo hacer aquí y ahora...

Sobre Windows 7

IE 8: No funciona. El dibujo superior se ve todo negro y en el mapa de abajo no se iluminan los países. He instalado el SVG de Renesis pero ni así.

Firefox 5.0: Funciona perfectamente

Saludos,

Berger

Varghar
27-07-2011 15:32

2002 mensajes
↕ 1 hora ↕

Ok, merci! Yo intenté hacer unos logos para camiseta con inkscape pero no es tan sencillo como parece... me cansé rápido, todo hay que decirlo.

Entropía Bibliotecario
27-07-2011 18:43

13833 mensajes
Twitter Web
↕ 3 horas ↕
Tal como dijo berger:

IE 8: No funciona. El dibujo superior se ve todo negro y en el mapa de abajo no se iluminan los países. He instalado el SVG de Renesis pero ni así.

Ése es el comportamiento normal para IE8, los plugins no permiten más. Por lo menos el mapa funciona, en el sentido de que se ve y te lleva a los respectivos artículos.

Saludos,

Entro

berger
27-07-2011 22:26

2950 mensajes
Web
↕ 3 horas ↕

(continuación de las pruebas, desde casa)

Sobre OpenSUSE 11.2 (KDE 3.5)...

Firefox 3.6: Funciona todo OK

Chromium 12: El gráfico superior siempre lleva a la página de inicio, y los otros mapas funcionan pero a veces se colorea el país sobre el que pones el puntero y otra veces no. Vaya, que falla como comentabas.

Konkeror: Un desastre... ni se ve el mapa.

Saludos,

Berger

p.d.- Ya sé que está un poco desactualizada la máquina, pero es que no encuentro el momento...

Annagul
28-07-2011 11:28

124 mensajes
↕ 13 horas ↕

Mis pruebas:

Firefox 3.6.17: OK

Epiphany Browser 2.30.6 (Webkit): Solo el primer mapa. En el segundo mapa, que debería aparecer Europa, muestra el error:

Tal como se dijo:

This page contains the following errors:

error on line 3 at column 23: Char 0x0 out of allowed range

Epiphany es el navegador web del proyecto Gnome, es muy minoritario, probablemente no te merezca la pena preocuparte.

Todas las pruebas sobre Gentoo Linux.

Página 1

Nueva opinión



Twittear
Gráficos vectoriales
Creado por Entropía
© de sus respectivos autores.

Creado 21-07-2011
Modificado 21-07-2011

Invocado 4058 veces.

Índice
Inline

Diferencias entre navegadores
Firefox 5
 → Linux
Chrome 12
IE9
IE8
Opera 11
Safari 5
Konqueror 4.6
Móviles

Opiniones (8)

Historial
21-07-2011: Artículo creado.
En Leyenda.net
Navegación

Últimos mensajes Feed
Hoy a las 20:03: Mensaje de NegraSangre en Partidas "Last Minute" - Reclutamiento (foro de Partidas)

Hoy a las 18:10: Mensaje de Whagan en Locke & Key 5 - Mecanismos de relojería (sección de Biblioteca)

Hoy a las 17:56: Mensaje de Frini en Regalitos del solsticio 2019 (foro de Leyenda.net)

Hoy a las 17:18: Mensaje de Whagan en Errores y sugerencias (foro de Leyenda.net)

Hoy a las 15:13: Mensaje de JonathanStrange en Trobá en Sevilla 2019 (foro de Leyenda.net)