居然有女性舞团要起名叫“个别的十一人”，还要把组织的标志印在衣服上，这难道就是传说中的同人女COSPLAY组织或者SOS团么……不管怎样，我在元旦时接到的一项新任务是帮人做矢量图，包括攻壳机动队SAC里的“笑脸男人”和“个别的十一人”……
本来准备拿Adobe Illustrator来做，但平时用的很少，加上经常看那些用Illustrator做的华丽UI图标，有些心理阴影……做起来很不顺利。不过在导出图片时我看到有SVG格式，便突然觉悟了！
真正的矢量图，就应该是手写生成的哑！
居然有女性舞团要起名叫“个别的十一人”，还要把组织的标志印在衣服上，这难道就是传说中的同人女COSPLAY组织或者SOS团么……不管怎样，我在元旦时接到的一项新任务是帮人做矢量图，包括攻壳机动队SAC里的“笑脸男人”和“个别的十一人”……
本来准备拿Adobe Illustrator来做，但平时用的很少，加上经常看那些用Illustrator做的华丽UI图标，有些心理阴影……做起来很不顺利。不过在导出图片时我看到有SVG格式，便突然觉悟了！
真正的矢量图，就应该是手写生成的哑！
于是先翻SVG的教程，因为很多标签和属性都忘了……IBM DW里的《SVG－可伸缩向量图形介绍》很不错，不能下载的话也可以去这个XML论坛。
看完之后画笑脸男人那种图形基本上就没问题了……作品在此：
http://www.ntrpg.org/yy/yy/study/laughingman.svg
个别的十一人就更简单了：
http://www.ntrpg.org/yy/yy/study/11.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 文档》
居然有女性舞团要起名叫“个别的十一人”，还要把组织的标志印在衣服上，这难道就是传说中的同人女COSPLAY组织或者SOS团么……不管怎样，我在元旦时接到的一项新任务是帮人做矢量图，包括攻壳机动队SAC里的“笑脸男人”和“个别的十一人”……
2 条评论:
IE7支持SVG????
是需要Adobe SVG Viewer，还是本地支持！
没有机会使用IE7，但是我想微软不会这么多的。
汗……原来不是内置的支持，我以前还奇怪为什么IE7里SVG的渲染效果比FIREFOX2还好……
发表评论