SVG概念

svg(scalable vector graphics)，可伸缩矢量图形，使用XML格式定义图形。
svg图像在放大或改变尺寸的情况下其图形质量不会有所损失。

优势：

• 与JPEG和gif比较，尺寸更小，且可压缩性更强
• svg是可伸缩的
• 图像在任何分辨率下也是可以打印高质量打印
• svg可在图像质量不下降的情况下被放大
• 图像中的文本是可选的，同时也是可搜索的（适合制作地图）
• 可以与Java技术一起运行
• svg问价是纯粹的XML

浏览器支持问题：

Firefox、chrome、opera、Safari和ie9+都支持
IE8-需要Adobe SVG浏览器插件

SVG的引用

• svg文件可以通过<embed> / <object> / <iframe> 标签嵌入html文档
• 可以直接嵌入到html页面中，或者直接连接到svg文件

---

引用方式解析：

1、使用<embed> 标签
- 优势：所有主流浏览器都支持，并允许使用脚本
- 缺点：不推荐在html4和XHTML中使用（但在html5允许）

<embed src="rect.svg" type="images/svg+xml" />

2、使用<object> 标签
- 优势：所有主流浏览器都支持，并支持html4、XHTML和html5标准
- 缺点：不允许使用脚本

<object data="rect.svg" type="images/svg+xml"></object>

3、使用<iframe> 标签
- 优势：所有主流浏览器都支持，并允许使用脚本
- 缺点：不推荐在html4和XHTML中使用（但在html5允许）

<iframe src="rect.svg"></iframe >

4、链接到svg文件
可以使用<a> 标签链接到一个svg文件

<a href="rect.svg"></a>

5、直接在html嵌入svg代码
在Firefox、chrome、opera、Safari和ie9+中，可以直接在html中嵌入svg代码。