1998年，万维网联盟成立了一个工作小组，负责开发作为XML应用的矢量图形表示方式。由于SVG是XML程序，所以图像的有关信息被存储为纯文本。并且他还具有XML的开放性、可交互性以及可移植性。
CAD和图形设计程序通常会使用特定的二进制格式存储绘图信息。当他们拥有导入和导出SVG图像的功能之后，这类应用程序就有了一个通用的标准交换格式来交换信息。
由于SVG是一个XML应用。因此它能够与其他XML处理程序结合使用。比如：数学教科书可以使用XSL来对说明性文本进行格式化对象，使用MATHXL描述方程，以及使用SVG为方程生成图表。
SVG工作组制定的规范是一个万维网联盟官方的推荐规范。在WEB中，许多浏览器都原生支持SVG。并且SVG具有与很多HTML中CSS样式相同的变换和动画能力。由于SVG文件就是XML。因此其中的文本可以被使用任何能够解析XML的用户代理读取显示。
1. 创建一个SVG图像
这篇博客将会带你手把手绘制一个小猫咪，用SVG。
2. 文档结构
我们这个小猫咪是用HTML中的SVG标签展示的，为了方便大家理解，我将这个小猫咪分成以下几种结构，下面我将拆分开来以下几种结构，依次好好讲解这个小猫咪的画法。
- 头部
- 眼睛
- 胡子
- 耳朵
- 嘴巴
- 鼻子
基本形状（头部）
你可以在SVG标签里面添加一个circle标签，来绘制圆形形状。这个元素属性指定中心点X和Y坐标以及半径。点（0，0）为SVG图像的左上角，水平向右移动的时候，坐标变大，垂直向下移动的时候y坐标变大。
这个圆的位置和尺寸是绘图结构的一部分。绘图的颜色是表现的一部分。按照XML编程规范，为了保持最大的灵活性。应该分离结构和表现。表现信息包含在style属性当中。它的值是一系列表现属性的值。这里我们填充轮廓的画笔为黑色，来让猫的脸变得透明
<svg
width="140"
height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>CAT</title>
<desc>stick figure of a Cat</desc>
<circle cx="70" cy="95" r="50" fill="none" style="stroke: black"></circle>
</svg>
上面的代码段中，title表示元素的内容可以被阅读器显示在标题栏上或者是图像被鼠标指针指向的时候的提示。而desc允许我们为图像定义完整的描述信息。
指定样式属性（眼睛）
接下来我们在上面那个大圆圈的下方添加两个小圆圈作为眼睛，虽然填充颜色和画笔颜色也是表现的一部分。但是SVG允许我们使用单独的标签指定他们。在这个实例中填充轮廓和画笔颜色我们会放在两个不同的属性上面，而不是都放在style里面。
<circle
cx="55"
cy="80"
r="5"
fill="#339933"
style="stroke: black"
></circle>
<circle
cx="85"
cy="80"
r="5"
fill="#339933"
style="stroke: black"
></circle>
这样，我们的眼睛就画好了，并且我们还给它指定了属于自己的颜色。
图形对象分组（胡子）
这里我们首先使用两个<line>元素绘制两条斜线，然后将这两条斜线用g标签包裹起来，这样就有了一个分组，然后我们将分组复制一份调整位置，就生成了我们的胡子了
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black"></line>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black"></line>
</g>
<use
xlink:href="#whiskers"
transform="scale(-1 1) translate(-140 0)"
></use>
- g:创建分组
- use：使用分组
折线图形POLYLINE（嘴巴,耳朵）
POLYLINE元素接受一对x和y坐标作为points属性的值，你可以根据喜好使用空格或者逗号分割这些数值。
<polyline
points="108 62,90 10,70 45,50 10,32 62"
fill="none"
style="stroke: black"
></polyline>
<polyline
points="35 110,45 120,95 120,105 110"
style="stroke: black; fill: none"
></polyline>
路径（鼻子）
我们svg中其实所有的基本形状都是用通用的path路径来绘制的，这个元素被用来以尽量简洁的方式来指定路径或者一系列的直线或者曲线。我们下面的路径翻译过来就是：移动到坐标（75，90）。绘制一条到坐标（65，90）的直线，然后以x为半径5，y半径为10绘制一个椭圆到坐标（75，90）的位置
<path
d="M75 90 L65 90 A 5 10 0 0 0 75 90"
fill="#ffcccc"
style="stroke: black"
></path>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<svg
width="140"
height="170"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>CAT</title>
<desc>stick figure of a Cat</desc>
<!-- head -->
<circle cx="70" cy="95" r="50" fill="none" style="stroke: black"></circle>
<!-- eye -->
<circle
cx="55"
cy="80"
r="5"
fill="#339933"
style="stroke: black"
></circle>
<circle
cx="85"
cy="80"
r="5"
fill="#339933"
style="stroke: black"
></circle>
<!-- whiskers -->
<g id="whiskers">
<line x1="75" y1="95" x2="135" y2="85" style="stroke: black"></line>
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black"></line>
</g>
<use
xlink:href="#whiskers"
transform="scale(-1 1) translate(-140 0)"
></use>
<!-- ears -->
<polyline
points="108 62,90 10,70 45,50 10,32 62"
fill="none"
style="stroke: black"
></polyline>
<!-- mouse -->
<polyline
points="35 110,45 120,95 120,105 110"
style="stroke: black; fill: none"
></polyline>
<!-- nouse -->
<path
d="M75 90 L65 90 A 5 10 0 0 0 75 90"
fill="#ffcccc"
style="stroke: black"
></path>
<!-- label -->
<text
x="60"
y="165"
style="
font-family: sans-serif;
font-size: 14pt;
stroke: none;
fill: black;
"
></text>
</svg>
</body>
</html>
参考文献
- SVG精髓【第二版】
