SVG
概述
SVG可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅、简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。SVG 图像及其相关行为被定义于 XML 文本，这意味着可以对其进行搜索、索引、编写脚本以及压缩。和传统的点阵图像（JPEG、PNGt等）不同，SVG格式提供的是矢量图，这意味着它能够被无限放大而不失真。SVG 是由W3C于1999年开发的开放标准，但由于浏览器兼容问题（尤其是IE），一直未被广泛应用；
在图标字体领域，比如 FontAwesome 上，越来越多的设计师们现在更喜欢使用 SVG 图像，因为它更小，并且可以使用多色图标。
SVG图像示例
// 定义一个 10 x 10 像素的蓝色矩形图像
<svg width="10" height="10">
<rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>
使用SVG
和使用其他图像格式一样：
<img src="image.svg" alt="My SVG image" />
SVG元素
svg图像是各种点、线、面等元素构成，如下是svg中的常用元素
text: 创建一个 text 元素
circle: 创建一个圆
rect: 创建一个矩形
line: 创建一条线
path: 在两点之间创建一条路径
textPath: 在两点之间创建一条路径，并创建一个链接文本元素
polygon: 允许创建任意类型的多边形
g: 单独的元素
SVG viewport 和 viewBox
SVG元素大小由属性 width 和 height 设置，单位默认为像素，也可以使用其他常用单位，如 % 或 em，即viewport；
通常 “container” 指的是浏览器窗口，但svg元素可以包含其他svg元素，在这种情况下，容器是父元素svg。
一个重要的属性是 viewBox。它允许您在 SVG 画布中定义一个新的坐标系统。
假设在 200x200px SVG 中有一个简单的圆：
<svg width="200" height="200">
<circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>
通过指定 viewBox ，可以选择只显示此 SVG 的一部分。例如，可以从 0，0 点开始，只显示一个 100 x 100 px 画布：
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>
从 100，100 开始，会看到另一部分，圆圈的右下角：
<svg width="200" height="200" viewBox="100 100 100 100">
<circle cx="100" cy="100" r="100" fill="#529fca" />
</svg>
在 Web 网页中插入 SVG
将 SVG 添加到网页中有多种方法。
1.0> 使用 img 标签
<img src="flag.svg" alt="Flag" />
2.0> 使用 css background-image 属性
background-image: url(flag.svg);
3.0> 在 HTML 中内联
<svg width="300" height="200" viewBox="0 0 300 200"
version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Italian Flag</title>
<desc>By Flavio Copes https://flaviocopes.com</desc>
<g id="flag">
<rect fill="green" x="0" y="0" width="100" height="200"></rect>
<rect fill="white" x="100" y="0" width="100" height="200"></rect>
<rect fill="red" x="200" y="0" width="100" height="200"></rect>
</g>
</svg>
4.0> 使用带有 object 、iframe 或 embed 标签
<object data="flag.svg" type="image/svg+xml"></object>
<iframe src="flag.svg" frameborder="0"></iframe>
<embed src="flag.svg" type="" />
使用 embed，您可以使用以下命令从父文档获取 SVG 文档
document.getElementById('my-svg-embed').getSVGDocument()
在 SVG 内部，您可以通过以下方式引用父文档：
window.parent.document
5.0> 使用数据 URL 内联 SVG
可以使用以上任何示例结合 Data URLs 将 SVG 内联到 HTML 中：
<img src="data:image/svg+xml;<DATA>" alt="Flag" />
<object data="data:image/svg+xml;<DATA>" type="image/svg+xml"></object>
<iframe data="data:image/svg+xml;<DATA>" frameborder="0"></iframe>
在 CSS 中也是：
.svg-background {
background-image: url("data:image/svg+xml;<DATA>");
}
只需使用适当的Data URL 更改<DATA>。
SVG样式设置
任何 SVG 元素都可以接受 style 样式，就像 HTML标签一样；但并非所有 CSS 属性都能如预期那样工作。例如，要更改文本元素的颜色，请使用 fill 而不是 color。
<svg>
<text x="5" y="30" style="fill: green">A nice text</text>
</svg>
<svg>
<text x="5" y="70" style="fill: green; font-family: Courier New">
A nice text
</text>
</svg>
也可以使用 fill 作为元素属性：
<svg>
<text x="5" y="70" fill="green">A nice text</text>
</svg>
其他公共属性包括
fill-opacity，背景颜色不透明度stroke，定义边框颜色stroke-width，设置边框宽度
CSS、JavaSCript 与 SVG 交互
1.0> CSS 嵌入 SVG
<svg>
<style>
<![CDATA[
#my-rect { fill: blue; }
]]>
</style>
<rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>
1.1> SVG 文件可以包括外部样式表
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width=".." height=".." viewBox="..">
<rect id="my-rect" x="0" y="0" width="10" height="10" />
</svg>
2.0> JavaScript 嵌入 SVG
可以将 JavaScript 放在第一个位置上，并包在 load 事件中，以便在页面完全加载并在 DOM 中插入 SVG 时执行它：
<svg>
<script>
<![CDATA[
window.addEventListener("load", () => {
//...
}, false)
]]>
</script>
<rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>
或者如果您将 JS 放在其他 SVG 代码的末尾，可以避免添加事件监听，确保当 SVG 出现在页面时 JavaSCript 会执行：
<svg>
<rect x="0" y="0" width="10" height="10" fill="blue" />
<script>
<![CDATA[
//...
]]>
</script>
</svg>
与 HTML 元素一样，SVG 元素也可以有 id 和 class 属性，因此我们可以使用 Selectors API 来引用它们：
<svg>
<rect x="0" y="0" width="10" height="10" fill="blue"
id="my-rect" class="a-rect" />
<script>
<![CDATA[
console.log(document.getElementsByTagName('rect'))
console.log(document.getElementById('my-rect'))
console.log(document.querySelector('.a-rect'))
console.log(document.querySelectorAll('.a-rect'))
]]>
</script>
</svg>
3.0> SVG 外部的 JavaScript
如果可以与 SVG 交互（SVG 在 HTML 中是内联的），则可以使用 JavaScript 更改任何 SVG 属性，例如：
document.getElementById("my-svg-rect").setAttribute("fill", "black")
4.0> SVG 外部的 CSS
可以使用 CSS 更改 SVG 图像的任何样式，SVG 属性可以很容易地在CSS中被覆盖，因为SVG属性比 CSS 有更低的优先级，它们的行为不像具有更高优先级的内联 CSS
<style>
#my-rect {
fill: red
}
</style>
<svg>
<rect x="0" y="0" width="10" height="10" fill="blue"
id="my-rect" />
</svg>
SVG vs Canvas
与 SVG 主要的不同之处是：画布不是基于矢量的，而是基于像素的，所以Canvas具有与基于像素的 png、jpg 和 gif 图像格式相同的缩放问题。
SVG 符号
符号用于定义一次SVG图像，并在多个地方重用。
如下，可以通过添加一个 symbol 元素并分配一个 id 属性来定义SVG图像：
// 定义svg图像，可以在一个svg标签中通过symbol元素中定义多个svg图像
<svg class="hidden">
<symbol id="rectangle" viewBox="0 0 20 20">
<rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" />
</symbol>
<symbol id="rectangle1" viewBox="0 0 20 20">
<rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" />
</symbol>
</svg>
// 使用已定义好的svg图像
// xlink:href是一个废弃的属性，此处用于支持Safari
<svg>
<use xlink:href="#rectangle" href="#rectangle" />
</svg>
<svg>
<use xlink:href="#rectangle1" href="#rectangle1" />
</svg>
验证 SVG
SVG 文件是 XML，可以用无效的格式编写，有些服务或应用程序可能不接受无效的 SVG 文件。
SVG 可以使用 W3C Validator验证。
参见：
https://developer.mozilla.org/zh-CN/docs/Web/SVG
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/symbol
https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/use
