SVG简介

SVG意为可缩放矢量图形，全称为Scalable Vector Graphics。

SVG是使用 XML 来描述二维图形和绘图程序的语言。

SVG的使用形式

SVG文件

SVG文件必须以.svg为后缀来保存，具体示例如下：

<?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">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>

第一行包含了 XML 声明。该属性规定此SVG文件是否是“独立的”，或含有对外部文件的引用。第二和第三行引用了这个外部的 SVG DTD。

嵌在HTML中的SVG

SVG可通过多种方式嵌入到HTML中，方式如下：
1. 通过embed的src属性来嵌入SVG。
  
  <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
2. 通过object的data属性来嵌入SVG。
  
  <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
3. 通过iframe标签嵌入SVG。
  
  <iframe src="rect.svg" width="300" height="100"></iframe>
4. 通过img标签的src属性嵌入SVG。
  
  <img src="../image.svg" width="300" />
5. 通过元素的background-image属性嵌入SVG。
  
  div { background-image: url('../image.svg'); }
6. 直接通过在svg标签嵌入到HTML中。
```
<div>
    <svg width='100px' height='100px'>
        <circle cx='10' cy='10' r='5'></circle>
    </svg>
</div>
							
```

SVG中的全局属性

有一些属性在SVG内的元素上是基本通用的，它们是：

stroke属性，定义形状的描边。
stroke-width属性，定义描边的宽度。
opacity属性，定义形状的透明度。
fill属性，定义形状的填充色。
fill-opacity属性，定义形状填充色的透明度。
transform属性，定义svg图形或者坐标的变换。

在SVG中，值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明，那么这个值的数值被认为和px单位的数值一样。

SVG的兼容性

目前除了IE在9之前（不包括9）不支持SVG以外，各大浏览器基本都对SVG进行了支持，详情可参见Caniuse。

SVG简介

SVG的使用形式

SVG文件

嵌在HTML中的SVG

SVG中的全局属性

SVG的兼容性

参考资料