SVG图像解析的使用方法

时间：2014-6-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,并且其背景颜色为银色.