SVG 是 XML 语言的一种形式，有点类似 XHTML，它可以用来绘制矢量图形。

SVG 与 Canvas 类似，都是用于绘制图形，区别在于 Canvas 是非矢量的，而 SVG 是矢量的，并且 SVG 比 Canvas 有更丰富的效果。

使用 SVG 的几种方法：

  • 使用 SVG 元素直接嵌入到 HTML 中

  • img 元素引入

  • CSS 背景图片引入

  • object 元素引入

  • iframe 元素引入

SVG 坐标以页面的左上角为(0,0)坐标点。x轴正方向是向右，y轴正方向是向下。

viewBox 属性用于指定想看 SVG 的哪一部分。

<circle> 标签用来绘制圆形。

<line> 标签用来绘制直线。

<polyline> 标签用于绘制一根折线。

<rect> 标签用于绘制矩形。

<ellipse> 标签用于绘制椭圆。

<polygon> 标签用于绘制多边形。

<path> 标签用于制路径。