卡卡網(wǎng)

SVG 和 canvas 都是可以在 Web 瀏覽器中繪制內(nèi)容的技術(shù)，因此值得比較和了解什么時(shí)候哪個(gè)更合適。 在本文中，我們將研究何時(shí)使用SVG與何時(shí)使用Canvas。

SVG 是矢量和聲明性的

如果你需要矢量圖，SVG 將是你的選擇。矢量藝術(shù)在視覺(jué)上很清晰，并且文件大小往往比 JPG 等光柵圖形小。

SVG 代碼可以直接放在 HTML 中，就像聲明性繪圖指令：

<svg viewBox="0 0 100 100">
  <circle cx="10" cy="10" r="10" />
</svg>

結(jié)果

如果你非常關(guān)心圖形的靈活性和響應(yīng)能力，那么 SVG 就是最好的選擇。

Canvas 是一個(gè) JavaScript 繪圖 API

你在 HTML 中放置一個(gè)<canvas>元素，然后在 JavaScript 中進(jìn)行繪圖。換句話說(shuō)，你發(fā)出命令來(lái)告訴它如何繪制（這比聲明性更重要）。

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>

結(jié)果

SVG 在 DOM 中

如果你熟悉諸如此類(lèi)的 DOM 事件click，mouseDown，那么這些在 SVG 中也是可用的。在這方面， <circle>與 <div> 并沒(méi)有太大的不同。

<svg viewBox="0 0 100 100">
  
  <circle cx="10" cy="10" r="10" />
  
  <script>
    document.querySelector('circle').addEventListener('click', e => {
      e.target.style.fill = "red";
    });
  </script>
  
</svg>

結(jié)果

SVG 可訪問(wèn)性

你可以使用Canvas替代文本：

<canvas aria-label="Hello WebKaka" role="img"></canvas>

你也可以在 SVG 中做到這一點(diǎn)，但由于 SVG 及其內(nèi)容可以直接在 DOM 中，我們通常認(rèn)為 SVG 是你嘗試構(gòu)建可訪問(wèn)體驗(yàn)時(shí)使用的工具。以另一種方式解釋?zhuān)憧梢詷?gòu)建一個(gè) SVG，輔助技術(shù)可以訪問(wèn)并找到具有自己的聽(tīng)覺(jué)解釋等的鏈接和子元素。

CSS 可以和 SVG 一起玩

我們?cè)谏厦婵吹?SVG 可以在 DOM 中，而 JavaScript 可以進(jìn)入其中并做一些事情。

<svg viewBox="0 0 100 100">
  
  <circle cx="10" cy="10" r="10" />
  
  <style>
    circle { fill: blue; }
  </style>
  
</svg>

結(jié)果

請(qǐng)注意我如何將<script>和<style>塊放在<svg>這些示例中，這是有效的。假設(shè)你已經(jīng)將 SVG 直接放入 HTML 中，你可以將它們移出，或者讓其他外部 CSS 和 JavaScript 做同樣的事情。

CSS 擅長(zhǎng)的東西在 SVG 中仍然是可能的，比如:hover狀態(tài)和動(dòng)畫(huà)！

<svg viewBox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" />
  
  <style>
    circle { fill: blue; animation: pulse 2s alternate infinite; }
    @keyframes pulse {
      100% {
        r: 30;
      }
    }
  </style>
  
  <script>
    document.querySelector('circle').addEventListener('click', e => {
      e.target.style.fill = "red";
    });
  </script>
  
</svg>

結(jié)果

SVG與Canvas優(yōu)缺點(diǎn)比較

下表顯示了SVG與Canvas的優(yōu)缺點(diǎn)比較。

總結(jié)

本文介紹了SVG與Canvas適用于不同的場(chǎng)合。

• 一個(gè)小的純色圖標(biāo)？SVG 在 DOM 中，所以像按鈕內(nèi)的圖標(biāo)這樣的東西對(duì) SVG 來(lái)說(shuō)很有意義——更不用說(shuō)它可以用 CSS 控制并有常規(guī)的 JavaScript 事件處理程序和東西。
• 類(lèi)似控制臺(tái)的交互式游戲？這將包含大量的移動(dòng)元素、復(fù)雜的動(dòng)畫(huà)和交互以及性能方面的考慮。這些都是canvas擅長(zhǎng)的東西。

作為一個(gè)日常的網(wǎng)頁(yè)設(shè)計(jì)師/開(kāi)發(fā)人員，我發(fā)現(xiàn) SVG 在實(shí)踐層面上更有用。我不確定我是否曾經(jīng)在Canvas上做過(guò)任何制作工作。 

相關(guān)文章

• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對(duì)比PNG、JPEG的5大優(yōu)點(diǎn)
• svg circle stroke屬性設(shè)置實(shí)線邊框/虛線邊框/無(wú)邊框
• CSS+SVG：畫(huà)圓并且文字寫(xiě)在圓中間
• CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡(jiǎn)單實(shí)例】
• 純CSS實(shí)現(xiàn)環(huán)形文字效果
• 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡(jiǎn)單實(shí)用】

標(biāo)簽: SVG  Canvas