什么是SVG？——SVG快速入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了什么是SVG？——SVG快速入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在学习一个前端数据可视化D3.js，它的图表绘制是基于SVG的，作为一个小菜鸡，我并不知道什么是SVG，于是我决定把D3.js放一放，先学一下SVG。

那么什么是SVG呢？百度百科上是这么介绍的：“SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。”

看完之后不明觉厉，就像小时候听到函数、方程这种词一样，因为名词太过不接地气，导致还没学就先怂了。不要被不了解的名词吓到，就我自学的感受来说，SVG其实很简单，虽然它是基于XML，但是不了解XML也没关系，毕竟HTML也是标记语言，只要用过HTML绝对能看懂下面的内容。

一、在HTML中使用SVG

（一）可以直接在HTML中嵌入SVG代码

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height: 300px; width: 500px">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
</body>

xmlns是命名空间，不了解XML的可能不知道是什么意思，无所谓，这个参数是固定的，照着写就行了。

通过上面的代码就能在页面中绘制一个圆形

svg,前端用到的工具库,前端

（二）单独建一个SVG文件，并在HTML中引入

建一个example1.svg文件，内容如下：

<svg version="1.1" baseProfile="full"  width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" stroke="black" stroke-width="4" fill="grey" />
  <text x="150" y="115" font-size="20" text-anchor="middle" fill="red">SVG NB</text>
</svg>

然后在HTML通过标签引入：

<iframe src="example1.svg" style="width: 350px; height: 250px"></iframe>
<embed src="example2.svg" type="image/svg+xml" />
<object data="example3.svg" type="image/svg+xml"></object>

这三种标签都适用于HTML5标准，并且目前大部分浏览器都是支持的。

效果为：

svg,前端用到的工具库,前端

当然也可以用“<a>”标签做一个链接，连到SVG文件

<a href="example1.svg">SVG文件</a>

二、基础形状标签

SVG提供了一些标签来帮助我们快速绘制常用形状。

（一）矩形

<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

样式的设置也非常简单，和CSS的行内样式表一样，属性名也都基本和在HTML中使用CSS时相同，如上。目前我所用到的唯一不同的是矩形圆角用rx和ry这两个属性进行设置。

把style=“”去掉，全部写成属性=值的形式也是可以的，如下：

<rect width="300" height="100" fill=rgb(0,0,255) stroke-width=1 stroke=rgb(0,0,0)/>

（二）圆形

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

cx和cy定义圆心的位置，不设置的话就是(0,0)，r是半径。

（三）椭圆

<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>

椭圆跟圆的区别是椭圆有长轴和短轴，所以有两个属性rx和ry分别表示水平轴和垂直轴的长度

（四）直线

<line x1="0" y1="0" x2="200" y2="200"/>

直线也很简单，用两组(x,y)坐标分别设置起点和终点即可。

（五）折线

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>

折线其实也不复杂，就比直线多定义几个点而已，注意每组点之间用空格隔开而不是分号。

（六）多边形

多边形稍微复杂一点点，它跟折线很像，也是定义一些点，只不过最后一个点会和第一个点连起来，形成一个封闭图形。

关键在于fill-rule属性，该属性用来如何判断画布上的某区域是否属于该图形“内部”（内部区域将被填充），当然，对三角形或矩形这种路径没有交叉的简单图形，不需要使用该属性，下面的例子是一个五角星。

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

1.fill-rule默认是nonzero，它的规则就是要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。

svg,前端用到的工具库,前端

比如上图中的P点和从P点做的射线，经过了两条图形的路径BC和EA，两条路径均是从右向左穿过射线，所以计数为2，认为该点在内部。

2.fill-rule的另一个值是evenodd，也是做射线，但是做完之后数和图形路径的交点个数，奇数就认为是在内部，偶数就认为在外部。所以将上面代码中的fill-rule改成evenodd后就变成了下面的效果。

svg,前端用到的工具库,前端

（七）路径

路径和折线的区别在于折线是用直线把点连起来，而路径可以通过参数绘制出光滑的曲线。路径可以实现折线的效果，但折线却并不能替代路径。

路径算是这些标签里面最复杂的一个，参数非常多，而且使用不同参数时，后面所跟的点的个数也不相同，我想在自己尝试了所有不同的路径参数之后，单独写一篇文章对路径做一个详细介绍，下面只是做个入门。路径的详细讲解文章已经发布，链接为：

<path d="M 0 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />

svg,前端用到的工具库,前端

参数如下：可以用小写字母，但是含义不一样，大写表示绝对绝对定位，而小写表示相对定位。

M = moveto 起始
L = lineto 连线
H = horizontal lineto 水平线
V = vertical lineto 垂直线
C = curveto 曲线，三次贝塞尔曲线
S = smooth curveto 也是曲线，三次贝塞尔曲线
Q = quadratic Bézier curve 二次贝塞尔曲线
T = smooth quadratic Bézier curveto 二次贝塞尔曲线
A = elliptical Arc 椭圆弧
Z = closepath 闭合（从最后一个点连直线到起始点）

所以上面代码的意思就是从(0, 350)出发，使用二次贝塞尔曲线分别由(150,-300)控制点控制最终到达(300, 0)结束点，不闭合。（注意用的是小写的q，所以这里的(150, -300)和(300, 0)是相对于起点而言的，和起点的(0, 350)不是同一个坐标系）。这里只是粗略介绍一下，路径所有命令的详细解析会在下一篇文章中。

三、文本标签

基本用法很简单，和HTML一样在开始和结束标签中间写文本就行。

（一）子文本

每个<tspan>和和<text>一样，单独占一行，而且可以有自己的样式。但是必须包在<text>标签内，不能单独用。

<text x="10" y="20" style="fill:rgb(0, 174, 255);">峰兄兄:
    <tspan x="10" y="45">菜鸡程序员</tspan>
    <tspan x="10" y="70">正在努力中</tspan>
</text>

svg,前端用到的工具库,前端

（二）旋转文字

<text x="10" y="45" transform="rotate(90 20,40)">正在努力中</text>

rotate中的三个参数分别是顺时针旋转的度数、垂直、水平平移的距离（正值表示向上、向右）

svg,前端用到的工具库,前端

（三）文字沿路径

定义一条路径，然后通过textPath标签进行设置即可

<defs>
    <path id="path1" d="M 0 100 q 100 80 200 0" stroke="blue" stroke-width="5" fill="none" />
</defs>
<text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">祝你天天开心，都有好心情</textPath>
</text>

svg,前端用到的工具库,前端