首页 > 代码库 > 学习SVG系列(1):SVG基础
学习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="http://www.mamicode.com/rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="指向下载插件的URL" />
2、使用<object>标签
<object data="http://www.mamicode.com/rect.svg" width="300" height="100" type="image/svg" codebase="指向下载插件的URL" />
3、使用iframe标签
<iframe src="http://www.mamicode.com/rect.svg" width="300" height="100"></iframe>
学习SVG系列(1):SVG基础