何時使用SVG與何時使用帆布

SVG和畫布都是可以在網絡瀏覽器中繪製東西的技術，因此它們值得比較和理解一個何時比另一種更合適。即使是對它們的深刻理解也可以選擇選擇一個非常清楚。

• 有點平淡的圖標？這顯然是SVG領土。
• 類似遊戲機的遊戲？這顯然是帆布領土。

我知道我們還沒有涵蓋為什麼，但是我希望當我們挖掘它時會變得清晰。

SVG是向量和聲明性的

如果您知道自己需要矢量藝術，那麼SVG就是選擇。矢量藝術在視覺上酥脆，並且比JPG（例如JPG）的柵格圖形往往更小的文件大小。

這使徽標成為非常常見的SVG用例。 SVG代碼可以在HTML中直接進行，就像聲明的圖紙說明一樣：

 <svg viewbox="“">
  <circle cx="“" cy="“" r="“"></circle>
</svg>

如果您非常關心圖形的靈活性和響應能力，那麼SVG就是這樣。

畫布是一個JavaScript圖紙API

您將元素放在HTML中，然後在JavaScript中進行繪圖。換句話說，您發出命令來告訴它如何繪製（這比聲明性更重要）。

 <canvas width="“"> </canvas>
<script>
  var canvas = document.getElementById（&#39;mycanvas&#39;）;
  var context = canvas.getContext（&#39;2d&#39;）;
  var centerx = canvas.width / 2;
  var Centery = canvas.height / 2;
  var半徑= 70;

  context.beginath（）;
  context.arc（centrx，Centery，Radius，0，2 * Math.pi，false）;
  context.fillstyle =&#39;green&#39;;
  context.fill（）;
</script>

SVG在DOM中

如果您熟悉Click和Mousedown等DOM事件，那麼這些事件也可以在SVG中提供。在這方面，與

並沒有大不相同。

 <svg viewbox="“">
  
  <circle cx="“" cy="“" r="“"></circle>
  
  <script>
    document.queryselector（&#39;circle&#39;）。 addeventListener（&#39;click&#39;，e => {
      e.target.Style.fill =“ red”;
    }）;
  </script>
  
</svg>

SVG可訪問性

您可以為畫布提供文字替代方案：

 <canvas aria-label="“" hello aria world img> </canvas>

您也可以在SVG中執行此操作，但是由於SVG及其膽量可以在DOM中，因此我們通常認為SVG是您嘗試建立可訪問的體驗時所使用的。在換句話說，您可以構建一個SVG，輔助技術可以訪問並找到具有自己的聽覺解釋等的鏈接和子元素。

文字也牢固地在SVG領域。 SVG的字面意思具有元素，該元素可訪問且視覺上清晰 - 與文字通常模糊的畫布不同。

像素的畫布

正如您在下面的Sarah Dranser的比較中看到的那樣，畫布是一種說跳舞，像素，舞蹈的方式！ 。這是一種有趣的方式來解釋該概念比任何干燥的技術情緒都能做得更好。

高度互動的作品具有很多複雜的細節和梯度，是畫布的領域。因此，您會看到用畫布構建的遊戲比SVG更多的原因，儘管總是有例外（請注意，該遊戲的簡單矢量y-）。

CSS可以與SVG一起玩

我們上面看到SVG可以在DOM中，JavaScript可以進入那裡並做事。這個故事與CSS相似。

 <svg viewbox="“">
  
  <circle cx="“" cy="“" r="“"></circle>
  
  
    圓{填充：藍色； }
  
  
</svg>

請注意，對於這些示例，我如何將<script>和<syter>塊放在<svg>中，這是有效的。但是，假設您已經將SVG從字面上的HTML中放入，則可以將其移出，或者讓其他外部CSS和JavaScript做同樣的事情。</script>

我們有大量的SVG性質和CSS指南。但是，很高興知道，SVG仍然可以使用CSS很棒的東西，例如：Hover State和Animation！

組合

從技術上講，它們並非完全相互排斥。可以將

正如布萊克·鮑恩（Blake Bowen）所證明的那樣，您甚至可以將SVG放在帆布上非常清脆！

露絲·約翰的比較

莎拉·德拉斯納（Sarah Drasner）的比較

從此推文中提出。

	DOM/虛擬DOM	帆布
優點
	非常適合UI/UX動畫	舞蹈，像素，跳舞！
	非常適合SVG，這是獨立的解決方案	非常適合真正令人印象深刻的3D或身臨其境的東西
	更容易調試	噸物品的運動
缺點
	帶很多物體的坦克	更難使訪問
	因為您必須關心昏迷的方式	開箱即用的分辨率不是獨立的
		一無所有

Shirley Wu的比較

從此推文中提出。

	SVG	帆布
優點	容易開始	非常表現
	更容易註冊用戶交互	易於更新
	容易動畫
缺點	潛在復雜的DOM	更多工作要開始
	不適合大量元素的表現	處理互動的更多工作
		必須編寫自定義動畫

許多人認為場景具有許多物體（如雪莉所說的1,000個）是畫布的領土。

SVG是默認選擇；畫布是備份

強烈的看法，但對我來說感覺很正確：

回答它的一種極為基本的方法是“當您無法使用SVG時使用帆布”（“不能”可能意味著動畫數千個對象，單獨操縱每個像素等）。換句話說，SVG應該是您的默認選擇，可以使用您的備份計劃。

- 本傑明·德克（Benjamin de Cock）（@bdc）2019年10月2日

包起來

因此，如果我們重新審視前兩個要點……

• 有點平淡的圖標？ SVG進入DOM，因此類似於按鈕內的圖標對SVG很有意義 - 更不用說它可以由CSS控制，並具有常規的JavaScript事件處理程序和其他東西
• 類似遊戲機的遊戲？這將有很多動人的元素，複雜的動畫和互動，性能注意事項。這些是畫布擅長的東西。

但是這裡有很多中間立場。作為日常的網頁設計師/開發人員，我發現SVG在實際級別上更有用。我不確定我在畫布上做過任何生產工作。部分原因是我不知道帆布。我寫了一本關於SVG的書，所以我在那方面做了更多的研究，但是我足夠知道SVG正在為我的需求做正確的事情。

以上是何時使用SVG與何時使用帆布的詳細內容。更多資訊請關注PHP中文網其他相關文章！