SVG实战开发学习（一）——基本数据类型和常见框架元素
长度值<length>
长度值是距离的亮度，用实数值或者百分比值来表示。其后可带计量单位。
以下是几个绝对长度值与像素间的换算关系：
点( pt )：1pt=1.25px
英寸（ in ）:1in=90px
毫米（mm）1mm=3.543307px
派卡（pc）1pc=15px
坐标值<coordinate>
坐标值表示坐标系统中的一种长度值，坐标值由X轴方向和Y轴方向值组成。
角度值<angle>
整型数或实型数后跟着角度单位就构成了角度值。角度单位有3种：度（deg）、梯度（grad）、和弧度（rad）。在SVG中，默认单位是度（deg）。
颜色值<color>
颜色值在SVG中可以为"fill"、"stroke"、"stop-color"、"solid-color"、"flood-color"、"ighting-color"等属性赋值。它有两种表示方式：关键字表示法和RGB表示法。
频率值<frequency>
频率值用在声音属性上，由实数值加上频率单位构成，不能为负值。频率单位有Hz（赫兹）和kHz( 千赫兹 )
时间值<time>
时间值由实数值加上时间单位构成，不能为负值。时间单位有s和ms。
<svg>元素
<svg>元素定义了一个矩形区域供客户端的SVG解析器渲染，就如同浏览器通过<html>和</html>元素知道了网页开始和结束一样，<svg>元素帮助SVG解析器获得这个矩形区域的诶之、大小等信息。一份svg文档中可以根据需要包含若干个<svg></svg>对，并且它们之间可以相互嵌套。
<g>元素
<g>元素是一种容器元素，它可以把相关的图形元素组合起来。
引用与<defs>元素
svg规范书建议最好把需要被引用的元素都定义在<defs>中，对于以下这些元素更是如此：" altGlyphDef "、" clipPath "、" cursor "、" cursor "、" filter "、" linearGradient "、" marker "、" mask "、" pattern "、" radialGradient "、" symbol ".
SVG中可以通过URI（统一资源标识符）来实现对其他对象的引用，例如要线性填充一个圆形，你需要定义"linearGradient"元素并且给它一个ID；
<linearGradient id="MyGradient">.....</linearGradient>
然后在应用样式的时候用线性填充的ID"MyGradient"引用它，这里的URL表示统一资源定位符。<circle style="fill:url(#MyGradient)" />
SVG支持两种URI引用。
（1）本地URI引用：使用url( #<elementID> )。
（2）非本地URI引用：使用相对路径或者绝对路径的引用，用于引用其他文件中的资源。
下面是需要注意的引用规则：
URI所引用的资源必须存在，否则视为无效引用；
URI所引用的元素类型必须必须和引用的元素类型匹配，否则视为无效引用。例如" clip-path "属性只能引用" clipPath "元素，如果在clip-path:url(#ERRORElement)这个引用中，引用的元素不是"clipPath",那么将不产生任何效果；
URI间接或直接引用自己都将视为无效的循环引用。
<defs>元素
它与<g>元素很相似，可以装载很多子元素，唯一的区别就在于：<g>中的子元素会被解析渲染后立马显示，而defs中的子元素不会，因为它只是定义。<defs>内的元素在文档解析的时候也不会渲染，只有在引用的时候才渲染，所以重复使用的元素都可以考虑放在<defs>中，这样就可以提高SVG执行效率。
<defs>
<linearGradient id="Gradient01">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#39F" />
</ linearGradient>
<circle cx="52" cy="55" r="39" fill="url(#Gradient01)">
</defs>
<use>元素
SVG中引用的方法不只上述一种，<use>元素也有同样的作用，它也可以引用SVG中的可视化元素，本质就是解析的时候把被引用的元素"克隆"到<use>元素的位置，但是值得注意的是，被引用的元素不会继承<use>元素本身和其父元素的属性。
它有四个可选属性：x、y、height和width，它们用来确定被引用元素的图形内容在给定坐标系的矩形渲染区的位置。语法格式：<use xlink:href="本地URI">，<use>元素不能引用外部文件。
<desc>使用use元素实例</desc>
<defs>
<rect id="MyRect" width="60" height="10">
</defs>
<use x="20" y="10" xlink:href="#MyRect" />
<symbol>元素
<symbol>元素定义了图形模板对象，供<use>元素通过实例化的方法引用。所以没有<use>元素，<symbol>元素活着也没有什么意义。它和<g>元素有什么区别呢？和<desc>元素相同的<symbol>元素定义的图形元素不会被渲染，而<g>元素内定义的图形元素会被渲染；<symbol>元素拥有viewBox和preserveAspectRatio两个属性，可以在<use>元素引用时，对矩形视口(ViewPort)进行缩放，而<g>元素不行。
<desc>元素和<title>元素
这两个元素都是用来描述SVG文档内容的，没有特别的格式要求，也没有属性，放入文字即可，本文对SVG文档的描述将使用<desc>元素。
公共属性
1、所有SVG的元素都拥有的属性
id="ID名称"：为每个元素都能起一个独一无二的名字，便于识别和引用；
xml:base="<uri>";设定基础URI。例如你设定了xml:base="www.w3c.org/"，而在svg文档的其他地方出现了xlink:href="test.html"这样的URI，那么实际的URI将是www.w3c.org/.
