从本质上来说，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（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许创建可缩放的、高质量的图形，广泛应用于网页设计、软件开发以及移动应用程序。MFC（Microsoft Foundation Classes）是微软提供的一个C++类库，...
### 基于SVG的实时监控流程图实现技术 #### 摘要 实时监控流程图作为工业生产控制和管理信息系统的重要组成部分，在诸如DCS（分布式控制系统）、MES（制造执行系统）以及一体化管控系统中发挥着关键作用。为了提高...
在WebGIS中，SVG技术可以实现基于Web的GIS系统，通过使用SVG技术，可以在浏览器中显示和交互式地图，使用户可以实时地获取和操作地图信息。下面将对基于SVG的WebGIS的客户端实现的一些基本知识及实现技术进行简单...
总结来说，SVG技术为WebGIS提供了高效、灵活且互动的解决方案，不仅提升了地图的显示质量，还增强了用户体验。结合XML和Web Service，SVG在数据交换和跨平台服务方面也表现出强大的潜力。对于开发人员而言，掌握SVG...
【SVG技术介绍】 SVG，全称Scalable Vector Graphics（可缩放矢量图形），是一种基于XML（Extensible Markup Language）的图像格式。SVG用于创建和显示清晰、高质量的图形，无论放大或缩小，图像都能保持清晰度和...
**基于SVG的jQuery星级评分插件-jRate** 在Web开发中，用户界面的交互性和视觉效果对于提升用户体验至关重要。`jRate`是一个优秀的jQuery插件，它专门用于创建基于SVG的星级评分系统。这个插件使得开发者能够轻松地...
同时，SVG的矢量特性意味着图形文件能够以任意大小显示，而不会降低图像质量，这对于需要适应不同分辨率和屏幕尺寸的Web设计来说是一个巨大的优势。 在具体应用中，SVG在动态刷新上扮演的角色可以是：当服务器端...
本文旨在探讨如何利用SVG技术生成地图，并分析其优势及应用场景。 #### SVG概述 SVG是一种基于XML的矢量图形标准，由W3C（World Wide Web Consortium）制定。它允许开发者创建高质量的二维图形，支持矢量图形、...
【SVG技术】 SVG，全称Scalable Vector Graphics，是一种可缩放矢量图形标准。与传统的位图（如JPEG、PNG）不同，SVG图像在放大或缩小时不会失真，因为它们是基于数学公式和形状的描述，而不是像素阵列。SVG广泛应用...
基于SVG与Ajax技术的WebGIS研究与设计 本文探索了基于SVG与Ajax技术的WebGIS的研究与设计。传统的WebGIS技术存在一些不足之处，例如对特定支撑环境的依赖、有限网络带宽对数据传输的限制、数据共享困难、缺乏丰富的...
为解决这一问题，本文提出并实现了一种基于SVG矢量图形格式的浏览器绘图工具。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，具有可缩放、易于编辑、文件体积小等优点，适合在浏览器中使用。 SVG...
"基于SVG格式的WebGIS地图的实现.pdf" 本文介绍了基于SVG格式的WebGIS地图...本文对基于SVG格式的WebGIS地图的实现进行了详细的讨论，展示了SVG格式的特点和应用价值，为WebGIS的发展和应用提供了理论依据和技术支持。
基于SVG的电子功能画板则是一种允许用户在数字环境中绘制、编辑和操作矢量图形的工具，它通常具有丰富的功能，如形状绘制、路径编辑、颜色填充、文本处理等。 SVG画板的核心特点包括： 1. **矢量图形编辑**：SVG...
综上所述，本文提出的基于SVG的实时数据动态发布模型通过综合利用SVG、XMLHTTP和WebService等技术，成功地解决了实时数据动态发布的问题。与传统的发布方式相比，该模型不仅减少了网络流量，还具备开放性、松耦合性...
在开发基于SVG的WEB绘图工具时，可能涉及的技术包括HTML、CSS、JavaScript（通常使用库或框架如D3.js、Snap.svg等）以及SVG相关的API。开发者需要理解SVG的基本语法和属性，掌握如何使用JavaScript操作DOM元素，以及...
本文主要研究基于SVG的WebGIS的研究与实现，旨在解决传统WebGIS中存在的问题，如图像描述复杂、处理不方便、难以控制等问题。通过采用SVG矢量图构建WebGIS图，并利用SVG提供的DOM编程接口，使用JavaScript脚本语言对...
总结来说，"SVG图像生成示例"展示了如何利用C#和SVG技术来优化大数据量地图点的显示，提高了网页性能并提供了更好的用户体验。这一方法在地理信息系统（GIS）、数据分析可视化等领域有着广泛的应用前景。
综上所述，基于SVG技术的多级电网自动化调度策略利用了SVG的矢量特性，提供了强大的可视化工具，帮助电力系统实现高效、安全和灵活的调度。这种技术不仅改善了调度效率，也为电力系统的现代化和智能化打下了坚实的...