SVG入门-标签1

概述：

---

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，具有体积较小，且不管放大多少倍都不会失真的优点。

SVG可以直接以DOM节点的形式，插入到页面中显示，跟其他DOM节点一样可以设置样式和通过JS操作；也可以嵌入到 <iframe> <embed>标签中显示；同时还有一个比较关键的功能是svg可以不经格式化直接转换为base64。

<img src="data:image/svg+xml;base64,[data]">

坐标：

---

画布

---

对于所有元素，SVG使用的坐标系统和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

<rect x="0" y="0" width="100" height="100" />

定义一个矩形，即从左上角开始，向右延展100px，向下延展100px，形成一个100*100大的矩形。

---

画布大小

默认情况下，svg的单位为px。在SVG文档中的1px对应输出设备上的1个像素。但是svg实际渲染大小是可以改变的，否则SVG的名字也不会有scalable（可缩放）这个词。如同CSS可以定义字体的绝对大小和相对大小，SVG也可以定义绝对大小，同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。

除此之外，SVG中图形的实际大小还与viewbox有关。

<svg width="100" height="100">

上面的元素定义了一个100*100px的SVG画布，这里1用户单位等同于1屏幕单位。

<svg width="200" height="200" viewBox="0 0 100 100">

这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽100高的区域。这个100100的区域，会放到200200的画布上显示。于是就形成了放大两倍的效果。

语法：

---

SVG也是DOM标签，接下来我们看看SVG包含那些标签。

容器标签

---

<svg>
跟标签，所有svg标签都放在这个标签里面，也只能放在这个标签中，才能当做svg的内容来渲染。

<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r