Recientemente me vi con la necesidad de crear una pagina web que visualizara gráficos dinámicos de acuerdo a ciertos datos recabados en tiempo real.

Debido a que ocupaba mostrar el gráfico tanto en una pantalla gigante como en dispositivos móviles pensé que la solución obvia era usar gráficos vectoriales. ¿Que tan difícil podía ser?.

Que ingenuo fui.

Innegablemente la clara solución era SVG (Scalable Vectors Graphics), sabia que me toparía con un par de problemas, principalmente con compatibilidad entre navegadores. Ninguna batalla que algún desarrollador web no haya luchado alguna vez. Un trabajo sucio pero alguien tiene que hacerlo.

IE no soporta SVG, a su vez usa un formato propietario VML (Vector Markup Language) el cual no tengo interés de aprender (ningún otro navegador lo soporta), pero afortunadamente Adobe ofrece un plugin que le da a IE la posibilidad de visualizar SVG, una pequeña molestia pero nada infranqueable.

Entre otras cosas lo que requería hacer era insertar varias instancias de una misma imagen SVG sobre otra imagen SVG base y manipularla a través de scripting para asignar su posicionamiento, mascara, etc. Pero al intentar insertar la imagen no aparecía nada.

WTF?!
Después de batallar, leer, moverle, etc. Se me ocurre insertar una imagen PNG a la vez de SVG y todo funciona correctamente. WHAT?. Resulta que Firefox solo soporta insertar imágenes rasterizadas (jpg, png) dentro de SVG, y no puedo insertar otras imágenes vectoriales dentro de imágenes vectoriales.

DAMN!
En ese instante quede aturdido, que sentido tiene usar SVG por ser escalable si no puedo insertar imágenes escalables (Ojo, es un bug de Firefox, la recomendación de SVG especifica que esto debe de ser permitido). No tenia sentido que siguiera con mi esfuerzo de implementarlo a golpe de SVG con javascript.

Por mucho que me doliera tuve que abandonar la solución que utilizaba estandares para usar formatos propietarios.

Una ves mas, Flash ha ganado la batalla.