Ich muss mein SVG beschleunigen. Kann ich in WebGL oder Canvas konvertieren?
Ich habe eine SVG-Zeichnung mit 10138 Teilen, also läuft es langsam.
Ich möchte, dass es mehr wie Ссылка
Hier sind die Lösungen / Fragen, die ich in Betracht ziehe
- Gibt es eine Möglichkeit, die SVG-Teile auf weniger prozessorintensive Weise rendern zu lassen?
- Kann ich das SVG in WebGL oder Canvas konvertieren?
- Kann ich es als SVG ausführen lassen, aber durch WebGL oder Canvas rendern?
Ich will es nur schneller machen .. Gedanken?
Hier ist ein Screenshot
2 Antworten
Als vereinfachte Faustregel:
- SVG skaliert wechselseitig mit der Anzahl der zu zeichnenden Objekte
- Leinwand skaliert wechselseitig mit Auflösung.
So werden 10138 Objekte, die mit SVG im Speicher gehalten werden, die Dinge verlangsamen (obwohl ich nicht sagen kann, was die harten Grenzen sind). Wenn Sie in diese Reihe von Objekten einsteigen, glaube ich, dass Canvas und WebGL bessere Leistungen bringen könnten. Die meisten modernen Browser unterstützen bereits hardwarebeschleunigtes Canvas-Rendering.
Die Benutzerinteraktion ist jedoch im Vergleich zu SVG stärker mit Canvas verbunden.
Sie können auch versuchen, sie zu mischen (siehe hier für weitere Details).
Hier sind einige nützliche Ressourcen:
- SVG-Schwarm vs Leinwandschwarm ( mit D3.js)
- Stackoverflow Thread mit nützlichen Informationen
Die Verlangsamung für ein SVG mit einer sehr großen Anzahl von Stücken stammt aus dem nicht beibehaltenen Modus von SVG. Ohne weitere Details darüber, wie Ihre SVG aussieht und wie sie sich verhält, ist es schwierig, konkrete Vorschläge zu machen. Also im Allgemeinen:
-
Wenn Ihre Grafik im Allgemeinen statisch ist (Sie müssen keine Mausereignisse pro grafischem Objekt verfolgen), können Sie stattdessen eine HTML5-Zeichenfläche verwenden (wobei die Zeichnungsbefehle Pixel zu einem Bild bliten und Sie danach praktisch statisch sind) Bild).
-
Wenn Ihre Grafik viele wiederholte Teile enthält, kann die Verwendung von SVG mit
<use>-Elementen den Speicherbedarf verringern und die Leistung verbessern.
Tags und Links svg canvas webgl html5-canvas