需要加快我的SVG。我可以轉換爲WebGL或畫布嗎？

我有一個帶有10138個零件的SVG圖形，所以它運行緩慢。
我想，使其運行更象http://workshop.chromeexperiments.com/globe 需要加快我的SVG。我可以轉換爲WebGL或畫布嗎？

這裏的解決方案/問題我考慮

有什麼辦法有SVG部分在更少的處理器密集型的方式呈現？
我可以將SVG轉換爲WebGL還是畫布？
我可以讓它作爲SVG運行，但通過WebGL或畫布渲染？

我只是想讓它變得更快..想法？

這裏是一個屏幕截圖

來源

2012-07-24 Kirk Strobeck

有很多方法可以做到這一點，但它不可能說出爲什麼你的例子運行緩慢，而你沒有顯示它。您可以嘗試使用瀏覽器提供的性能工具，查看哪些操作昂貴。 – 2012-07-25 15:06:42

我發佈了一個截圖，可能會更有幫助 – 2012-07-25 15:35:06

我希望這個問題與圖形沒有特別的關係:) - 我有SVG的複雜性使得瀏覽器動畫變慢的問題.. – 2014-05-26 07:13:53

-5

使用http://sigmajs.org/

西格瑪。js是一個開源的輕量級JavaScript庫，可以使用HTML canvas元素繪製圖形。它經過特別設計：從圖形可視化軟件出口

顯示交互的靜態圖 - 像Gephi 顯示動態圖形，是在飛行中產生的

來源

2012-07-25 17:14:39

爲什麼選擇這個答案？它如何解決這個問題？ – 2013-05-03 10:57:29

這是顯示圖形的快速解決方案 – 2013-05-14 18:37:46

對於具有非常大的件數的SVG放緩來自SVG的非保留模式。沒有關於SVG的外觀和行爲方式的更多細節，很難提出具體的建議。所以一般：

如果圖形通常是靜態的（你不需要跟蹤每個圖形對象鼠標事件），你可以使用HTML5的畫布，而不是（其中繪圖命令的blit像素的圖像，然後你基本上有一個靜態圖像）。
如果您的圖形有很多重複的部分，使用帶有<use>元素的SVG可能會減少內存佔用並提高性能。

來源

2012-07-24 22:46:03 Phrogz

我發佈了一個截圖，也許這將是更有幫助 – 2012-07-25 15:52:50

我們還沒有真正使用過SVG，但應該可以使用Famo.us來進行SVG的保留模式渲染。如果你或其他人是SVG大師，這是一條值得探索的道路。 https://github.com/famous/famous（免責聲明：我爲着名作品工作，在尋找其他作品時偶然偶然發現了這個SO問題）。在一天結束時，基於XML的標記語言只有兩種類型：子和字符串。編組類型是一個巨大的瓶頸。 – 2014-05-16 17:43:43

若要爲嘗試此操作的任何人添加更多內容，請查看如何實現核心中的Surface.js模塊。您可能需要製作一個類似工作的SVGSurface.js模塊。然後從那裏將你正在製作的東西分解成可繼承的組合作品。我在這裏猜測。您可以通過特定問題來ping我們的首席架構師mark lu（mark @ famo.us）。 – 2014-05-16 17:48:17

作爲拇指的簡化規則：

SVG與對象數目往復鱗要繪製
帆布與分辨率往復縮放。

所以我用SVG保存在內存中的10138對象會減慢速度（儘管我不能說硬限制是什麼）。如果你進入這個範圍的對象，我相信畫布和WebGL可能會提供更好的表現。大多數現代瀏覽器已支持硬件加速畫布渲染。
然而，與SVG相比，Canvas更多地涉及用戶交互。

你也可以嘗試混合它們（更多細節見here）。
下面是一些有用的資源：

SVG swarm VS Canvas swarm（使用D3.js）
Stackoverflow螺紋有用的相關信息

來源

2012-07-25 15:30:06

我發佈了一個截圖，可能會更有幫助 – 2012-07-25 15:53:03

需要加快我的SVG。我可以轉換爲WebGL或畫布嗎？

回答

相關問題