Necesito acelerar mi SVG. ¿Puedo convertir a WebGL o canvas?

Tengo un dibujo SVG con 10138 partes, por lo que funciona lentamente.
Quiero hacer que funciona más como http://workshop.chromeexperiments.com/globe Necesito acelerar mi SVG. ¿Puedo convertir a WebGL o canvas?

Aquí están las soluciones/preguntas que estoy considerando

¿Hay alguna manera de tener el SVG partes hacen de un modo menos intensivo del procesador?
¿Puedo convertir el SVG a WebGL o canvas?
¿Puedo ejecutarlo como SVG pero renderizar a través de WebGL o lienzo?

Solo quiero que sea más rápido ... ¿pensamientos?

Aquí es una captura de pantalla

Fuente

2012-07-24 Kirk Strobeck

Hay un montón de maneras de hacerlo, pero es imposible di por qué tu ejemplo se ejecuta lentamente sin que lo muestres. Puede intentar usar las herramientas de rendimiento proporcionadas por los navegadores para ver qué operaciones son costosas. –

Publiqué una captura de pantalla, tal vez sea más útil –

Deseé que esta pregunta no se relacionara específicamente con el gráfico :) - tengo problemas con la complejidad de SVG haciendo que las animaciones de los navegadores sean lentas ... –

-5

Uso http://sigmajs.org/

sigma.js es una biblioteca ligera de código abierto de JavaScript para dibujar gráficos, utilizando el elemento canvas de HTML. Ha sido especialmente diseñado para:

mostrar gráficos interactivamente estáticas exportados desde un software de visualización gráfica - como Gephi mostrar dinámicamente gráficos que se generan sobre la marcha

Fuente

2012-07-25 17:14:39

¿Por qué fue esta la respuesta? ¿Cómo soluciona la pregunta? –

Fue una solución rápida para mostrar el gráfico –

La desaceleración para un SVG con un número muy grande de piezas proviene del modo de no retenida de SVG. Sin más detalles sobre cómo se ve su SVG y cómo se comporta, es difícil hacer sugerencias concretas. Así que en general:

Si el gráfico es generalmente estático (que no es necesario realizar un seguimiento de eventos de ratón por objeto gráfico) se puede utilizar un canvas de HTML5 en lugar (donde manda el dibujo píxeles blit a una imagen y, posteriormente, básicamente tienes una imagen estática).
Si su gráfico tiene muchas partes repetidas, el uso de elementos SVG con <use> puede reducir la huella de memoria y mejorar el rendimiento.

Fuente

2012-07-24 22:46:03 Phrogz

Publiqué una captura de pantalla, tal vez sea más útil –

Todavía no hemos trabajado mucho con SVG, pero debería ser posible usar Famo.us para hacer la representación de modo de retención de SVG. Si usted o alguien más aquí es un gurú de SVG, es un camino que vale la pena explorar. https://github.com/famous/famous (descargo de responsabilidad: trabajo para famosos. Acabo de tropezar con esta pregunta SO por accidente mientras busco algo más). Al final del día, los lenguajes de marcado basados en XML solo tienen dos tipos: hijos y cadenas. Los tipos de Marshalling son un gran cuello de botella. –

Para agregar un poco más para cualquiera que intente esto, revise cómo se implementa el módulo Surface.js en core. Probablemente necesites crear un módulo SVGSurface.js que funcione de manera similar. Luego, a partir de ahí, descompone lo que estás haciendo en piezas compostables que heredan de esto. Estoy especulando aquí. Puede hacer ping a nuestro arquitecto líder mark lu (mark @ famo.us) con preguntas específicas. –

Como regla general simplificada:

SVG escalas recíprocamente con el número de objetos que deben extraerse las escalas
lienzo recíprocamente con la resolución.

Así que 10138 objetos que se guardarán en la memoria con SVG ralentizarán las cosas (aunque no puedo decir cuáles son los límites duros). Si ingresas a esta gama de objetos, creo que Canvas y WebGL podrían proporcionar mejores resultados. La mayoría de los navegadores modernos ya soportan renderizado de lienzo acelerado por hardware.
Sin embargo, la interacción del usuario está más relacionada con Canvas en comparación con SVG.

También puede intentar mezclarlos (consulte here para obtener más información).
Éstos son algunos recursos útiles:

SVG swarm vs Canvas swarm (utilizando D3.js)
Stackoverflow hilo con informaciones útiles

Fuente

2012-07-25 15:30:06

Publiqué una captura de pantalla, tal vez sea más útil –

Necesito acelerar mi SVG. ¿Puedo convertir a WebGL o canvas?

Respuesta

Cuestiones relacionadas