您当前的位置: 4基于SVG的UI设计
4.1 什么是SVG
SVG是可扩展2D矢量图编程的规范，它是W3C支持的一种标准，我们这个九宫格的主程序UI可以用SVG实现相当的动画效果
在过去十年中，图像图形技术曾经使出版印刷行业发生了一场深刻的技术革命，使古老的印刷术融入了高速发展的信息产业。随着Internet技术的普及和发展，图像图形技术作为Web浏览技术的基础，更将为建立一个全新的互联网行业，发挥至关重要的作用。然而，目前的Internet技术在图形图像方面，应该说还处在年轻阶段，从浏览器的核心技术来看，其对于图形图像的支持还仅仅局限于对图像的简单显示，随着应用的逐渐深入，图像技术自身的一些缺点，如文件较大、在不同设备上显示效果不同等问题日益突出，从某种程度上讲也限制了 Web浏览技术的进一步发展。
为此，众多业内人士针对Web浏览器图像图形功能支持较弱这一缺点提出了改进措施。近年来，各大软件厂商和组织纷纷推出自己的矢量图形规范，主要代表有Adobe Systems Inc.制定的PGML（Precision Graphics Markup Language）、CCLRC提出的Web Schematics、Autodesk, Inc和微软等提出的VML（Vector Markup Language）。此外，一些公司开始制作自己的plug-in来支持矢量图形的浏览，但这些插件都由于缺乏跨平台的支持，以及没有较好的配套编辑工具，而未能得到网上的广泛应用。正是在这种情况下，为统一标准，结束目前的混乱局面，W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作，并于1999年2月11日发布了第一个讨论草案，后几经修订于最近发布了最终草案。
SVG是一种基于XML的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，其全称是可升级矢量图形规范（Scalable Vector Graphics）。其中，"可扩展"（scalable）在图形图像技术上指的是它不局限于一个固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小或观全局或观细节；而在网络技术上指的是这一规范能够与其它规范相融合，从而满足更广泛的用户需求，适合于更广泛的应用方式。"矢量"（vector）是指规范中描述了直线、曲线、形状等几何图形，而无须象PNG、JPEG等图像格式那样逐象素进行描述，这使得集成了SVG的XML文档更小，下载速度也大大提高。"图形"（graphics）是指它提供了对矢量和矢量/栅格混合图形的描述，填补了大多数基于 XML的置标语言规范对复杂图形描述的空白。
SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。在以前的草案中，仅为SVG定义了一个DTD，这个DTD支持样式单的引用。但这样一来，SVG 就不再是一个自定义的全包容的语言规范，而需要浏览工具额外具有对样式单文件的处理能力。出于这种考虑，在新近出台的SVG的第八个草案中，为SVG提供了两种不同的形式，即样式化SVG和交换型SVG，它们各自有不同的DTD及MIME类型。样式化SVG允许对图形对象进行样式添加，它可以通过引用外部样式文件、在文件头中预先进行样式声明和通过属性为元素定义样式三种方式使用样式单，是SVG用于网络环境的推荐存储格式。而交换型SVG取消了对样式单的支持，完全使用元素属性描述各个图形对象的显示效果。在未来的网络传输中，交换型SVG将会充当现在印刷业广泛使用的图形格式--EPS格式的网络版。并且，由于所有显示信息都封装到XML的属性中，交换型SVG还可以作为XSLT转换后所得到的结果文件格式，广泛应用于XML文档显示效果的描述中。
4.2 Mobile上的svg
J2ME是Java 2技术架构内三大重要分支之一，其目的在提供诸如手机、PDA等消费性电子产品或嵌入式系统开发应用程式的平台。简单来说，只要手机厂商在其作业平台上提供可以执行J2ME的JAVA虚拟机器(KVM)，则利用J2ME所开发出来的应用程式便能在该手机上直接执行。J2ME最主要的用意是希望能把手机厂商与软体厂商连结起来，弥补在消费性电子产品或嵌入式系统上开发应用程式的缺口。由于现阶段手机大厂皆采纳了J2ME平台，包括Nokia、Motorola、Sony Ericsson与Siemens等，因此在支持J2ME平台的手机逐渐普及之下，软体厂商也顺理成章的提高了在手机上开发应用程式的意愿。
有鉴于此，负责制订Java Profile规格的JCP组织，也于2004年公布了一个可于行动平台上绘制2D矢量图形功能的套件(Package)-Scalable 2D Vector Graphics API。因其JSR(Java Specification Request)标号订为226，故我们JSR 226称之。JSR 226是由Nokia这家手机大厂主导制订的，其他的专家群(Expert Group)成员包括SonyEricsson、Motorola、Siemens、Sun Microsystems、TinyLine、IBM、Texas Instruments、Symbian...等等。
在J2ME开发环境上，JSR 226规格定义了可缩放2D矢量图形的应用程式界面，并且必须支持SVG Tiny Profile，并相容于SVG-T 1.1。其执行平台和OpenVG相差不多，皆适用于记忆体容量、屏幕大小及计算效能有限的行动装置上。但有别于OpenVG规格的是，JSR 226是一套较为高阶的矢量绘图标准。此规格提供了可用来绘制Scalable 2D vector images的API套件，其中包含了SVG格式的影像档。
由于JSR 226必须支持SVG Tiny Profile特性的关係，JSR 226应该具备具有延伸机制的能力。随着SVG profiles未来可能的发展，才能达到完全支持的效果。此外，JSR 226若能透过OpenVG函式库来加以实作，并且充分利用矢量图形硬体加速的功能，对于JSR 226效能的展现绝对有正面的助益。最后说明JSR 226这套程式界面的应用，主要项目包括地图视觉化、可缩放的图示(icon)、及其他必须符合自由缩放需求的进阶应用。
4.3 RIM上的svg
借助于SVG实现九宫格布局，我们对UI的设计和修改就非常方便。我们这部分SVG的例子，希望达到的效果是使用SVG原始文件来布局我们的九宫格UI，同时，应用RIM对JSR226的支持，来对用户界面事件做出响应。通过这个方式，我们可以熟悉和了解在BlackBerry应用SVG开发的过程和方法。
根据最新的BlackBerry的Browser技术规范，svgtiny1.2已经在BlackBerry上得到了支持。所以BlackBerry上SVG的开发的支持通过HTML方式集成，也可以采用Java本地应用的方式来集成。
步骤一
编辑原始SVG文件
由于SVG文件是一种基于XML格式的标签文件，所以也有很多基于XML编辑风格的工具来编辑原始SVG文件。一种选择是Adobe的svgview,也有一个中国人开发的工具，叫SVGDeveloper。
对于SVG的编辑，我们可以用BlackBerry的自己的选择Plazmic Composer for BlackBerry Smartphones。这个工具本身是用来作为BlackBerry上的主题和动画制作的工具。但是它也可以用来对SVG文件编辑。
在第6章，我们也会介绍用这个工具来进行BlackBerry上的主题和动画制作。
在这里就以SVGDeveloper为例，说明一个基本的SVG文件的编辑已经构成开发过程，关于SVGDevelper的使用和安装下载，可以参考SVGDevelper的官方网站。下面我们使用SVGDeveloper编辑一个sample.svg文件
对于生成的sample.svg的源文件，如果打开，可以看到如下内容，我们分别解释如下：
<?xml version="1.0" encoding="utf-8" standalone="no"?>