居然有女性舞团要起名叫“个别的十一人”,还要把组织的标志印在衣服上,这难道就是传说中的同人女COSPLAY组织或者SOS团么……不管怎样,我在元旦时接到的一项新任务是帮人做矢量图,包括攻壳机动队SAC里的“笑脸男人”和“个别的十一人”……
本来准备拿Adobe Illustrator来做,但平时用的很少,加上经常看那些用Illustrator做的华丽UI图标,有些心理阴影……做起来很不顺利。不过在导出图片时我看到有SVG格式,便突然觉悟了!
真正的矢量图,就应该是手写生成的哑!
于是先翻SVG的教程,因为很多标签和属性都忘了……IBM DW里的《SVG-可伸缩向量图形介绍》很不错,不能下载的话也可以去这个XML论坛。
看完之后画笑脸男人那种图形基本上就没问题了……作品在此:
http://demo.limboy.com/laughingman.svg
个别的十一人就更简单了:
不直接放在BLOG里是担心影响访问速度,IE7、Firefox1.5+、Opera 8+都支持直接显示SVG,但目前看来只有IE7支持的最好(3/20/2007更新:不好意思,误导大家了…可能以前机器上装了ADOBE SVG Viewer,没发现IE7不支持SVG-___-b 请参考这篇SVG in IE7?),Opera支持的是不完全版SVG规范。Firefox2.0里仍然不支持少量属性,具体的项目在MDC的文档里有详细说明,主要问题是不支持动画(Animation)和滤镜(Filter),另外,渲染速度也不够理想,我做的笑脸男人可以明显测试出这种区别,因为不能用Animation,所以那段塞林格的文字环绕旋转效果是用JS做的,有部分对DOM的操作,在IE7里要更流畅。目前正在开发的Firefox3,其中一项特性就是会提高SVG的渲染效率,希望尽快推出罢。
把SVG插入到网页里很简单,也是用IMG标签,外面套上object标签,也可以用embed,但最好别用,因为兼容性不好,不符合标准,而object是一个很有前途的标签!在xhtml2.0里,它将会取代img……
随便找个文本编辑器打开图片,可以看到代码很少,比Illustrator导出的图要简洁的多,只有3KB,这也是手写的好处。需要注意的问题一个是中文文本的字体属性,为了兼容浏览环境,最好加上font-family=”Simsun”之类的属性指明字体,字体名称必须用英文。画普通曲线时,用”a [x轴半径], [y轴半径] [旋度(效果没试出来)] [方向(有点类似4个象限)] [终点坐标]”
文档内的JS有点麻烦,因为是依赖SVG DOM,跟网页里JS的有一些不同,我主要参考了这篇Javascript, SVG and DOM,IBM DW里也有一个文档:《使用脚本动态操作 SVG 文档》