SVG中的路径概念可以是一个形状的外框，也可以是用来裁剪的线条，这个线条可以被描边，封闭时还可以被填充。

路径和折线或多边形不同之处在于，路径可以是直线也可以曲线，因此使用路径可以构造更为复杂的几何图形。

我们可以把路径看成是手工绘图的笔迹，可以用点的集合和绘制方式（如线段或圆弧）来描述。

path 标签

path 标签用来创建一条路径，路径元素的基本属性是路径数据，用 d='path data' 语法来定义。路径数据中包含了点集和绘制指令。

点集就是一组“x y”格式的坐标，以空格隔开，以指令字母开头。指令可以有如下几种：

• 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 关闭路径

例子1 - 三角形

代码如下：

<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" />
</svg>

代码解释如下：

• 首先移动到坐标(150,0)，接着连线到坐标(75,200)，再接着连线到坐标(225,220)，最后结束路径回到起点(150,0)。

例子2 - 贝塞尔曲线

贝塞尔曲线是计算机矢量图形学中曲线绘制的基础，一般的矢量图形软件通过它来精确画出曲线。

贝塞尔曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在Photoshop里看到的钢笔工具就是来做这种矢量曲线的。

多个贝塞尔曲线连接起来就可以拟合出真实感的手绘曲线。而这通过鼠标绘制是难以完成的。

三次贝塞尔曲线（Cubic）使用4个点，2个端点和2个控制点来控制曲线绘制

二次贝塞尔曲线使用3个点来控制曲线的绘制，即2个端点和中间的控制点，通过移动控制点来改变曲线。如下所示：

代码如下：

<svg height="400" width="450"><path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" /><path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" /><path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" /><path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" /><!-- 标注起点、终点和控制点 --><g stroke="black" stroke-width="3" fill="black"><circle id="pointA" cx="100" cy="350" r="3" /><circle id="pointB" cx="250" cy="50" r="3" /><circle id="pointC" cx="400" cy="350" r="3" /></g><!-- 给点加上文本标签 --><g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle"><text x="100" y="350" dx="-30">A</text><text x="250" y="50" dy="-10">B</text><text x="400" y="350" dx="30">C</text></g>
</svg>

代码解释如下：

• 中间的蓝色曲线是二次贝塞尔曲线，使用小写q指令绘制，其他线条和圆点是用来辅助说明贝塞尔曲线的数学原理的。
• A是起点、C是终点，B是中间控制点。
• 注意小写l指令使用相对位移来进行连线，比如“l 150 -300”，代表从当前点x方向向右（正方向）移动150，y方向向上（负方向）移动300。小写q指令语法类似。