学习笔记 SVG与UML图详解

本文和大家重点学习一下SVG与UML图详解，可缩放矢量图形（SVG）是W3C的推荐标准，它使用XML描述两维图形结构和图形应用，可以在Web浏览器、手持设备或移动电话等多种上显示。而UML是统一建模语言，它共有九种UML图。

SVG与UML图详解

一、SVG

可缩放矢量图形（SVG）是W3C的推荐标准，它使用XML描述两维图形结构和图形应用，可以在Web浏览器、手持设备或移动电话等多种上显示。目前稳定版本为1.1版，最新的版本是以草案形式存在的1.2版，并未最终定稿。

在SVG中，允许三种图像对象存在，分别是矢量图像、点阵图像和文本。SVG定义了六种常用的基本矢量形状，包括直线、圆形、椭圆形、矩形、多边形和折线，在此基础上，利用坐标变换、路径、动画、滤镜图案等功能扩展，通过多层次组合矢量、点阵以及文本图，并配以各种属性，进行矢量绘图。

经过一段时期的发展，SVG的业务领域慢慢也已拓展开来，涵盖Web图表、地图、框图、流程图、项目计划图等多种类别。构建各个领域中的基本元件库也成为迫切需求，一些开源项目正以此为目标，提供可重用、基于SVG的元件库。UML图可以明确地按照种类划分，针对不同的种类，提出基本组件，再结合SVG固有的功能，就可以很容易地使用SVG创建出多种UML应用。
SVG的语法非常简单，设计人员一般在一天之内就会熟悉，IBMDeveloperworks中也有SVG的专题讨论，这里也就不再赘述了。

二、UML图详解

UML是目前最常用的一种面向对象建模语言，主要包括七种常见的类型，即用例图、类图、序列图、状态图、活动图、组件图和部署图，分别用以不同的建模用途。
◆类图，类图可以将一组类、界面、合作以及上述元素之间的关系显示出来，通常分为逻辑类和实现类。
◆组件图，以可视化方式提供系统的物理视图，显示系统中组件的依赖关系。
◆部署图，显示系统如何物理部署到硬件环境之中，是节点和连线的集合。上面三种UML图都是对系统静态特征进行建模，下面的四种描述系统动态特征。
◆用例图，描述系统的功能单元，它以图形化的方式表示系统内部的用例，系统外部的参考者，以及它们之间的交互。
◆序列图，强调时间顺序，显示特定用例的详细流程。顺序图有两维：垂直方向是以时间顺序显示消息/调用序列，水平方向显示消息发送到的对象实例。
◆状态图，描述系统动态特征，包括状态、转换、事件以及活动等。
◆活动图，描述系统在处理某项活动时，两个或多个对象之间的过活动流程。

UML中还包含其它一些图，例如对象图、包图、组合图等，以及演化出的一些新的概念，如模板(Stereotypes)、职责(Responsibilities)、扩展机制(Extensibilitymechanisms)、线程(Threads)、过程(Processes)、分布式(Distribution)、并发(Concurrency)、模式(Patterns)等，是否使用要依据建模过程中系统的层次、分类和大小等具体情况而定。诚然，对于个体来说，我们并不会用到所有的符号，但一个完整的UML建模工具却是要尽可能详尽地考虑到UML中丰富的符号语法和语义信息。在这里，我们无法描述清楚使用SVG绘制每种UML符号的方法，我们要关注的是UML基本符号元件的划分以及使用SVG绘制UML图的一些常用方法和便利之处。

三、从基本元件看UML图详解

上面是按照功能对UML图形进行的分类，绘制UML图形时，我们的视图并不是功能视图，而是功能视图之上的元件视图。类图和用例图在功能上是不同的，但从SVG的角度看，它们都由方框、线条以及文字组成。不同类型的UML图都会有专属的绘图元件。在抽象级别较高的情况下（方框、线条、文字的抽象级别最高），同属一类UML图形的元件集合就会非常小；抽象级别越低，集合就会越大。但是太低层次的抽象却是无意义的（最低的情况是每个UML图都可看成一个元件，这是最具体的），关键是如何找到一个折衷点，既能保证有着元件集较小，又能方便绘图。SVG提供的基本绘图功能本来也是可以进行UML绘图的，但是这样做效率会比较低。建立起基本的UML图形元件库，会大大提高绘图质量和速度。现有的UML建模工具中，都有比较清晰的UML建模元件分类。我们这里以VisioProfessional2002为例，看一下UML模型图的元件分类情况。

在Visio的软件模具里，包括数据流模型图、程序结构图、ROOM、Jackson图和UML模型图等。Visio中UML图的功能分类比上述常用分类要多出两项，包图和静态结构图。包图是表达系统架构的有效机制，它可以用来将系统划分为较小的、易于管理的子集，它可以由任何一种UML图组成。静态结构图包括概念图和类图，概念图代表现实世界中的概念以及概念之间的关系，它侧重于关系和属性，而不是方法。

图一是Visio按照功能分类方法划分的UML图的基本元件。可以看出，这种分类方法是有很多重叠的，例如，包在用例图等四种UML图中都被看成基本元件。但这样做，在分类清晰的基础上，可以提高用户访问模板元件的速度；忽视UML功能分类，完全访问集合要包含一百个左右的成员，访问元件的效率可能会较低。
或者，我们也可以结合这种按照功能进行分类的方法，根据视觉特征将UML基本元件分组，然后在每种视觉特征分组下，再按照功能进行分组。使用SVG绘制UML图形，这有可能会是一种较好的分类复用的方法。这样我们不仅可以保证用户快速地访问到UML元件，而且在基于SVG的建模工具内部也易于管理。

例如，我们可以进行这样的分类：
◆人形元件，表示用例图中的主角；
◆椭圆形元件，也即用例图中的用例；
◆折角元件，包括注释和约束；
◆包元件（包括包和子系统）、节点元件（立方体形状）和组件元件；
◆抽屉类矩形元件，这一组元件有许多变体，不同之处在于顶端标注缺省文字间以及格层数会有差异，包含长式和短式两种格式；
◆圆形元件，包括"初始状态"、"最终状态"、"详细历史"及"简略历史"；
◆圆角矩形类元件和菱形元件；
◆带有各类箭头的直线类，包括实线、虚线；
◆带有各类箭头的曲线类，包括实曲线和虚曲线；
◆其它一些少数特殊形状元件；