从本质上来说，SVG文档是XML文档。这就是说SVG文档有某些基本特性：
①所有的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如<rect/>。
②标记必须正确嵌套。如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，<g><text>Hello there!</text></g>是正确的，但<g><text>Hello there!</g></text>不正确。
③文档必须只有一个根。正如一个<html></html>元素包含了一个 HTML页面的所有内容一样，一个<svg></svg>元素也包含一个SVG文档的所有内容。
④文档应该以XML声明<?xml version="1.0"?>开始。
⑤文档应该包含一个DOCTYPE声明，该声明指向一个允许元素的列表。
SVG定义了六种基本形状，这些基本形状和路径可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由fill和stroke属性确定。这些形状是：
①圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。
②椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。
③矩形（rect）：显示左上角在指定点并且高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的x和y半径画成圆角矩形。
④线（line）：显示两个坐标之间的连线。
⑤折线（polyline）：显示顶点在指定点的一组线。
⑥多边形（polygon）：类似于polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。
下面的示例演示了这几个基本形状的简单用法：
<?xml version="1.0"?>
<svg width="400" height="200">
<desc>SVG</desc>
<g>
<circle cx="50" cy="50" r="25" />
<ellipse cx="75" cy="125" rx="50" ry="25" />
<rect x="155" y="5" width="75" height="100"/>
<rect x="250" y="5" width="75" height="100" rx="30" ry="20" />
<line x1="0" y1="150" x2="400" y2="150" stroke-width="2" stroke="blue"/>
<polyline points="50,175 150,175 150,125 250,200" />
<polygon points="350,75 379,175 355,175 355,200 345,200 345,175 321,175" />
<rect x="0" y="0" width="400" height="200" fill="none" stroke="red" stroke-width="3" />
</g>
</svg>
除了形状以外，SVG图像还可以包含文本。SVG给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像。例如：
<?xml version="1.0"?>
<svg width="400" height="125">
<desc>SVG</desc>
<g>
<rect x="0" y="0" width="400" height="125" fill="none" stroke="blue" stroke-width="3"/>
<text x="10" y="50" font-size="30">Welcome to the world of</text>
<text x="10" y="100" font-size="40" font-family="Monotype Corsiva" fill="yellow" stroke="red">Scalable Vector Graphics!</text>
</g>
</svg>
SVG 提供的预定义的几种形状当然是有用的，但有时它们还不足以完成工作。特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建；第二，当动画或文本需要沿页面上的特定形状前进时。这就需要路径了。路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、曲线和线段。
最基本的路径由几条线段组成。例如下面的代码片断：
<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
fill="red" stroke="blue" stroke-width="3" />
上述代码片断是根据提供的指令生成一个简单的多边形。这些指令的含义如下所示：
M 100 100：移至点100, 100。
L 300 50：画一条线至点300, 50。
L 300 250：画一条线至点300, 250。
L 100 300：画一条线至点100, 300。
Z：通过将线画回到原始点闭合此形状。更具体地说，回到最近一条“move”命令所指定的点。
路径命令可以创建三种类型的曲线：
①椭圆曲线是椭圆的一部分，也称为弧。A（或a）命令通过指定起点、终点、x和y轴半径、旋度和方向来创建它们。
②三次贝塞尔曲线由一个起点、一个终点和两个将曲线“拖”向自己的控制点定义。C（或c）命令（指定起点和终点）和S（或s）命令（假设这条曲线从最近的命令终止的地方继续）创建这些曲线。
③二次贝塞尔曲线与其三次贝塞尔曲线类似，不过仅包含一个控制点。Q（或q）和T（或t）命令可以创建这些曲线。
除了这些基本的常见元素之外，SVG还提供大量的更复杂的元素，比如定义可重用部件、样式、颜色、渐变效果、图案、渲染、滤镜、坐标系统、标记、使用CSS属性、动画、交互性等等。将这些元素进行组合，就能够形成复杂的SVG文档，显示复杂的图像效果。
分享到：
相关推荐
基于SVG建立的图形展示系统,通过浏览器端以SVG为核心,建立动画引擎,驱动SVG的动画图像,实现工业控制数据实时显示、生产数据动态显示。将SVG技术应用于中国平煤神马集团工况系统、采掘动态系统中,证明了技术的可行性...
为了以图形图像形式高效发布煤矿实时数据,提出将SVG技术应用到煤矿监控系统中,介绍了基于SVG技术的实时数据发布方案。该方案采用Ajax技术获取数据库服务器中的实时数据,并利用SVG技术构建直观、实时的远程监控矢量...
本套系统是基于SVG的雨量分析系统，实现的主要功能是对各地收集的雨量数据加以分析，并以SVG矢量图形方式进行显示，使用户能够更加直观地了解某一区域的历史雨量。雨量分析系统主要应用于防汛、水文等部门，通过对...
例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象 * SVG图形格式可以方便的创建文字索引，从而实现基于内容...
在此处了解有关SQIP的更多信息， SQIP是一种为图像生成基于SVG的占位符的方法： 此软件包使用的原始node.js版本 。 ，也可以通过配置来支持。 注意：基于node.js的sqip尚未在版本1中发布。 因此，当您使用全局二...
- SVG矢量图形文件：742个，确保图形在不同设备上均保持清晰显示。 - CSS样式文件：489个，定义系统的视觉效果和布局。 - HTML文件：196个，构建系统的前端结构框架。 - JSON数据文件：116个，用于存储和传输数据...
- SVG矢量图：2个，支持高分辨率显示。 项目描述：该项目是基于SSM（Spring, SpringMVC, MyBatis）框架的企业级CRM（客户关系管理）系统源码，适合新手学习SSM框架的应用与实践，深入理解企业级系统的开发流程与...
技术基础 New Folder 多样式星期名字转换 [Design, C#] .NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则...
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...
Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密 Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 设定字符串为“张三，你好，我是李四”...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...
GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页数据显示、数据排序和过滤等功能！ Google Tag Library 该标记库和 Google 有关。使用该标记库，利用 Google 为你的网站提供网站查询，并且可以...