初识svg

什么是svg？

SVG全称Scalable Vector Graphics,指可伸缩矢量图形.

什么是矢量图？

计算机中显示的图形一般可以分为两大类：位图，矢量图。 平时拍的照片就是位图，它是由一个个像素点组成，放大后就是马赛克。 而矢量图只能靠软件生成，也就是需要设计师来创造出的图像，其元素对象可编辑，图像放大或缩小不影响图像的分辨率， 说白点也就是再怎么放大也不会有马赛克或锯齿。因为它本来就是人用软件创造出的图形。

SVG优点：

SVG 是一种基于 XML 语法的图像格式，其他图像格式都是基于像素处理的， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG简单的标签及属性

• SVG 代码都放在顶层标签svg之中。
• svg标签的width和height属性，如果不指定的话默认的是宽300px，高150px;
• 如果只想展示SVG图像的一部分，就要指定viewBox属性。属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。
• circle标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于svg标签画布的左上角原点。
• SVG 的 CSS 属性与网页元素有所不同。
• fill:填充色； stroke:描边色； stroke-width:边框宽度

用SVG画图

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

效果如下：

上面代码中，SVG 图像是100像素宽 x 100像素高，viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

注意 ：视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG图像的大小，即放大了四倍。

取消viewBox属性效果如下：

如果只设置viewBox属性，不指定svg的width属性和height属性：

此时你可以看到，SVG 图像的默认大小将等于所在的 HTML 元素的大小。