| 文章索引 |
|---|
| 蓝骑士SVG教程:SVG后续工作 |
| 第一课 SVG国际标准化 |
| 第二课 SVG简易性和可获取性 |
| 第三课 优化SVG图像 |
| 第四课 关于自安装的SVG浏览器 |
| 第五课 SVG后续工作 |
| 第六课 关注SVG未来 |
| 所有页面 |
本教程是蓝骑士SVG教程的第五部分，介绍了SVG国际标准化、简易性和可获取性，以及优化SVG图像、关于自安装的SVG浏览器内容。
目录结构
- 第一课 SVG国际标准化
- 第二课 SVG简易性和可获取性
- 第三课 优化SVG图像
- 第四课 关于自安装的SVG浏览器
- 第五课 SVG后续工作
- 第六课 关注SVG未来
SVG,作为XML的一种应用,支持统一字符编码标准,支持作为全球机器语言基础的16-位编码.
SVG也提供了一种通过控制字体来显示文本的机制,这种机制允许显示统一字符编码标准没有定义的字体,同时不违反提高规范协作性的指导方针.
SVG还支持垂直标意的文本格式(vertical-ideographic text)和阿拉伯文本格式(Arabic bi-directional text).
当前的网页大部分注重内容,而达不到视觉的简易性.所以,制作更可视化的网页成为首要关心的问题.SVG技术可以提供优良的工具通过图片的形式更好的把内容展现给浏览者.
事实上,SVG图像可以不借助第三方的放大控件而直接对图像进行放大.SVG图像天生的就较其他格式的图像更简易和可获取,因为它是用文本书写的XML 文档,而不是像素点阵.(title)和(desc)标签可以用来描述关于SVG图像的整体文本信息(就像在"San Jose"城市地图中描述的),并提供图像中的物件的相关信息.SVG规范包括了对SVG生成器的一致性要求,这也使SVG图像制作更简易和可获得.
下面的例子展示了使用(desc)标签来提供相关的参考信息.仅仅在屏幕上,浏览者就可以在SVG图像中获取关键的信息,而用其他格式制作的图像,这样的信息很有可能就被丢失了.
作为一个SVG图像简易性的演示,请用鼠标点击下面的图像,然后按下键盘"T"键,再按下"D"键,我们可以在下面的文本框中看到图像"title"的相关信息.详细请查看SVG源文件,标签是如何保留图像信息的.
SVG支持CSS2,这表明用户可以设计个性化的样式表,显示一些独特的特性.简便产生可获取的图像的指导方针可以让用户以定义的样式表来显示图像.例 如,纯红和纯绿可以以用户自定义的更柔和的色彩来显示,或者较细的线条可以被较粗的线条代替显示.尽管目前SVG的某些方面还不是很完善,但很好支持样式 表确实一条正确的发展道路.
这些特征也能被用于发展一些低层的媒体类型,例如PDA和其他的移动或无线装置.SVG图像可以保证 相当的品质.一幅全彩的矢量化的交互动态SVG图像不仅能用于桌面系统,也可以适用于很多的无线装置.这里的关键就是SVG采用的是XML数据和样式表. 另一方面,一幅全彩的矢量化的交互动态SVG图像所包含的有用内容和一幅压缩的,16色的SVG图像所包含的有用内容是一样的.
通过Illustrator优化SVG图像 Adobe Illustrator允许定制输出SVG,通过控制"单一化","字体植入","压缩"来优化文件大小.
复杂图像(特别是从其他应用程序如Adobe Streamline或者Adobe Dimensions中导入的图像)一般在输出前需要通过单一化滤镜滤过.更少的矢量点意味着更小的文件尺寸.
当你需要显示一些浏览者的系统里并未安装的独特字体时最好使用字体植入.否则,文字将会被破坏.在植入字体时,你需要选择"最少量"的选项,"所有文字 字体植入"应该尽量少用.当然,创建一系列使用统一字体的SVG文件时,只需要植入一次字体,而在所有的文件中创建与植入字体的关联就可以了.字体将在客 户端的缓存中被存储.,一旦被下载,所有文件就立刻可以被正确显示. Gzip压缩格式是最新公布的Illustrator SVG格式,它能显著的减小SVG的文件大小.下面是一些统计数据:
| 未压缩的SVG | W/gzip压缩 | 压缩比 |
| 30,203 | 8,680 | 71% |
| 12,563 | 3,048 | 83% |
| 7,106 | 2,395 | 66% |
| 6,216 | 2,310 | 63% |
| 4,281 | 2,198 | 49% |
其他压缩方法 除了Illustrator自身的压缩方法,其他还有很多:
1.尽可能的使用默认值而不自定义属性
2.引用路径数据的压缩工具--使用相关的物件;使用h和v来代替水平直线和垂直直线;尽可能的使用s和t的二次函数来表示贝赛尔曲线;除去冗余的量
3.多次出现的图像使用同一个symbol(标志)
4.使用CSS遗传特性提高样式表的通用程度
5.使用滤镜效果直接输出图片而不要在客户端再进行操作
压缩的SVG 3.64 kb
压缩的 (<use>, gzip) 0.99 kb
JPEG (中等品质) 9.62 kb
GIF (256色) 12.77 kb
为了使没有安装SVG浏览器的终端用户能够浏览SVG图像,Adobe提供了一些可植入HTML页面的脚本语言来自动引导SVG浏览器的下载和安装.
当 一个没有安装SVG浏览器的用户浏览本页面时,本页将自动弹出一个窗口询问是否下载和安装Adobe SVG浏览器.如果用户选择"是",他们将被带入www.Adobe.com来完成浏览器的下载和安装.在安装完成之后,用户将会被带回本页,观看本页的 SVG图像.如果用户选择"否",那么所有的图片会被Adobe.com的标志所代替,如果用户点击了这些图片,他们可以再次开始SVG浏览器的自安装.
如何在你的页面实现SVG浏览器的自安装 为了使用本页的自安装脚本,你需要下载脚本文件"svgcheck.js"和"svgcheck.vbs" 下载
将这些文件放置在你的网战中,并在HTML的标签下加入下面的语句:
<script language="VBScript" src="/svgcheck.vbs"></script>
checkAndGetSVGViewer();
// -->
</script>
最后,需要给每幅SVG图像添加下列代码,当然,请根据你的图片手动调整高和宽:
emitSVG('src="/hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"');
// -->
</script>
<noscript>
<embed src="/hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</noscript>
除了手写和使用脚本语句完成SVG图像,现在也已经有了一些应用软件来制作SVG图像.这个教程着重介绍使用手写代码和使用Adobe Illustrator软件来完成SVG图像的制作.现在我们再介绍将SVG图像应用于网页和其他地方的一些后续工作.
SVG和Adobe GoLive
使用Adobe GoLive,你的SVG文件能够被添加入HTML.你可以使用(object)和(embed)标签来插入SVG文件,稍候的GoLive版本还将允许你直接编辑SVG文档.SVG和Microsoft Office
使用SVG ActiveX控件,你也可以将SVG文件加入Microsoft Office文件中.这一思想类似于在Office中插入EPS(外部存储页面)和位图文件.此外,还可以应用SVG制表,并可以动态产生图像和数据用于 在PowerPoint中演示或存储在Word文件中.SVG和FrameMaker
因为Adobe FrameMaker可以插入OLE控件,SVG图像也可以被用在FrameMaker文件中.就像使用其它的ActiveX控制一样,FrameMaker中植入SVG并不需要一定是静止文件,也可以是交互和动态的.毫无疑问,作为标准文件格式,SVG还有许多可以继续开发的应用价值和应用场所.
关注SVG未来的内容SVG中国曾有一篇详细的介绍文章，以下内容将引用“SVG的诞生历史与SVG的今天明天”的部分内容。
SVG最大的问题是没有完全支持SVG的浏览器出现。
主要问题是SVG本地运行环境的下厂家支持程度，SVG作为一个开放的通用矢量图形标准，各大软件厂商只考虑自身利益，不愿在其中投入过多资源开发相应的支持技术与产品。作为市场上占有率最高的Internet Explorer，微软一直没有兑现支持SVG，而力推自己的VML。
SVG与Flash、VML的竞争。
SVG面临的另一个问题是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题。
在2005年之前力推SVG技术的最大的商业公司非Adobe所属，并且该出版巨头对svg技术发展提供了非常重要的贡献。Adobe看中svg的优势，并推出在线浏览"Adobe SVG Viewer" 插件以支持显示svg，而这样做无非就是看中其未来的发展前景及巨大的商业价值。但"Adobe SVG Viewer"毕竟只是一种过渡性的软件，没有主流浏览器内置支持是无法普及SVG技术的，更无法谈起SVG在的商业价值。进入2005年，Adobe收购了Macromedia，并且开始淡化"Adobe SVG Viewer"的支援，就像wwwtiger提到的一样，这些都是出于其商业目的。
Flash背后是Adobe，VML背后的是微软。这些是企业利益的博弈，他们都寄望自己的格式占领主流以最大化自己的企业利益，而这些直接影响着SVG的发展速度。
不过，近年来SVG的普及情况可以用"逐步升温"来形容。
仔细浏览W3C组织的官方网站，你会发现2000年8月发布的SVG 1.0规范是候选推荐标准（Candidate Recommendation），而2003年4月发布的SVG 1.1规范变成了推荐标准（Recommendation），细微的差别说明了SVG地位的变化。另外，Adobe、微软、IBM等业内知名软件厂商正逐步加大对SVG的支持力度，各种浏览器端SVG插件纷纷亮相，众多专业矢量绘图工具也开始支持SVG标准。除了官方和厂家的支持外，基于SVG的Web图形应用程序如雨后春笋般的出现，SVG的应用范围也从原来单一的地理信息系统领域（Web GIS）向其他领域扩展。比如：
著名的 SVG 项目包括 Mozilla SVG Project，KDE 的 ksvg，以及 Amaya 等。
Mozilla Firefox自版本 1.5 发行后，即开始支援 SVG 格式的显示了。
基于 Java 的 SVG 项目主要有 Batik SVG Toolkit 等。
Opera 支持SVG显示……
另外Microsoft也计划在Internet Explorer 8.0支持SVG，当解决了这个SVG发展最大的障碍——不用插件，浏览器内置支持浏览SVG时，SVG的普及以及更多领域的运用时代也就到来了，这个日子的到来会比我们想像得快。我们有理由相信，SVG的明天会更好。
蓝骑士SVG教程到这全部完成，谢谢你看完本系列教程。
(THE END)
