矢量图

矢量图与普通图片不同之处在于，无论你怎么放大，图片仍然是清晰的。
为什么可以这样呢？
其实，矢量图是由定好的数据生成的。
每次的放大，都会对组成图像的各个点，进行重新计算，产生新的一张图，不会因为放大而变的不清晰。
顺便一提，矢量图的有它自己的后缀
比如：
.cdr
.svg
.ai
下面具体来看一下svg后缀的矢量图

如果用浏览器打开svg矢量图：（这里涉及到一些XML的知识，不过有接触过前端的朋友理解起来都没问题）



浏览器把图片的信息给解析出来了：

1. fill="#444444" 表示边框的颜色——fill 填充颜色
   
2. path 标签是用来定义路径的
   具体来看一个简单的例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

上面的例子定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。
浏览器打开后：

上例转自：http://www.w3school.com.cn/svg/svg_path.asp

默认填充颜色是黑色
如果这样：