学习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>