甲骨文作为世界上最古老的文字，没有被包含进现代汉字的编码体系中，所以在网页上显示甲骨文字较为困难。通常的做法是把甲骨文字变成图片插入到网页 中。本篇文章将介绍一种利用SVG在网页中显示甲骨文、象形文字的技术，包括创建甲骨文SVG文件和嵌入网页。该技术有助于其他特殊领域的特殊图形符号的 网页显示。
甲骨文作为世界上最古老的文字，没有被包含进现代汉字的编码体系中，所以在网页上显示甲骨文字较为困难。通常的做法是把甲骨文字变成图片插入到网页中。这样做的缺点有三:一是数据量大;二是显示有问题，插入到网页的图片是通过超链接连接到图片文件的，当链接有问题时，图片就显示不出来;三是不能放大和编辑，因为位图在放大时容易变形失真。本课题采用可伸缩图形SVG(Scalable Vector Graphic)来解决甲骨文字在网页上的显示问题。研究工作分为两步:一、如何要把甲骨文矢量化，输出为SVG文件形式;二、如何把SVG文件插入到网页中。
1 创建甲骨文字的SVG文件
SVG是一种采用XML(可扩展标识语言)来描述二维图形的语言，是一个标准开放的矢量图像格式。我们可以用任何文字处理工具打开SVG图像文件，并可看到用来描述图像的文本代码，还可以通过改变部分代码来使图像具有交互功能，或者直接把代码放进网页当中，通过浏览器的插件，可以在网页中看到SVG格式的图像。使用简单的文本命令，就可以制作出诸如色彩线性变化、自定义置入字体、透明、动态效果、虑镜效果、动画等各式常见的图像效果。
目前，可以把图形输出为SVG文件的软件有很多，如CorelDraw 9.0，Adobe Illustrator 9.0，Xstudio Next，Real-DRAW PRO，但实验发现，可以把一个矢量字体转换为SVG文件的只有Real-DRAW PRO。其具体步骤如下:
(1) 使用我们自己设计开发的可视化甲骨文输入法，复制一个甲骨文字。
(2) 打开Real-DRAW PRO 3.10程序，选择输入文本，在弹出的文本编辑框中执行粘贴，然后选择“Jiaguwen”字体(我们自己创建的甲骨文字库)，确定后就可以看到画板中显示出甲骨文字(如图1所示)。
(3)对该字做放大、缩小、移动等操作;选择File`Export，在弹出的Export对话框中，选择“SVG webformat”格式;点击Export按钮，在弹出的保存窗口中命名输出文件，例如di,即生成SVG文件。
该文件是一个文本文件，其内容为:
<? xml version="1.0" standalone="yes"?>
<svg width="400" height="300">
<title>帝</title>
<path style="fill:#000000;stroke:none" d="M87.467 30.301 C88.665 29. 969 89. 229 30. 135 89. 229 30.551 C89. 229 30. 135 89. 651 29. 969 90. 497 30. 301…….L78. 94 33. 872 L77. 953 34. 121 z" />
<!-- End of RealDRAW generated image, http://www.mediachance.com -->
</svg>
其中，“…….”省略了一部分数据信息;<path/>用于定义路径，其主要属性d参数代表数据声明标签，表示路径数据。路径数据包含路径命令字符和座标信息，一些重要的路径命令字符如下:
M,代表Moveto(移动到)，M5,5表示先将起点移动到(5,5)处;
L,在当前点和下一个(x,y)点之间划线;
A,利用描述x和y轴上的半径、x轴的旋转、方向和范围的大小以及椭圆的x、y座标的终点等信息划一个椭圆;
C,代表Curve(贝赛尔曲线控制),C5,45 45,45 45,5中的绿色点(45,5)表示第二个点的位置,中间的棕色两点(5,45),(45,45)分别代表前一个点(5,5)和后一个点(45,5)的曲柄点位置;
Z,结束一个路径,光标返回最近的一个Moveto点。可以看出,这是一个标准的XML文件。
2 在网页中显示SVG的甲骨文字
在网页上显示甲骨文字的前提是网络浏览器支持SVG格式。这可以通过下载插件(如Adobe公司的SVG VIEW)来实现。目前，在网页中插入甲骨文字的SVG文件的方法有两种:
(1)嵌入法。建立一个新网页，在<body></body>中的适当位置插入以下代码。
<embed width="320" height="240"type="image/svg-xml" id="svg"
pluginspage="http://www.adobe.com/svg/viewer/install/" src="/di.svg">
</embed>
(2)插入对象法。建立一个新网页，在<body></body>中的适当位置插入以下代码。
<object type="image/svg+xml" data="di.svg"
图2 含有甲骨文字的网页示例
width="300" height="200">
</object>
其中，di.svg是上面创建的甲骨文字体的SVG文件。然后，保存网页，在网络浏览器中打开该网页，就可以看到包含甲骨文字的网页(图2)。
对这个用SVG表示的甲骨文字，可以使用ALT+鼠标在网页中任意的移动，CTRL+鼠标可以任意的放大，CTRL+SHIFT+鼠标可以任意的放大。不仅可以在浏览器内无失真地对对象执行缩放和平移等操作，还可以利用Xlink，XPointer等XML技术将大图分解，化简为小图浏览，甚至结合后台数据库直接存取元数据信息，并将结果动态地绘制为甲骨文字，在网上显示出来。SVG强大的事件及脚本功能，也使得SVG表示的甲骨文字具有更强的交互性和更为丰富的表达能力。
3 甲骨文的SVG文件实例
以下甲骨文的SVG实例，分别是“龙”、“鸟”、“马”、“犬”、“水”，点击图片链接可以查看SVG文件。
4 结语
通过研究和实验，我们利用SVG技术解决了甲骨文在网页中的显示问题，希望这种方法和技术对其他特殊领域的特殊符号和图形在网页中的显示有所帮助。我们下一步的研究工作是把所有甲骨文转化为SVG格式，建立甲骨文SVG数据库，并将其作为后台数据库，使用我们的《可视化甲骨文输入法》作为前端的编辑工具，建立起一个可编辑制作甲骨文网页的创作平台，在该平台的基础上建立甲骨文网。同样,我们也可以利用本文的方法，采用SVG技术实现那些在Web或其他显示设备上无法实现显示的问题，比如特殊字符、数学符号等，这个就不是本文讨论的重点了，大家有意可以参考“利用SVG和Java在网页显示数学特殊符号”一文。
5 关于作者
史创明,刘永革:安阳师范学院计算机科学系。
(THE END)
