 用SVG跨越位图屏障
用SVG跨越位图屏障
今天绝大多数的Web图像都使用GIF或者JPEG这类的位图格式，由于位图需要包含一幅图像里的每个 像素的信息--所以它太大、太慢而且没有声音，但是矢量图形则提供了一个更好的解决方案，它使用对象的形状和路径描述图形，但是非常不幸，现在对于矢量数 据并没有建立相关的标准，只有几个专有格式，如Macromedia Flash或者Apple's的QuickTime支持矢量图形，这种局面将要发生变化。
SVG作为矢量格式，它不同于现在独霸Web图像的GIF和JPEG的位图格式，矢量的优势在于你可以无限放大图形而不会降低它的品质。
可 升级矢量图形（The Scalable Vector Graphics 简称SVG）格式正在通过互联网协会（W3C）的努力渐渐崭露头角，其SVG工作组由各个业界巨头组成，包括：Adobe、苹果、Autodesk、 BitFlash、Corel、惠普、 IBM、 ILOG、 INSO、 Macromedia、 微软、 Netscape、 OASIS、 Open Text、Quark、 RAL (CCLRC)、 Sun、 Visio、 施乐以及来自互联网协会（W3C）的成员共同为下一代的Web建立XML矢量图像格式。新的格式还完全兼容现有的Web标准，像HTML、GIF和CGI 等等，但它远远超出受着种种限制的旧的Web技术以它卓越的动态技术铸造Web图形的未来。
· 增强的调色板和色彩控制：一百六十万种颜色、任意倍率平滑缩放、支持ICC（International Color Consortium（国际色彩组织，缩写为 ICC））色彩空间、sRGB、渐变色以及蒙板等等，这些将在Web上提供印刷质量的图像。
· 更加美观的字体：复 杂的排字控制，像字距调整、路径文本、连字符控制等等，而且可以嵌入字体或者使用系统字体以获得高品质、更专业的文本显示效果。因为SVG是基于XML和 Unicode的，所以SVG图像中的文字可以被搜索或者重新编辑，而且字符集支持国际化，不论你使用英语、西班牙语、日语还是阿拉伯语等等都能够正常显 示。
· 优秀的文件格式：SVG是一个满是XML命令的纯文本文件，类似于Postscript语言。这就是说你可以使用记事本这类简单的文本编辑器进行编辑，或者你可以用像CGI或者Perl这类服务器端的工具轻松生成。
· 更强的动态交互功能：SVG能够让你使用多种手段在Web页面上对用户的动作进行响应，如高亮显示、工具提示、特技效果、动画、以及时实改变HTML文字……这里只是举几个例子，而且由于它比光栅图像要快，所以会让你在信息公路上漫游的时候游刃有余。
· 更棒的打印：有了可靠的颜色模型，SVG的打印将完全重现你在你的显示器上看到的颜色，而且你将和那些糟糕的锯齿边还有模糊不清的网页图像说再见了。
基于XML的下一代Web
作为未来的图形，真正使SVG不同于其它的Web格式的是SVG在一开始设计的时候就是完 全遵从XML（可扩充的标记语言）--下一代万维网的标记语言。SVG是纯粹的XML但是它同样保证将无缝整合现有的的标准，比如：HTML、CSS、 DOM（文档对象模块）、XSL、JavaScript和CGI等等。另外，因为SVG遵从DOM（文档对象模块），其脚本将类似于DHTML。给一个脚 本同时应用HTML和SVG，因此交互和动态效果可能在HTML和SVG上使用同一套脚本，这样Web设计师和开发者打算在设计中溶入SVG，将不必花费 精力学习新的软件或者放弃现有的工具和技术了。
SVG的文件格式不同于光栅图像和一些其它的矢量图形文件采用的二进制格式，SVG文件采用的是SML语法和易于阅读的文本文件，这意味着开发者能 够非常容易地创建脚本，动态修改内容以及在不同的工具之间交换。此外，XML按照有结构的数据描述信息，因此应用中能够以不同方式处理处理同样的SVG （XML）图像，比如为各种不同分辨率装置进行优化、显示一条文本或者在Web页面和应用之间交换信息。举个例子，一个本地餐馆的SVG地图在一个受资源 限定装置（比如说移动电话）上显示的是一串电话列表--电话能被显示、存储或者拨叫。这样的灵活性远远超出现有的HTML以及光栅格式的能力范围。XML 将给我们的Web体验带来更加广阔的前景，图像能够动态提供数据库信息、在传送过程中改变它们的外观、应答用户的输入和随之而来的数据库请求……这些都是 电子商务所梦寐以求的。
让Web浏览更具魅力
灯光、镜头、开始！让网页变得更加生动的技术的飞速发展远远走在了当前网页技术的最前端。无论 你是个人网上购物，搜索信息，或是管理BtoB电子商务活动，高质量的图形都有助于画面的清晰和信息的有效传达。SVG承诺带给网页更丰富的内容，更引人 瞩目的图形，用户逐渐期望打印目录，杂志和广告。用SVG，电子商务和其它在线活动能够展示顶级质量水平的动态图形和在线浏览。你可以为了寻找最近的咖啡 馆浏览交互式的城市街道图，放大地图的某一部分，或者通过联机目录察看你感兴趣的相机内部构件的3D结构，SVG将给用户在Web页面上更加广阔的应用空 间。
· 更加丰富的设计：SVG将打破今天的Web设计上的条条框框，提供更为复杂的布局，更为专业的排印功能以及高品质的矢量图形功能。
· 更加丰富的动态交互功能：移动或者点击鼠标都能通过矢量图形的变化带来即时的反馈--比如说高亮、文字倾斜、实时改变HTML文本的边缘等等。
· 更加快速的下载：SVG图像的下载速度将比当前流行的GIF和JPEG图像的速度快得多。在它们完全被下载之前将更具阅读性和可辨识性。用户还可以通过简单的鼠标动作缩放和平移图像。
· 更加全面的搜索：你可以通过查找命令和搜索引擎来搜索SVG图像中的文字。
· 更精确的颜色：SVG的可靠的颜色特性将给下一代的在线电子商务带来许多新的面貌--系统可以根据你的浏览器窗口的配色方案下载以之匹配的配色方案。SVG支持ICC色彩概貌的工业标准像sRGB。
· 高品质的印刷：SVG在你的显示器上观看时是不受Web安全色和打印机颜色空间限制的，可升级的矢量图形将完全按照打印机的分辨率进行打印，你可以和JPEG说再见了。
因为SVG包含一个DOM（文件对象模式），SVG图像可以改变它们自身的填充、边框、尺寸等等，或者它们也能够对包含HTML的Web页面上的其它部分产生影响。
设计具有印刷图像质量的Web
大多数网页设计者已经在他们的工作中广泛的应用了Adobe的各种软件。Adobe® Photoshop®, Illustrator®, ImageReady™,和 LiveMotion™都是设计者们手中的支柱软件。Adobe的整个产品生产线都将支持SVG，这种图形标准可能为网页设计者和开发人员提供令人兴奋的新的性能：
· 最新型的工作流程:SVG能够避免浪费下载时间和降低品质的优势使它经常被网页设计者用于网页中图形部分的工作。你的工作流会真正的流畅起来。
· 更强大的字体适应性:SVG，与Adobe工具一起，为网页设计者提供独一无二的排版控制，应用TrueType和Type1字体以及可选的能够适应无限缩放的字形，还有调整路径文本的字距，网页设计者将最终拥有和他们的印刷伙伴同等水平的版面了。
· 专业化的颜色控制:支持ICC颜色概貌、sRGB颜色、透明度、剪贴路径、渐变、反锯齿等等，SVG这么强大的功能意味着你不必为你进行在线使用的设计感到笨拙和无奈。你可以做你能做到的最好的作品--去创造、探索和革新，不必担心受网页的条件的限制。
· 脚本支持:SVG是一个用XML技术开发的应用程序，它与JavaScript, CGI, Cascading Style Sheets (CSS), 和Document Object Model (DOM)（文件对象模式）都不同，它让网页设计者和开发人员给图形带来了更强的互动性。图形将能够对用户的动作做出某种当前不可能有的程度上的反应。
· 多媒体交叉的解决方案:SVG 将兼容主流图形格式和Web软件，就像Adobe Illustrator 和 Adobe GoLive?，以便你能够将高质量的绘画图形应用到使用SVG的网页上，而不损失质量或视觉效果--并且不需要学习新的软件。当要改主意把一般的绘画图 形放到网上使用，不再需要为原稿到网页稿分别创建独立的版本了。
· 与当前技术的兼容:SVG不会要你必须重复发明车轮，因为它明确和直观地整合了当前Web技术，如HTML、GIF 和JavaScript。其中最好的是，它是完全的基于XML从始至终为下一代网页设计的
SVG将在Web实现复杂的排版样式，设计师将从用户有限的字体、位图或者用户显示类型中解放出来。
落实到商业价值
Scalable Vector Graphics (SVG)（可升级的矢量图形）格式超过旧的网页光栅图形格式（比如GIF和JPEG）提供了几个至关重要的优点，这些能够为你提供实实在在的综合效益并减轻你的财政压力：
· 为你缩减成本:SVG的降临将缩短内部图形的开发时间，因为它在同一个应用程序中完成在线使用图形和以打印为目的 的图形成为可能。SVG丰富的图形功能（包括透明度，多彩的颜色面板，渐变，和强大的排版能力）意味着你的设计作品从束缚中跳出来或者不必以牺牲图像品质 来创建友好的网页图形。另外，SVG的压缩文件将以最小程度来保存资源，减轻你的服务器的压力。
· 现有资源的杠杆作用:因为SVG是基于由W3C和它的成员公司开发的明显开放的格式，如Adobe, Microsoft, and Netscape，所以你不需要让你的内部图形设计者和开发者去学习新的软件或放弃现有的工具和技术。它们能够无缝地整合基于XML的SVG和HTML, CSS, JavaScript, CGI以极其它的网页技术--他们能够继续使用他们已经使用的软件。
· 保留你的法人身份:SVG 扩展的颜色（16,000,000种颜色）支持和强化的排版功能意味着你可以使用你想用的字体和任何合成颜色--对于当今的网页来说完全不可能。可调整字 距，可选择字形，可搜索文本，甚至打印充满图形和图案的文件，这一切在SVG格式中都被支持。你将不需要为了网页的兼容性向各种浏览器标准妥协。
· 让你的网站用户开心:SVG为裤子的在线提浏览供各种方式：缩放、可变的轮廓、排版、色彩鲜明的菜单等等，这些都意味着个更加有效的互动性，为在线使用间接的打印质量和方便下载的更小图形。简而言之，为你的网站用户提供更快捷、更好的交互性，这将鼓励它们一遍又一遍的回头光顾你的网站。
Adobe产品将全线支持SVG，让设计师跟加容易地在印刷和Web上使用插图，这将极大地节省图像下载的时间。
|
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 用SVG跨越位图屏障
(订阅本版)
2006/1/11 9:42:00
新浪微博
