svg简介与使用

什么是svg

SVG是"Scalable Vector Graphics"的简称。中文可以理解成“可缩放矢量图形”。

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

关键词：SVG是可缩放矢量图形，1999年由万维网联盟发布。于2013年成为W3C推荐标准。

SVG是指可伸缩矢量图形
SVG用来定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或缩小（改变尺寸）的情况下，其图形质量不会受受损失
SVG是W3C的一个标准

与其他图像格式相比，使用SVG的优势在于：

SVG可被非常多的工具读取和修改（比如记事本）
SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量地打印
SVG可在图像质量不下降的情况下被放大
SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG可以与Java技术一起运行
SVG是开放的标准
SVG文件是纯粹的XML

在Web浏览器中显示SVG

SVG文件是纯粹的XML，或许大家更为关心的是如何在Web浏览器中让SVG显示。要在浏览器中显示（前提是浏览器支持），可以通过几种方法来实现：

指向SVG文件地址
将SVG直接嵌套在HTML中
而将SVG图像嵌入到HTML文件有多种方法：

假设有一个 svg文件如下：

xxx.svg

使用< iframe>元素来嵌入SVG图像

使用< img>元素来嵌入SVG图像

将SVG图像作为背景图像嵌入

div {
background: url('http://www.w3cplus.com/sites/default/files/blogs/2014/1411/girls.svg') no-repeat center;
background-size : 200px 200px;
}

直接使用< svg>元素

使用< embed>元素来嵌入SVG图像

使用< object>元素来嵌入SVG图像