可缩放矢量图形SVG的使用

1 使用背景

   响应式设计主要用来解决网页在不同大小的屏幕的显示问题，对于普通的位图，我们需要为不同的屏幕提供多种不同大小的图片。SVG最有用的一点是与分辨率无关的，这意味着我们不需要关心设备有多少像素，浏览器总是会对图像进行缩放并优化让它看起来很好。

2 SVG基本介绍

    1）定义 – 使用 XML 来描述二维图形和绘图程序的语言

          SVG 指可伸缩矢量图形 (Scalable Vector Graphics), 用来定义用于网络的基于矢量的图形。它使用 XML 格式定义图形，在放大或改变尺寸的情况下其图形质量不会有所损失。

    2）优势 – 尺寸更小，可压缩性更强，可用记事本等工具进行修改，相对于FLASH兼容性较好

    3）SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。

          1）<embed src="rect.svg" width="300" height="100" type="image/svg&#