SVG 自学微笔记(01) - 初步认识 SVG

不定更新、可能烂尾XD

学习资源: W3Schools、其他网路资料

关于 SVG

SVG 全名为 Scalable Vector Graphics 即"可缩放向量图形"，主要特点有这些 :

SVG 图形可自由进行缩放而不影响图形的品质

SVG 图形可经由文字编辑器建立、编辑

因为 SVG 採用 XML 格式进行编辑，而 XML 是以纯文字作为基础的标记式语言

SVG 是 W3C 的推荐标準

(除此之外 SVG 还有其他特点喔!)

浅谈 XML

再补充一下XML是什么吧! XML 是以纯文字为基础的标记式语言(Markup Language)，HTML也是一种标记式语言，但两者间存在不少的差异，像是下面这些 :

所有 XML 的 element 都需要被关闭或标记空白，但 HTML 的 element 未必都要被关闭，像是<img>就不用</img>，但是 XML 需要HTML 有预先定义好的 element 名称像是<h1>(无法自由调整定义)，但 XML 没有预先定义好的 element 名称，可以设计自己想要的 element 名称 (不过以xml为名称开头的 element 还是有特殊意义喔!)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>

(原始码来源 : https://www.w3.org/standards/xml/core)

最后是 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>

SVGCanvas向量图点阵图 (pixel)图形缩放均表现佳图形不适合放大 (失真)可透过 script、CSS 编辑仅能透过 script 编辑使用 XML 格式绘图使用 JavaScript 绘图支援事件处理器不支援事件处理器不适合绘製密集图形适合绘製密集图形初登场 : 2001年初登场: 2004年 (Apple Inc.)

ps. 可以对整个 Canvas 画布注册事件处理器，但个别的 element 不行

参考资料

W3Schools SVG Tutorial
XML ESSENTIALS
WIKIPEDIA Canvas element
Difference between SVG and HTML 5 Canvas
HTML5（十）——Canvas 与 SVG 区别
SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？