ETH官方钱包

前往
大廳
主題

SVG 自學微筆記(01) - 初步認識 SVG

冰抹茶拿鐵 | 2023-02-25 02:34:06 | 巴幣 2 | 人氣 197

關於 SVG
SVG 全名為 Scalable Vector Graphics 即"可縮放向量圖形",主要特點有這些 :
  • SVG 圖形可自由進行縮放而不影響圖形的品質
  • SVG 圖形可經由文字編輯器建立、編輯 (因為 SVG 採用 XML 格式進行編輯,而 XML 是以純文字作為基礎的標記式語言)
  • SVG 是 W3C 的推薦標準  
(除此之外 SVG 還有其他特點喔!)

淺談 XML
再補充一下XML是什麼吧! XML 是以純文字為基礎的標記式語言(Markup Language),HTML也是一種標記式語言,但兩者間存在不少的差異,像是下面這些 :
  1. 所有 XML 的 element 都需要被關閉或標記空白,但 HTML 的 element 未必都要被關閉,像是<img>就不用</img>,但是 XML 需要
  2. HTML 有預先定義好的 element 名稱像是<h1>(無法自由調整定義),但 XML 沒有預先定義好的 element 名稱,可以設計自己想要的 element 名稱 (不過以 xml 為名稱開頭的 element 還是有特殊意義喔!)
  3. HTML 有蠻多預先定義好的字符名稱,但 XML 只有 5 個預先定義好的字符名稱
下面是 XML 的範例 (真的跟 HTML 很像,但有很多自定義的 element 名稱)

<part number="1976">
  <name>Windscreen Wiper</name>
  <description>The Windscreen wiper
    automatically removes rain
    from your windscreen, if it
    should happen to splash there.
    It has a rubber <ref part="1977">blade</ref>
    which can be ordered separately
    if you need to replace it.
  </description>
</part>

最後是 XML 的優點,主要有以下這些 :
  • 格式嚴謹 : XML 的 element 都需要被關閉,像是有`<description>`就必須有`</description>`,雖然這樣有點冗餘,但是電腦可以輕鬆抓出巢狀結構的錯誤
  • 可讀性佳 : XML 是以純文字為基礎的標記式語言,每個 element、attribute 的名稱都可以採用非常直觀的文字,所以每個人都能輕鬆理解其含義
  • 不綁定系統環境 : 除了 SVG 圖形採用 XML 格式之外,其他還有 Android App 設計時的版本資訊、應用權限等等,也都可以採用 XML 格式 (當然還有其他例子~)
SVG 與 Canvas 的差異
如果要用 SVG 和 Canvas 各自繪製一個圓 :
  • SVG
<svg id="svgelem" height="200">
    <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>

  • Canvas
<canvas id="newCanvas" width="200" height="200"></canvas>

<script>
    var c = document.getElementById('newCanvas');
    var ctx = c.getContext('2d');
    ctx.beginPath();
    ctx.arc(60, 60, 50, 0, 2 * Math.PI);
    ctx.fillStyle = "green";
    ctx.fill();
</script>

SVG Canvas
向量圖 點陣圖 (pixel)
圖形縮放均表現佳 圖形不適合放大 (失真)
可透過 script、CSS 編輯 僅能透過 script 編輯
使用 XML 格式繪圖 使用 JavaScript 繪圖
支援事件處理器 不支援事件處理器
不適合繪製密集圖形 適合繪製密集圖形
初登場 : 2001年 初登場: 2004年 (Apple Inc.)
(ps. 可以對整個 Canvas 畫布註冊事件處理器,但個別的 element 不行)

參考資料

創作回應

更多創作