SVG文档语法结构

SVG 语法结构说明
文档说明
版本
日期
作者
说明
1.0
2006.1.29
很少想起你
第 1 页 共 23 页
SVG 语法结构说明
SVG语法结构
一、SVG文档结构格式（为了方便说明，在文中加入标号和冒号；为了方便阅读，加了超链接）：
1: <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?>
2: <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
3: <svg width=“1000” height=“400”viewBox=“0 0 1000 400”
Version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
4: <title>此标注相当于HTML中的title标注</title>
5: <desc>SVG文件内容描述，类似文件功能注解，这部分内容不会出现在以后显示的画面中</desc>
<defs>
预定义可重用部件。并给它们指定以后可在图像主体中调用的标识。在图像主体部分通过用<use />
标注引用预定义项的元素将它们链接到文档。
</defs>
6: <defs>
<style type="text/css"> <![CDATA[
circle {fill:none; stroke:#00C; stroke-width:2px;}
#abc123 { fill: #00C; opacity: 0.5; }
.xyz { font-family: "Courier New", Courier, monospace; font-size: 20px; font-weight: bold; fill: #F00; }
.asd { fill:none; stroke-width:1; stroke:black; stroke-opacity:1; }
]]>
</style>
7: <script type=“text/javascript” Xlink:href=“uri”> <!-- 引用外部脚本 -->
<script type=“text/javascript”> <![CDATA[
<!-- 内嵌脚本 -->
]]>
</script>
</defs>
8: <defs>
<symbol id="c1">
<circle cx="25" cy="25" r="25" />
</symbol>
</defs>
9: <defs>
<symbol id="2c1">
<use xlink:href="#c1" x="20" y="50" />
<use xlink:href="#c1" x="20" y="85" />
</symbol>
</defs>
10: <defs>
<symbol id="3c1" viewBox="0 0 500 200">
<use xlink:href="#c1" x="80" y="50" />
第 2 页 共 23 页
SVG 语法结构说明
<use xlink:href="#c1" x="65" y="85" />
<use xlink:href="#c1" x="95" y="85" />
</symbol>
</defs>
11: <defs>
<rect id="abc123" x="50" y="150" width="150" height="75"/>
<rect id="rect1" x="200" y="150" width="60" height="90" />
<line id="lineation1" x1="20" y1="50" x2="250" y2="50" class="asd" stroke-dasharray="5 5 5 5" />
<line id="lineation2" x1="50" y1="70" x2="350" y2="70" class="asd" stroke-dasharray="1 1 1 1" />
<line id="lineation3" x1="50" y1="90" x2="250" y2="90" class="asd" stroke-dasharray="4 3 1 4" />
<line id="lineation4" x1="50" y1="110" x2="250" y2="110" class="asd" stroke-dasharray="5 3 1 2 1 3" />
</defs>
12: <defs>
<symbol id="专用变压器">
<use xlink:href="#2c1" x="120" y="50" />
<use xlink:href="#rect1" x="120" y="55" />
</symbol>
</defs>
13: <defs>
<symbol id="变压器组">
<use xlink:href="#3c1" x="200" y="50"/>
</symbol>
</defs>
14: <defs>
<marker id="arrow" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black" stroke-width="2" />
</marker>
</defs>
<defs>
<path id=“wavyPath” d=“M75,250 c25,-75 50,50 100,0 s50,-5 150,50” />
</defs>
<desc>这里开始是整个SVG文件的重心，向量图形、图像、文字、动画等内容都应包含置于此。</desc>
15: <g id=“g” name=“图层管理”>
<g id=“g1” name=“一次图标层（设备层）” visibility =“visibility”>
16: <use xlink:href="#c1" x="50" y="100" />
第 3 页 共 23 页
SVG 语法结构说明
<use xlink:href="#c1" x="100" y="100" />
17: <use xlink:href="#lineation1" x1="20" y1="50" x2="250" y2="50" transform="scale(2)"/>
<use xlink:href="#lineation2" x1="20" y1="70" x2="250" y2="70" />
<use xlink:href="#lineation3" x1="20" y1="90" x2="400" y2="90" />
<use xlink:href="#lineation4" x1="20" y1="110" x2="450" y2="110" />
<use xlink:href="#abc123" x="50" y="150" />
<use xlink:href="#专用变压器" x="160" y="70" />
<use xlink:href="#变压器组" x="260" y="70" />
18: <circle cx="143" cy="163" r="84" style="fill:rgb(192，192，255); stroke:rgb(0，0，128); stroke-width:1"/>
. <ellipse cx="160" cy="163" rx="101" ry="81" style="fill:rgb(192，192，255);stroke:rgb(0，0，128);stroke-width:1"/>
. <rect x="80" y="53" width="189" height="52" style="fill:rgb(39，44，231); stroke:rgb(0，0，128); stroke-width:1"/>
. <line x1="127" y1="65" x2="127" y2="200" style="stroke:rgb(0，0，0);stroke-width:2"/>
. <polyline points="100，200 100，20 10，200 100，20" style="stroke:rgb(64，64，64);stroke-width:1"/>
. <polygon points="223.5，123.034 276，213.966 171，213.966" style="fill:rgb(126，14，83);stroke:rgb(0，0，128);stroke-width:1"/>
23: <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50" stroke="purple" stroke-width="5" fill="none" marker-start="url(#arrow)"
marker-mid="url(#arrow)"
marker-end="url(#arrow)" />
</g>
<g id=“g2” name=“一次文字层（设备名、属性层）”>
24: <text x=“100” y=“120” stroke=“black” stroke-width=“.5” >专用变压器</text>
<text x=“150” y=“200” stroke=“black” stroke-width=“.5” >变压器组</text>
<text x="50" y="120" stroke-width="2" stroke="green" transform="scale(2) translate(-25 -60)">
让我们荡起双桨
</text>
25: <text x=“20” y=“100” font-size=“30”>显示属性
<tspan fill=“rgb(255,0,0)”>ID:</tspan>
26: <tspan fill=“rgb(0,255,0)”class=“abbr”>GroupID:</tspan>
<tspan fill=“rgb(0,0,255)”>Remark:</tspan>
</text>
27: <text x=“20” y=“250” font-size=“20”>
<textPath xlink:href=“#wavyPath”>
Text travels along any path that you define for it!</textPath>
</text>
</g>
<g id=“g3” name=“一次连线层”>
第 4 页 共 23 页
SVG 语法结构说明
</g>
</g>
</svg>
第一行：从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性。所以文档应该以 XML 声明 <?xml version="1.0"?> 开始。
version属性表示XML的版本，因为解析器对不同的版本的解析肯定会有区别，尽管目前版本只有1.0版本，但在声明中必须指定version
属性。
standalone属性规定本svg文件是否是独立的，如果将其设置为”yes”,则表示该文档没有依赖外面的任何文件
而可以独立存在，即不需要DTD文件来验证其中的标识是否有效，也不需要XSL、CSS文件来控制其显示外观；将standalone属性设置为”no”时，则表示该文档依赖于外面的某个文件，例如依赖于某个DTD文件或XSL、CSS文件。standalone属性的默认值是”yes”。
encoding由于可以采用不同的字符编码集来书写一个字符内容完全相同的XML文档，所以，XML软件工具（包括分析器）就需要知道该XML文档所使用的字符编码方式。这可以通过在XML文档声明中指定encoding属性来说明。
第二行：指定外部的DTD。XML文档通过使用DOCTYPE声明语句（文档类型定义语句）来指明它所遵循的DTD文件。DOCTYPE声明语句紧跟在XML文档
声明语句后面，有两种格式：
（1）<!DOCTYPE 文档类型名称 SYSTEM “DTD文件的URL”>
（2）<!DOCTYPE 文档类型名称 PUBLIC “DTD名称” “DTD文件的URL”>
各部分的意义和作用如下：
文档类型名称可以由XML文档编写者自己定义，一个通用的习惯是使用XML文档的根元素名称来作为文档类型名称。
关键字SYSTEM表明XML文件所遵循的是一个本地或组织内部所编写和使用的DTD文件。
关键字PUBLIC表明该XML文件所遵循的是一个由权威机构制定的、公开提供给特定行业或公众使用的DTD文件，而不是某个组织内部的规范文件。
“DTD名称”用于指定该DTD文件的标识名称，它只在使用关键字PUBLIC的DOCTYPE声明语句中出现。DTD标识名称需要用双引号括起来，例如，用于Java Web应用程序的配置文件的DTD文件的标识名称为”-//Sun Microsystems,Inc.//DTD Web Application 2.3//EN”。DTD标识名称应符合一些标准的规定，对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号”+”开头；未被改进的非ISO标准的DTD以减号”-”开头。紧跟着开始部分后面的是双斜杠”//”及DTD所有者的名称，在这个名称之后又是双斜杠”//”，之后是DTD所描述的文件的说明，最后在双斜杠”//”之后是语言的种类。虽然标识名称看上去比较复杂，但这完全是由DTD文件发布者去考虑的事情，XML文件的编写者只要把DTD文件的发布者事先定义好的DTD标识名称复制到相应的位置就可以了。
“DTD文件的URL”部分指定该DTD文件所在的位置，需要用双引号括起来。对于使用PUBLIC属性的DOCTYPE语句，”DTD文件的URL”指定该该DTD文件的在Internet上的绝对URL，例如，用于Java Web应用程序的配置文件的DTD文件的位置为
“http://java.sun.com/dtd/Web-app_2_3.dtd”。解析器在对XML文档进行有效性确认时，通常都需要从该指定的URL下载DTD文件，但是，对于一些已经制定成为了行业标准的DTD文件，一些相应的解释器程序可能已经将他们内嵌进去，所以在解析时并不一定到指定的URL进行下载。对于使用SYSTEM属性的