SVG——新一代Web设计及互动媒体的革新

蓝骑士SVG教程:SVG从Illustrator起步

文章索引
蓝骑士SVG教程:SVG从Illustrator起步
第一课 输出SVG和SVGZ格式
第二课 为SVG构造字体子集
第三课 Illustrator中SVG植入字体的定位
第四课 Illustrator中SVG图像栅格定位
第五课 Illustrator中SVG的进制选择
第六课 Illustrator中SVG编码的选择
第七课 Illustrator中SVG样式表(CSS)属性定位
所有页面
蓝骑士的Illustrator SVG中文教程指南   本教程是蓝骑士SVG教程的第二部分,为Illustrator的一般用户、行业用户(出版线稿的设计者和专业插画家、生产多媒体图像的艺术家、还是互联网页或在线内容的制作者以及其它相关行为人员),为Illustrator制作SVG格式图形提供指导。

来源:啄木鸟Pythonic开源社区

  你被JPEG搅的疲惫不堪吗?或者是被GIF搞的头昏眼花?一直到你连颤抖都无力?听上去你似乎得了bitmap忧郁症......该是清醒的时候了,加入到矢量图的革命吧,来探索SVG的奥秘。

  除了自身的优点外,SVG支持可升级矢量图片。这是基于XML的矢量图片格式,最近刚被W3C组织开发出来。W3C组织包括了Adobe,IBM,Netscape,Sun,Corel,Microsoft等国际著名公司。

   SVG并不是你通常去使用的图片格式,它是提供给网页设计师来精确控制版面,字体,颜色,和页面的印刷效果的工具。这里包含很多很酷的东西,划分图片, 使用任何你希望的字体,甚至最佳的打印出你的页面效果。难道你还坚定要痛苦的考虑文件尺寸而使用被压缩的很难看的GIF图片吗?

  SVG的秘密是什么?

  有两点:1,SVG是简单的文本格式。这意味着这种图片可以用最古老的文本编辑器来编辑;2,SVG使用XML语言。这是下一代的网页标示语言。

   那么你该怎样勇敢的进入这一关于矢量网页图片的新世界呢?使用标准工业格式的矢量图生成软件----Adobe Illustrator 9.0,利用标准的矢量工具和输出器你能最迅速简单的创建自己的多媒体杰作。你的矢量才能就能被任何带有SVG浏览器的网页浏览器看到。

图1 Illustrator与SVG


   尽管按照W3C规范书输出的*.SVG文件本身已经很小,Adobe Illustrator 9.0依然提供SVG的压缩格式---*.SVGZ。它使用了开放源码无版权的工业标准压缩格式"gzip"来压缩SVG文件。压缩后的SVGZ文件压缩 率是50%到80%。利用Adobe SVG浏览器解压时,对于用户而言几乎没有显著的延滞感。

  如果你使用的SVG浏览器不支持解压缩,那么压缩文件中嵌入的标签能自动引导下载最新的解压版本。

  通常,在输出时请按下列步骤执行:

  1,选择file->Export
  2,选择你所要保存的文件夹和文件名
  3,在输出对话框选择SVG格式或SVGZ格式,选择使用的是Windows或Mac OS系统
  4,在SVG选项对话框,设置输出参数

图2 Illustrator中输出SVG选项
  字体构造子集里将插入你在SVG文件中所使用到的字符,构造出一个单独的字体子集。

  字体构造子集是一种减小SVG尺寸的方法。如果使用象形字体,那么仅把在文件中使用到的字符集合在一起构造一个象形字体子集。如果使用普通英文或罗马文字体,那么仅把在文件中使用到的字符集合在一起构造一个普通英文或罗马字体子集,而不是包含所有的罗马字符的字体。

图3 Illustrator中输出SVG字体选项


   植入字体定位功能使你能直接在文件中植入字体(你所使用的字体将包含在文件里),或者连接一个从Illustrator中独立输出的包含字体的SVG文 件。后一项功能使你在多个文件使用相同字体时特别有效,就像CSS样式表让多个页面可以共享相同的设置属性。Illustrator将输出字体存储为 CEF格式(压缩的植入字体)。CEF格式允许你使用Type1和TrueType字体,并且在CEF中保留原始的字间距等信息。CEF字体文件,即使使 用所有的典型字体,存储后文件尺寸仍然比原来的字体文件要小大约10K。CEF格式不是SVG规范中特别定义的。如果浏览者的SVG浏览器不支持这种格 式,那么字体将被用户所使用系统中最相近的字体替代。一般而言,这样的代替,效果还是可以接受的。

图4 Illustrator中输出SVG字体选项


   图像栅格定位选项允许你在输出的图像文件中直接保留图像的栅格信息(也就是栅格信息始终包含在文件里面),或者将Illustrator原始文件用 JPEG图像来关联(类似于外部文件关联)。就像在上一课中我们介绍的字体关联一样。这后一个选项在你使用多个SVG文件时特别有效,他们将共享一个图像 文件。提请注意的是:SVG输出使用梯度栅格;被栅格的图像将不包含Alpha通道,这一点不同于PNG图像格式。

图5 Illustrator中输出SVG图像栅格选项


  进制选择让你能选择输出矢量的精确度。你可以在1到7之间选择一种进制。选择较大书将增加文件尺寸但能提高图像质量。一般应用中,通常取进制3。

图6 Illustrator中输出的进制选项


   编码选项使你在图像编码时可以从ASCII字符和国际统一标识字符(UTF)中选一种。UTF-8是8位的,UTF-16是16位的。对于许多欧洲语种 ASCII字符已经足够了,但对于一些特殊语种如中文,日语和希伯来语(以色列语种),就需要使用UTF格式。这是一种使你的SVG更本地化和更适用的工 具。例如,SVG可以根据用户使用的语言,自动选择合适编码的图像。在同一风格的基础上,提供给了不同用户最适宜的产品。

图7 Illustrator中输出的编码选项

 


   样式表(CSS)属性定位选项让你可以在三种存储方式中任选一种:默认的方式是Style Attributes (Entity Reference),优点是更快的显示图像和减小图像尺寸。Style Attributes方式是文件具有更好的可读性和可理解性,但会相应增加文件的尺寸。当你想为SVG和HTML创建一个通用的样式表,则可以选择 Style Elements方式,当然这会相应的减慢文件的显示速度。

图8 Illustrator中输出的样式表(CSS)选项

   继续下一步学习,请进入蓝骑士SVG教程:SVG基础部分。

(THE END)

 

将要更新