学习SVG系列（1）：SVG基础

什么是SVG？

1、指可伸缩矢量图形

2、用来定义用于网络的基于矢量的图形

3、使用XML格式定义图形

4、图像在放大或改变尺寸的情况下其图形不会有所损失

5、万维网联盟的标准， 用于描述二维矢量图形的一种图形格式

SVG的优势

1、可被非常多的工具读取和修改（比如记事本）

2、与JPEG和GIF图像比起来，尺寸更小，且压缩性强

3、可伸缩

4、图像可在任何的分辨率下被高质量打印

5、可以在图像质量不下降的情况下放大或者缩小

6、图像中的文本是可选的，同时也是可以搜索的（比较适合制作地图）

7、是开放的标准

8、文件是纯粹的XML

9、与Flash相比，最大的优势是与其他的标准相兼容，而Flash则是未开源的私有技术

SVG格式优点

1、基于可扩展标记语言（XML文件）

2、采用文本来描述对象：矢量图形（包括直线，曲线在内的图形）、地阵图像和文本

3、具有交互性和动态性；SVG因为是基于XML的，所以提供了动态交互性，融合了SMIL片段模式，在SVG文件中嵌入动画元素（如运动路径、渐现或渐隐效果、改变颜色等）

4、完全支持DOM

开发:

SVG是一个XML文件，用于XML编程的两种模型DOM和SAX也适用于它。因为SVG是被设计用于互联网，所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML，同样也可以在浏览器中动态地创建、修改和删除图片。

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声明，standalone属性规定SVG文件是否是“独立的”，standalone="no",表示会引用一个外部文件，在这里dtd文件

　　SVG代码以<svg>元素开始，包括开启标签<svg>和</svg>中，width和height属性分别用于设置SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间

　　circle用于创建一个园，cx和cy用于设置坐标位置，r用于设置园的半径，stroke用于设置轮廓边界的颜色，stroke-width设置轮廓的宽度，fill用于填充园的颜色。

SVG文件引用：

1、用<emded>标签<emded src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="指向下载插件的URL" />

2、使用<object>标签

<object data="rect.svg" width="300" height="100" type="image/svg" codebase="指向下载插件的URL" />

3、使用iframe标签

<iframe src="rect.svg" width="300" height="100"></iframe>