Besoin d'augmenter la vitesse de mon SVG. Pourrais-je convertir à WebGL ou de la toile?

J'ai un dessin SVG avec 10138 parties, de sorte qu'il s'exécute lentement.
Je veux le faire fonctionner plus comme http://workshop.chromeexperiments.com/globe

Voici les solutions/questions je suis en train d'étudier

  • Est-il possible d'avoir le SVG pièces rendre dans un moins le processeur?
  • Puis-je convertir le SVG à WebGL ou de la toile?
  • Puis-je exécuter en tant qu'SVG, mais le rendu thru WebGL ou de la toile?

Je veux juste le rendre plus rapide .. pensées?

Voici une capture d'écran

Besoin d'augmenter la vitesse de mon SVG. Pourrais-je convertir à WebGL ou de la toile?
Besoin d'augmenter la vitesse de mon SVG. Pourrais-je convertir à WebGL ou de la toile?

Il ya beaucoup de façons de le faire, mais il est impossible de dire pourquoi votre exemple tourne lentement sans vous le montrer. Vous pouvez essayer d'utiliser les outils de performance fournis par les navigateurs, pour voir ce que les opérations sont coûteuses.
J'ai posté une capture d'écran, peut-être que ce sera plus utile
J'ai souhaité que cette question n'a pas été spécifiquement liées à la graph 🙂 -- je suis d'avoir des problèmes avec SVG complexité de prise de navigateurs animations lente..

OriginalL'auteur Kirk Strobeck | 2012-07-24

  1. 17

    Comme une règle simplifiée de pouce:

    • SVG échelles réciproquement avec le nombre d'objets à tirer
    • Toile échelles réciproquement avec résolution.

    Donc je 10138 objets à être conservés en mémoire avec SVG va ralentir les choses (même si je ne peux pas dire ce que le dur limites). Si vous entrez dans cette gamme d'objets, je crois que canvas et WebGL pourrait fournir de meilleures performances. La plupart des navigateur moderne prennent déjà en charge l'accélération matérielle de la toile de rendu.

    Mais l'interaction de l'utilisateur est plus complexe, avec de la Toile par rapport au format SVG.

    Vous pouvez aussi essayer de les mélanger (voir ici pour plus de détails).

    Voici quelques ressources utiles:

    J'ai posté une capture d'écran, peut-être que ce sera plus utile

    OriginalL'auteur Ümit

  2. 13

    Le ralentissement de la pour un SVG avec un très grand nombre de pièces provient de la non-retenu mode de SVG. Sans plus de détails au sujet de ce que votre SVG ressemble et comment il se comporte, il est difficile de faire des suggestions concrètes. Donc, en général:

    • Si votre graphique est généralement statique (vous n'avez pas besoin de suivre les événements de la souris pour objet graphique), vous pouvez utiliser un HTML5 canvas au lieu (où les commandes de dessin blit pixels d'une image et, par la suite, en gros, vous avez une image statique).

    • Si votre graphique a beaucoup répété de pièces, à l'aide SVG avec <use> éléments peuvent réduire l'empreinte mémoire et améliorer les performances.

    J'ai posté une capture d'écran, peut-être que ce sera plus utile
    Nous n'avons pas vraiment beaucoup travaillé avec des SVG encore, mais il devrait être possible d'utiliser Famo.nous ne conservons-le mode de rendu SVG. Si vous ou quelqu'un d'autre ici, c'est un SVG gourou, c'est une piste à explorer. github.com/famous/famous (disclaimer: je travaille pour les plus grands. Je viens de tombé sur ce DONC, la question par hasard en cherchant autre chose). À la fin de la journée, de balisage basé sur XML langues ne disposent que de deux types: les enfants et les chaînes de caractères. Ordonnancement des types est un énorme goulot d'étranglement.
    Pour ajouter un peu plus pour toute personne qui tenterait de cela, vérifier comment l'Surface.js module de base est mis en œuvre. Vous aurez probablement besoin de faire un SVGSurface.js module qui fonctionne de la même façon. Puis à partir de là, briser ce que vous faites dans composable pièces qui héritent de ce. Je suis spéculer ici. Vous pouvez être en mesure de ping notre architecte en chef mark lu (marc @ famo.us) avec des questions précises.

    OriginalL'auteur Phrogz

  3. -5

    Utilisation http://sigmajs.org/

    sigma.js est un open-source JavaScript léger bibliothèque de tracer des graphiques, à l'aide de HTML élément canvas. Il a été spécialement conçu pour:

    D'affichage interactive de graphes statiques exportées à partir d'un graphique de visualisation de logiciel - comme Gephi
    Afficher dynamiquement des graphiques qui sont générées à la volée

    Pourquoi était-ce la réponse choisie? Comment permet-il de résoudre la question?
    C'était une solution rapide pour afficher le graphique

    OriginalL'auteur Kirk Strobeck