svg除了绘图元素之外还有一部分是专门用于文档结构的，这类元素有<g>，<use>，<defs>，<symbol>等
<g>元素
如果我们仅仅用于学习svg的时候可能不太会用到<g>元素，但当我们绘制特别复杂的图形的时候<g>元素可配上大用场。<g>元素的作用就是将其子元素作为一个组合，以备将来的复用。可以通过为<g>元素添加<title>子元素来为组合添加标题，详细的描述可以放在<desc>子元素中。例如：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<g id="basic">
<title>一条线段</title>
<desc>这是一条线段，起点坐标(23,30)，终点坐标(209,78)</desc>
<line x1="23" y1="30" x2="209" y2="78" stroke="#000"></line>
</g>
</svg>
</body>
</html>
<g>元素的作用在于复用，且看下面的<use>元素
<use>元素
以上介绍的<g>元素可将元素进行分组，<use>元素的作用就是复用这些分组元素，use的使用格式如下：
<use xlink:href="#use-element-id" x="translate-x" y="translate-y"></use>
xlink:href属性指定了引用元素的id，x属性指定了相对于原来的元素水平平移的距离，y元素指定了相对于原来的元素垂直平移的距离
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<g id="basic">
<title>一条线段</title>
<desc>这是一条线段，起点坐标(23,30)，终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<use xlink:href="#basic" x="10" y="0"></use>
</svg>
</body>
</html>
打开效果如下：
将<use>元素的y改为10，效果如下：
<defs>元素
<defs>元素的作用和<g>元素的作用类似，都是复用元素，但是<defs>元素块相当于声明了一个模板区域，这个元素块中的子元素一律不会显示，而是作为模板，以备文档中其他部分的引用，SVG规范推荐我们将所有的想要复用的对象放在<defs>模块中，这样SVG阅读器可以更高效的处理数据。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<defs>
<g id="basic-line">
<title>一条线段</title>
<desc>这是一条线段，起点坐标(23,30)，终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<g id="basic-circle">
<circle cx="30" cy="40" r="50" stroke="black" fill="none">
</g>
</defs> <use xlink:href="#basic-line" x="10" y="10"></use>
<use xlink:href="#basic-circle" x="70" y="50"></use>
</svg>
</body>
</html>
呈现如下：
<symbol>元素
<symbol>元素的作用和<g>元素的作用类似，都是用来组合元素，而不同的是<symbol>元素内的子元素不会显示，但依然建议将<symbol>元素放在<defs>元素内，以维护代码的简洁性，<symbol>元素与<g>元素还有一个不同，就是<symbol>元素可以指定viewbox属性和preserveAspectRatio属性，示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<defs>
<g id="basic-line">
<title>一条线段</title>
<desc>这是一条线段，起点坐标(23,30)，终点坐标(209,78)</desc>
<line x1="10" y1="0" x2="10" y2="100" stroke="#000"></line>
</g>
<g id="basic-circle">
<circle cx="30" cy="40" r="50" stroke="black" fill="none">
</g>
<symbol id="basic-polygon">
<polygon points="22.4,34 10,67 90,2"></polygon>
</symbol>
</defs> <use xlink:href="#basic-line" x="10" y="10"></use>
<use xlink:href="#basic-circle" x="70" y="50"></use>
<use xlink:href="#basic-polygon" x="200" y="50"></use>
</svg>
</body>
</html>
效果如下：
<image>元素
<image>元素可以引用其它图像显示在svg中，引用的图像可以是JPEG，PNG和SVG格式，使用格式如下：
<image xlink:href="picture-path" x=" left-top-point-x" y="left-top-point-y" width="w" height="h"></image>
xlink:href属性指定了需要引用图片的路径，x和y分别是引用图片的左上角顶点坐标，但非必需，若不声明，则默认以坐标原点为图片的左上角，width和height为引用图片的宽和高，
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="300" height="300" style="border:1px solid #000">
<image xlink:href="background.jpg" x="90" y="80" width="200" height="150"></image>
</svg>
</body>
</html>
SVG样式的使用方式
主要有内联样式，内部样式表，引用样式表3种方式，和css的使用方式一样。
内联样式就是直接在元素上添加style属性或者直接使用对应的属性，例如：
<svg width="300" height="300" style="border:1px solid #000000">
<line x1="10" y1="10" x2="200" y2="200" stroke="black">
</line>
</svg>
其中<svg>元素使用了style的方式来添加样式，而<line>元素直接使用样式属性添加样式，这种方式就是内联样式
内部样式表就是在文件中直接声明style代码块专门用于给元素添加样式，例如：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg>
<defs>
<style type="text/css">
svg{
width:300px;
height:300px;
border:1px solid #000;
}
polygon{
stroke: black;
fill:none;
}
</style>
</defs>
<polygon points="10,10 10,210 190,150"></polygon>
</svg>
</body>
</html>
若在网页中使用svg，则可将上述代码的style代码块移到<head>标签内
引用样式表就是将样式表独立出来存成一个文件，然后在要使用该样式表的文件中引用，例如：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<link rel="stylesheet" type="text/css" href="svg-21.css">
</head>
<body>
<svg>
<ellipse cx="150" cy="150" rx="50" ry="10"></ellipse>
</svg>
</body>
</html>
效果如下：
