svg图像解析的使用方法
作者：佚名 时间：2014-06-25
在解释如何在页面中使用svg格式之前,我们需要介绍这个图像格式的后台编码.可以看出,svg实际上一个对其所创立的图像进行标记的xml文件,这意味着svg可以在文本编辑器中被查看或手动修改,而这类操作对于位图文件来说基本上是不可能实现的.
在任意编辑器中打开一个svg文件,或在浏览器窗口中查看其源代码,然后检查svg文件的内容.尽管不同文件的实际标记有很大差异,但用户仍然可以查看许多常用元素.首先,所有svg文件都以xml声明开头,这个声明含有用户所使用xml的版本号,编码文本的类函数以及stadalone属性,这个属性将文件设置为引用其他外部文件或与其他文件无关:
<?xml vesion="1.0" encoding="utf-8" standalone="no"?>
接下来介绍svg元素以及一系列包含语法信息的命名空间,下面的救命来自一个随机的svg文件.在这个例可以看到,这个文件使用了都柏林核心元数据术语,并由知识共享组织授权使用.这个svg文件使用rdf,svg和xlink模式来描述其内容:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
svg元素的最简单形式仅需两个属性,即链接到svg命名空间的属性以及用户所使用svg版本的属性:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
svg元素的所有子元素都包含用于创建图像的信息.大多数这些信息都包含在一系列基础数学图形的元素中,这些图形被 用于绘制circle,rect,ellipse,polygon和line.上述每种图形元素都有一系列描述图形位置,尺寸和颜色信息的属性,例如,下面的代码展示了如何绘制一个圆,这个圆中心到网格左端的距离为50px,到网格上端的距离为75px,其半径为25px,粗体加黑宽度为2px,并且其背景颜色为银色.
