Visualización de gráficos vectoriales en un navegador

Question

Necesito mostrar algunos gráficos vectoriales interactivos (adjuntar con oyentes DOM, etc.) en el sitio web en el que estoy trabajando. Existe una recomendación del W3C para SVG aunque este formato aún no es reconocido por el soporte de Internet Explorer, que es obligatorio (para un sitio web público). Sin embargo, IE maneja VML e incluso hay bibliotecas de JavaScript que hacen un dibujo tipo lienzo en función de un navegador (SVG vs. VML): excanvas, GFX of Dojo Toolkit y más. Eso sería agradable y aceptable, aunque ninguno de ellos puede mostrar una imagen SVG del marcado dado.

Así que la pregunta en realidad se compone de varias partes:

1. ¿Hay librerías Javascript entre navegadores que muestran los gráficos vectoriales a partir de determinado margen de beneficio (no es obligatorio SVG) y la disponibilidad de la oferta para unirse a eventos DOM?
2. En caso negativo, ¿cuál de las tecnologías más integradas en el navegador pupular sería la más adecuada para realizar dicha tarea? Puedo elegir entre Flex/Flash, applet de Java. Silverlight no es una opción debido al bloqueo de Windows.

[EDIT] Gracias a todos por sus comentarios/sugerencias. A continuación son sólo algunas de mis notas al azar/conclusiones sobre este asunto:

• El nivel de interactividad que necesito es la capacidad de detectar eventos DOM de la imagen del vector en mostrado - mouseover, mouseout, haga clic etc - y la capacidad de reaccionar en ellos como cambiar el color de fondo, mostrar el cuadro de diálogo, etc.
• La idea de seguir con el formato SVG es bastante buena ya que es nativa en muchos navegadores, excepto en la más popular: IE. Después de experimentar con la visualización de SVG dinámico, me di cuenta de que IE versión 7 era la más problemática. Hay demasiada molestia debido a las incompatibilidades del navegador.
• Cake parece un gran marco de Javascript, aunque no pude conseguir que los ejemplos funcionen en IE7.
• Applets de Java: esa idea me gustó más ya que pensé que podría usar la biblioteca de Apache Batik, un procesador SVG de calidad. Sin embargo, Batik es una gran biblioteca y no puedo permitirme implementar un applet que pesa unos pocos megabytes.
• Decidí seguir con la opción Flex. Encontré una bonita biblioteca de gráficos vectoriales Degrafa. Utiliza su propio formato de marcado, sin embargo, reconoce la notación de ruta SVG, por lo que en mi caso va a ser bastante fácil transformar mis archivos SVG usando XSLT o simplemente analizarlos.

[EDIT 2] Aparecieron más comentarios. Me gustaría aclarar que con "Windows lock-in" me refiero a la situación que Silverlight normalmente correría en Windows, más específicamente, IE. Dudo que sea una solución aceptada (como Flash o Java Applet, por ejemplo) en otros sistemas. Sí, no tengo dudas de que uno puede ejecutar la aplicación Silverlight en cualquier sistema, aunque me temo que sería demasiado esfuerzo para un usuario promedio.

@ Akira: ¿Ha tenido algún problema con los "procesadores SVG" en IE7? Me lanzan errores de Javascript todo el tiempo.

Answer 1

Eche un vistazo al nuevo elemento Canvas que se ha implementado en muchos navegadores. También escuché que hay un control ActiveX para IE que también implementa el elemento Canvas.

Actualización: Espera, ya lo dijiste. ¡Debería leer toda la pregunta la próxima vez!:)

Answer 2

Vaya para SVG - y solo diga a los usuarios que obtengan el complemento ADOBE SVG para IE.

ver este excelente sitio - que es un sitio del Gobierno del Reino Unido (servicio público)

ELGIN

Answer 3

IE apoya VML, pero nada más lo hace y es fea. Microsoft afirmó que lo habían descartado (con XAML nuevo y todo), pero todavía forma parte de su formato XML de Office (así es como Excel .xlsx admite comentarios, lo cual es bastante extraño).

FX y más cargas soportan el nuevo elemento Canvas. Muchos soportan SVG, pero dado el trabajo que MS está haciendo en Silverlight, no veo que IE sea compatible con SVG en el corto plazo.

Se supone que Microsoft proporciona plug-ins Silverlight para ningún sistema operativo MS.

He estado usando Flex - es bastante bueno a pesar de usar Eclipse. No necesita comprar los costosos componentes del servidor Adobe para usar Flex: puede consumir servicios SOAP.

Las herramientas de desarrollo para Flex son bastante asequibles, y casi todo el mundo tiene Flash.

Answer 4

No creo que SVG sea una buena opción para el futuro. De Wikipedia:

• "El plug-in IE más común fue producido por Adobe Adobe, sin embargo, están planeando retirar este producto a principios de 2009"
• " ... Internet Explorer que tampoco apoyará SVG en la próxima versión IE8 "
• " ... todos tienen soporte incompleto para SVG 1.1 ... "
• " El plugin Corel SVG Viewer se ofreció una vez desde Corel. Su desarrollo se ha detenido. "

Answer 5

Safari, Opera y Firefox son compatibles con SVG de forma nativa (por ejemplo, sin complementos) en diversos grados de integridad y corrección, incluida la capacidad de secuencia de comandos svg de javascript.

También está el elemento de lienzo que ahora se está estandarizando en html5 y que también es compatible con los navegadores anteriores (con algunos caprichos en ciertos casos de borde debido a cambios relativamente recientes en el borrador de html5). Desafortunadamente, cualquier enfoque basado en estándares es destruido por el desprecio deliberado de IE de lo que sucede fuera de su propio ecosistema, sin embargo hay una serie de bibliotecas que intentan convertir canvas/svg en VML (lenguaje de vectores patentado de IE) como iecanvas.

[Editar: ¡Vaya, olvidé mi biblioteca js favorita - Cake! que puede analizar y SVG exhibición en la lona, ​​y creer es compatible con IE, así]

[Sin embargo, otro de edición: Pastel en realidad tiene un demo haciendo lo que creo que quiere hacer]

Answer 6

Tome un vistazo a la Raphael Javascript library. Es temprano pero parece muy prometedor.

Recuerdo la hoja de ruta de IE que tenía compatibilidad con SVG enumerada en IE7.2.

Depende de qué tan interactivo lo desee?

Answer 7

De todas las posibilidades que enumera, la única que no es un abuso horrible de una tecnología existente (Javascript), apenas compatible (SVG, elemento Canvas) o mucho trabajo (Java) es Flash. Fue diseñado como un paquete de gráficos vectoriales y es compatible con más navegadores que SVG y la etiqueta canvas.

La única razón por la que no elegiría Flash sobre todas las otras opciones es si está apuntando a navegadores móviles o si no tiene el presupuesto para el paquete Flash.

Answer 8

¿Puedes aclarar a qué te refieres con "Windows lock-in" con Silverlight? Se ejecuta en Windows y MacIntel, y las porciones de vectores se ejecutan muy bien en Linux con el complemento Moonlight.

¿Te ha decepcionado la falta de soporte de Amiga?

Answer 9

Walter Zorn tiene un JavaScript library para gráficos vectoriales arbitrarios. Se ve decente.