svg入门详解（理论篇）

1、svg是什么？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失。 SVG 是万维网联盟的标准。

2、svg的优点

与其余图像格式相比（好比 JPEG 和 GIF），使用 SVG 的优点在于：

• SVG 图像可经过文本编辑器来建立和修改；
• SVG 图像可被搜索、索引、脚本化或压缩；
• SVG 是可伸缩的；
• SVG 图像可在任何的分辨率下被高质量地打印；
• SVG 可在图像质量不降低的状况下被放大；

3、浏览器支持状况

4、使用方式

一、可在浏览器直接打开； 二、在HTML中的使用； SVG 文件可经过如下标签嵌入 HTML 文档：、 、 和。 SVG的代码能够直接嵌入到HTML页面中，或直接连接到SVG文件。

（1）使用 标签

• 优点：全部主要浏览器都支持，并容许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5容许）

示例：

<embed width="300px" height="300px" src="img/demo.svg" type="image/svg+xml" />
复制代码

（2）使用 标签

• 优点：全部主要浏览器都支持，并支持HTML4，XHTML和HTML5标准
• 缺点：不容许使用脚本。

示例：

<object width="300px" height="300px" data="img/demo.svg" type="image/svg+xml"></object>
复制代码

（3）使用 标签

• 优点：全部主要浏览器都支持，并容许使用脚本
• 缺点：不推荐在HTML4和XHTML中使用（但在HTML5容许）

示例：

<iframe width="300px" height="300px" src="img/demo.svg"></iframe>
复制代码

（4）直接在HTML嵌入SVG代码

示例：

<svg width="500px" height="500px" style="margin:50px;" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" rx="10" ry="10" width="300" height="300" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9;"/> 
</svg>
复制代码

（5）使用标签

示例：

<img src="img/demo.svg" width="300px" height="300px"/>
复制代码

（6）连接到svg文件

示例：

<a href="img/demo.svg">查看svg</a>
复制代码

三、在css中使用

示例：

.container{
  background: white url(img/demo.svg) repeat;
}
复制代码

参考：svg教程