Scripting SVG

Question

Estoy considerando desarrollar un sitio web similar a stackoverflow, pero las respuestas también pueden consistir en dibujos (esquemas, en este caso). Quiero tener un área en el formulario de respuesta en el que puedan hacer que este esquema sin necesidad de plugins especiales, etc.

1. ¿Estamos hasta el punto en SVG tiene o debería tener una masa crítica antes de tiempo (1-2 años), tales que el diseño de un sitio web donde SVG ejecutado por script como característica principal es razonable (es decir, que requiere Firefox u otro navegador compatible con SVG/AJAX)?
2. ¿Cuáles son algunos buenos recursos para aprender el scripting SVG de plataforma cruzada (probablemente en javascript)?

-Adam Davis

Answer 1

Lamentablemente, no tengo una respuesta, pero tengo tres consejos para proyectos que podría mirar.

La primera es la Lively Kernel de Dan Ingalls (sí, Dan Ingalls) en Sun Labs. Es una implementación de Smalltalk Virtual World en JavaScript sobre SVG. Más precisamente, es una implementación del marco de GUI Morphic de Squeak Smalltalk en JavaScript usando SVG y un puerto de (partes de) Squeak Smalltalk en JavaScript.

O, si no es un Smalltalker y lo anterior no tiene sentido para usted: es un sistema operativo, escrito en JavaScript con el intérprete de JavaScript como la CPU, SVG como la tarjeta gráfica y el navegador como el computadora.

Esto es lo más extremo posible, cuando se trata de JavaScript y SVG. Y solo totalmente funciona en Safari 3 y en parte en Firefox 3, aunque también hay un puerto experimental para Internet Explorer.

El segundo proyecto es el puerto Processing.js de John Resig del lenguaje de visualización de procesamiento a JavaScript. Utiliza el elemento <canvas> en lugar de SVG precisamente debido a los problemas que mencionaste. Éste, sin embargo, solo funciona en Firefox 3.

El tercero es Real-Time 3D in JavaScript por Useless Pickles. Utiliza solo JavaScript, DOM y CSS y no SVG o <canvas> o Flash o lo que sea. Y es portátil para casi cualquier navegador, incluido Internet Explorer 7 en adelante. Hacer 2D debería ser aún más fácil que esto.

Entre esos tres proyectos, debería poder encontrar algo de inspiración y también encontrar algunas personas que trataron de empujar el sobre con JavaScript y SVG o JavaScript y Gráficos, y pueden decirle qué funciona y qué no.

Conclusión: hacer multi-navegador SVG o multi-navegador <canvas> es casi imposible, pero con un poco de locura, gráficos entre navegadores sin SVG o <canvas> es posible.

Answer 2

1/probablemente nunca - si IE quería añadir que, entonces tendría que a pesar de que lo habría hecho por ahora; pero hay soluciones que usan SilverLight y Gecko para proporcionar renderizado. Por otro lado, hay API de gráficos entre navegadores disponibles. He hecho interfaces bastante grandes utilizando XULRunner y SVG, pero no había nada en la web que tuviera que atender a IE.

2/Los dos que mencioné más a menudo fueron el SVG pages on mozilla.org y el SVG DOM reference. Todos mis enlaces SVG están aquí en delicious

Hay un editor existente en http://www.bpel4chor.org/editor/; también si todo lo que quiere es esquemas donde todos los arcos están en una cuadrícula, puede hacerlo bastante bien usando divs e imágenes sin SVG. O simplemente puede ir al lo-fi route

Answer 3

Como @jwmittag mencionó <canvas> es una opción.

Funciona en Saffari y Firefox 3, Opera 9 y people are developing support for IE.

Puede capturar fácilmente los clics del mouse asociados con la herramienta y las propiedades actuales. Redibujando el lienzo en cada pantalla de página.

Acabo de terminar un proyecto usando <canvas> y es una API simple y muy poderosa para trabajar, especialmente si alguna vez ha hecho algún trabajo de OpenGL o Cairo.

Buena suerte, suena como un proyecto genial.

Answer 4

Raphael parece una interesante visión sobre el problema de los gráficos vectoriales entre navegadores.

Answer 5

SVGWeb es una secuencia de comandos que agrega capacidades SVG casi nativas a IE mediante flash. Todos los otros navegadores principales son compatibles con SVG.

http://code.google.com/p/svgweb/