svg 介绍

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着图片放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』

svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。

svg 提供一些标签来表达常用的基本图形，如 <circle/><rect/><ellipse/><line/><polygon/><polyline/><path/>，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。

表达图形的具体属性不作介绍，请自行查阅资料。

有些属性可以放在CSS中：

有些则只能写在标签里，如下：

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。

上文中的示例： 链接

SVG教程 | MDN

SVG 教程 | 菜鸟教程

svg跟html标签一样使用就可以了，<div><svg><path></path></svg></div>

或者你也可以直接在百度搜索《如何在HTML5中使用SVG》第一条就说得很详细，用SVG画直线，画圆，椭圆，矩形。里面都有详细的介绍.

亲爱的提问朋友，html5中常用的两种绘图元素是：Canvas和SVG。

他们都是html5中支持在画布上绘制图形和放入图片的。

Canvas 是H5新出来的标签<canvas></canvas>

Canvas画布，利用JavaScript在网页绘制图像

在标签中给上宽高：<canvas width="800" height="800"></canvas> 

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XML  出来的时间比较老

SVG 用来定义用于网格的基于矢量的图形。

---