有一个令许多AntiFlasher喜大普奔的消息,就是Adobe今日宣布了开源的Snap.svg API,我马上屁颠儿屁颠儿的跑去看。

[![](http://tiger-a-s-s.tobybai.cn/%2525E5%2525B1%25258F%2525E5%2525B9%252595%2525E5%2525BF%2525AB%2525E7%252585%2525A7%2525202013-10-28%252520%2525E4%2525B8%25258A%2525E5%25258D%25258812.34.05.png)](http://tiger-a-s-s.tobybai.cn/%2525E5%2525B1%25258F%2525E5%2525B9%252595%2525E5%2525BF%2525AB%2525E7%252585%2525A7%2525202013-10-28%252520%2525E4%2525B8%25258A%2525E5%25258D%25258812.34.05.png)
最初的二十分钟里,我确实有点兴奋,初级教程的过程看起来是如此地清晰,这种教程风格我超级喜欢(左边显示运行结果,右面是对应部分代码。)但当我动手时遇到了如下问题。 我下载了最新版本的Snap.svg-0.1.0.zip包,里面的例子要么不能运行,例如test文件夹中那些看起来像是单元性学习的例子们,却因为test.html主文件中引入的如下两个js文件找不到而无法运行:

我去查了才发现这是两个Node.js的插件,我决定去看一下官网Demo里那个富含呆萌气质的类monopoly游戏源代码,然后我发现他们都是这样婶的:
[![](http://tiger-a-s-s.tobybai.cn/%2525E5%2525B1%25258F%2525E5%2525B9%252595%2525E5%2525BF%2525AB%2525E7%252585%2525A7%2525202013-10-28%252520%2525E4%2525B8%25258A%2525E5%25258D%25258812.38.38.png)](http://tiger-a-s-s.tobybai.cn/%2525E5%2525B1%25258F%2525E5%2525B9%252595%2525E5%2525BF%2525AB%2525E7%252585%2525A7%2525202013-10-28%252520%2525E4%2525B8%25258A%2525E5%25258D%25258812.38.38.png)
我知道这是svg格式的点路径数据,和用惯了Flash开发思路的办法相比,这感觉好像一只小比熊被抱到你面前, Flash的做法是, 由动画师告诉你:“这是一只小比熊哦~它会跑,会摇尾巴,会叫,会便便……”, 而Snap给我的感觉是, 由法医告诉你:“这是一只被肢解了的小比熊哦,你看这段白色粘稠的连续的凝胶状物质是它的脊柱神经中枢哦,如果你有效地刺激从A段到G段之间的部分,它就会连续抽搐产生一个蹬腿儿的效果……”

嗯,我只是开个玩笑而已啊~作为一个以写代码为主要谋生手段的人,我当然明白这些“让这个东西看起来好看”的事儿应该由专业美术人员去做好了再发送给你,我们用就可以了。诸多细节是不应该由我们来把控的,只是忽然这么一坨热气腾腾错综复杂的东西迎面而来,感觉就不太好。

想当然地,Snap支持加载外部svg文件,它可以由许多知名的矢量绘图工具生成对应的svg文件,比如:Illustrator, Inkscape, or Sketch,这就应该是Snap的开发流水线的上游了,于是我去Down了一个Sketch。并用它画了一只Rubber Duck,具备Flash使用经验的前提让我对拧巴这些个曲线没有任何陌生感。
在Sketch中它是这样婶儿的:

[![](http://tiger-a-s-s.tobybai.cn/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202013-10-29%20%E4%B8%8B%E5%8D%882.38.37.png)](http://tiger-a-s-s.tobybai.cn/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202013-10-29%20%E4%B8%8B%E5%8D%882.38.37.png)
可是当我导出并用Snap加载显示之后,就变成了这样婶儿的:
一些细节被扭曲了,鸭子的嘴角,和翅膀,也许我应该用Illustrator再画一遍。
我觉得,Svg想普及到如Flash一般,首先要有强大的上游设计生产工具做支撑(例如Edge Animate,Adobe,你可以的)其次在各个浏览器上的性能也有待提升,至于我尚未进行动画操作部分的体验,我会继续体验了~
Snap.svg官网现在还存在以下问题:
  1. 木有讨论区。
  2. Demo们都不是很初级,而教程又太初级,缺乏中间衔接的样例,例如曲线绘制,动画的使用,滤镜的使用部分。
  3. Api Reference非常不好用,左边的目录栏会和内容同时滚动,感觉是仓促拿出来的未分段的所有内容(说它仓促又精心地设计了CSS样式……)
    Chrome浏览器在用Blogger嵌入外网页面iframe时,会出现一些未明的错误,例如不能保存,不能正确加载外网页面等问题。
    资源:
    [Snap.svg](http://snapsvg.io/)
    [Sketch](http://www.bohemiancoding.com/sketch/)
    [iFrame Generator for Blogger](http://www.makingdifferent.com/online-iframe-generator-tool-for-blogwebsite/)