组合-g元素
g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子：
复制代码
代码如下:
version="1.1"width="5cm"height="5cm">
fill="none"stroke="blue"stroke-width=".02cm"/>
注意几点：
1.xmlns="http://www.w3.org/2000/svg"表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档，XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间，给命名空间提供别名等。
2.g元素是可以嵌套的。
3.组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。
4.组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等)，这也是使用组合的一种场景。
模板-symbol元素
symbol元素用于定义图形模板(模板可以包含很多图形)，这个模板可以被use元素实例化。模板的功能与g元素很相似，都是提供一组图形对象，但是也有一些区别。与g元素不同的地方是：
1.symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染。
2.symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。
从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，'display'属性是没有意义的。
下面这个修改过的代码显示了symbol的使用方式：
复制代码
代码如下: