一. SVG是什么？
- SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
- SVG 图形在放大或者改变尺寸的情况下，其图形的质量不会有所损失。
- SVG 使用 XML 格式定义图形。
- SVG 文件是纯粹的 XML。
- SVG 是万维网联盟的标准。
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
二. 代码解释（书p138实例）
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
- XML
Extentsible Markup Language(可扩展标记语言)，用来定义其它语言的一种元语言，其前身是SGML(标准通用标记语言)。它没有标签集(tag set)，也没有语法规则(grammatical rule)，但是它有句法规则(syntax rule)。
▲XML和HTML的区别
① XML不是HTML的替代品，XML和HTML是两种不同用途的语言。
② XML是用来描述数据的，重点是:什么是数据，如何存放数据。
③ HTML是用来显示数据的，重点是:显示数据以及如何显示数据更好上面。
④ HTML是与显示信息相关的, XML则是与描述信息相关的。
-
version="1.0"定义所使用的SVG版本 -
standalone="no"standalone 这个属性规定这个 SVG 文件是否是“独立的”，还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的，会引用外部文件。
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-
width="198px" height="188px" viewBox="0 0 198 188"
SVG的根元素：width、height和viewbox属性
▲viewbox（视框）
| 解释 | 定义了SVG中所有形状都需要遵循的坐标系 |
|---|---|
| 值 | 包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开 |
| 属性 | △preserveAspectRatio属性表示是否强制进行统一缩放 |
| 可用元素 | <svg><symbol><image><marker><pattern><view> |
▲▲▲ 命名空间
-
xmlns="http://www.w3.org/2000/svg"
https://www.w3.org/2000/svg是一个XML名称空间，最早在SVG1.0规范中定义，随着2.0/3.0等版本更新其名称是可变的。随着W3C技术报告的发布逐渐添加名称。 -
xmlns:xlink="http://www.w3.org/1999/xlink"
https://www.w3.org/1999/xlink是XML链接语言（XLink）规范中定义的XML名称空间 。 - 声明命名空间
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>
命名空间声明由xmlns属性提供。此属性表示<svg>标记及其子标记属于名称空间为“http://www.w3.org/2000/svg”的XML方言，当然，它是SVG。注意，命名空间声明只需要在根标记上提供一次。声明定义了默认命名空间，因此用户代理知道所有<svg>标签的后代标签也属于同一命名空间。用户代理检查他们是否属于同一个命名空间，如果是的话才去如何处理命名空间下的标签标记。
注意，命名空间名称只是字符串，尽管SVG命名空间名称看起来像URI，但这并不重要。URI通常被使用，因为它们是唯一的，目的不是“链接”某处。（事实上，URI经常使用，通常使用术语“命名空间URI”而不是“命名空间名称”。）
- 重新声明默认命名空间
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- some XHTML tags here -->
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<!-- some SVG tags here -->
</svg>
<!-- some XHTML tags here -->
</body>
</html>
在此示例中，根<html>标签上的xmlns属性将默认名称空间声明为XHTML。因此，除了<svg>标记，用户代理将其及其所有子标记解释为属于XHTML。 <svg>标记具有自己的xmlns属性，通过重新声明默认命名空间，这告诉用户代理，<svg>标记及其后代（除非他们也重新编写默认命名空间）属于SVG。
- 声明命名空间前缀
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>
命名空间前缀用于前缀属性名称和标签名称。这是通过在属性名称之前放置命名空间前缀和冒号来实现的，如上例中的<script>标记所示。这告诉用户代理该特定属性属于分配给命名空间前缀（XLink）的命名空间，并且它是可以用于具有相同含义的其他标记上。
请注意，使用未绑定到命名空间名称前缀是XML错误。尽管xlink：href属性不会导致错误，但上面示例中由xmlns：xlink属性创建的绑定是绝对必要的。这个XLink属性在SVG中经常在<a>，<use>和<image>标签等中使用，所以最好在文档中始终包含XLink声明。
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-
stroke图形轮廓的颜色
stroke-width图形轮廓的宽度
这两个属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 1px 宽，边框无填充颜色。 -
fill填充颜色（设置形状内的颜色） -
fill-rule填充规则
| 解释 | 如何判断路径的哪一侧在路径所构成的形状的内部，从而判断fill属性如何给这个形状上色。 |
|---|---|
| 类别 | 外观属性 |
| 值 | nonzero / evenodd / inherit |
-
nonzero
这个值确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。开始于0数，射线上每次从左向右相交就加1，每次从右向左相交就减1。数一下相交次数，如果结果是0，点就在路径外面，否则认为，点在路径里面。
nonzero "非零" -
evenodd
这个值用确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线，并数一数给定形状与射线相交的路径段的数目，如果数目是奇数的，点在内部，如果数目是偶数的，点在外部。
evenodd "奇偶"
- DTD文件类型
DTD一共有三大类型：
（1）严格型的DTD
在严格型的DTD中，不能再使用各种表现的标记。如：<font>、<b>、<body bgColor>
要求必须使用CSS来取代各种表现标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）过渡型的DTD
在过渡型的DTD中，可以继续使用HTML中的表现的写法。
这些表现标记，还可以继续使用。如：<font>、<b>、<body bgColor> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3）框架的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三. 在web页面中插入SVG
- 使用img标签
<img src="xxxx.svg" alt="对图片的文字描述">
- 使用object标签
<object data="img/svgfile.svg" type="image/svg+xml">
data属性是你链接SVG资源的方式
type属性描述了内容的MIME类型
image/svg+xml是SVG的MIME类型（互联网媒体类型：其消息能包括文本、图像、音频、视频以及其他应用程序专用的数据）
- 把SVG作为背景图像插入
-
内联不同插入方式下可以使用的功能.png
四. 添加样式和动画
- 使用外部样式表为SVG添加样式
1. <link href="styles.css" type="text/css" rel="stylesheet"/>
2. <?xml-stylesheet href="styles.css" type="text/css"?> ◀better！
- 使用内联样式为SVG添加样式
<defs>
<style type="text/css">
<![CDATA[
#star_path {
stroke: red;
}
]]>
</style>
</defs>
- 用CSS为SVG添加动画
animation-动画
.star_Wrapper {
animation: spin 2s 1s;
transform-origin: 50% 50%;
}
