jQuery的SVG与拉斐尔
我正在使用SVG和JavaScript / jQuery交互式界面，我试图在Raphael和jQuery SVG之间做出决定。 我想知道
- 两者之间的折衷是什么？
- 发展势头似乎在哪里。
我不需要Raphael的VML / IE支持，也不需要jQuery SVG的绘图function。 我主要感兴趣的是在SVGcanvas上创build，animation和操作单个项目的最优雅的方式。
我最近使用了Raphael和jQuery SVG，这里是我的想法：
拉斐尔
优点：一个好的入门库，很容易用SVG做很多事情。 写得很好，有文件logging 大量的例子和演示。 非常可扩展的架构。 很棒的animation。
缺点：是SVG标记上的一层，使用SVG很难做到更复杂的事情 – 例如分组（它支持集合，但不支持组）。 编辑已经存在的元素不会很好。
jQuery SVG
优点：一个jQuery插件，如果你已经使用jQuery。 写得很好，有文件logging 大量的例子和演示。 支持大多数SVG元素，可以轻松地本地访问元素
缺点：架构不如Raphael可扩展。 有些东西可以更好的logging（比如configurationSVG元素）。 编辑已经存在的元素不会很好。 依靠animation的SVG语义 – 这不是太好。
SnapSVG作为Raphael的纯SVG版本
SnapSVG是Raphael的继任者。 它仅在支持SVG的浏览器中受支持，几乎支持SVG的所有function。
结论
如果你正在做一些简单快捷的事情，拉斐尔是一个简单的select。 如果你要做更复杂的事情，我select使用jQuery SVG，因为我可以比Raphael更容易地操作实际的标记。 如果你想要一个非jQuery的解决scheme，那么SnapSVG是一个不错的select。
对于后人，我想说明的是，由于API和“免费”IE支持，我select了Raphael，也因为活跃的开发看起来很有前途（例如事件支持刚刚添加到0.7）。 但是，我不会回答这个问题，而且我仍然有兴趣了解其他人使用Javascript + SVG库的经验。
我是Raphael的狂热粉丝，发展势头看起来很强劲（上周晚些时候发布了0.85版本）。 另外一个好处就是它的开发者Dmitry Baranovskiy目前正在研究一个Raphael charting插件g.raphael ，它看上去像是非常漂亮（ Flickr早期版本的一些输出样本） 。
但是，为了让另一个可能的竞争者join到SVG库中，Google的SVG Web确实看起来非常有前途（尽pipe我不是Flash的粉丝，它在非SVG兼容的浏览器中使用它）。 可能只有一个可以观看，特别是即将举行的SVG公开会议 。
拉斐尔绝对是更容易设置和开始，但请注意，在拉斐尔中，有些方法在SVG中expression是不可能的。 如上所述，没有“团体”。 这意味着你不能实现坐标转换的图层。 相反，只有一个坐标变换可用。
如果你的devise依赖于嵌套的坐标变换，Raphael不适合你。
呵呵，自从六月份以来，拉斐尔已经有了很大的进步 有一个新的图表库，可以使用它，这些非常醒目。 Raphael还支持完整的SVGpath语法，并结合了真正的高级path方法。 来看看我的网站1.2.8+（无耻的插件），然后从那里反弹到德米特里的网站。 http://www.irunmywebsite.com/raphael/raphaelsource.html
我认为这不完全无关，但是你认为canvas？ 像过程JS的东西可以使其更简单。
你也应该看看svgweb。 它使用Flash在IE中呈现svg，并可select在其他浏览器上（在支持比浏览器本身更多的情况下）。
我将投票支持拉斐尔 – 跨浏览器支持，干净的API和一致的更新（到目前为止）使它成为一个喜悦使用。 它也和jQuery一起玩的很好。 处理是很酷的，但作为目前stream血的东西的演示更有用。
作为一个Javascript初学者，我发现Rapahel样本不是那么容易，我推荐http://cancerbero.mbarreneche.com/raphaeltut ，这是一个真正的一步一步的教程。
对于那些不关心IE6 / IE7的人来说，写Raphael的人就是专门为现代浏览器构build了一个svg引擎： Snap.svg ..他们有一个很好的文档，里面有很好的文档： http : //snapsvg.io
snap.svg无法轻松使用，可以操作/更新现有的SVG或生成新的SVG。 你可以在snap.io关于页面上阅读这个东西，但是这里是一个快速的运行：
缺点
- 要使用捕捉的function，您必须放弃对旧浏览器的支持。 Raphael支持IE6 / IE7等浏览器，捕捉function只支持IE9以上，Safari，Chrome，Firefox和Opera。
优点
-
实现了SVG的全部function，如遮罩，裁剪，图案，完整渐变，组等等。
-
能够使用现有的SVG：无需使用Snap生成内容以便与Snap一起使用，从而允许您使用任何通用devise工具创build内容。
-
全面的animation支持，使用简单易用的JavaScript API
-
与SVGstring（例如，通过Ajax加载的SVG文件）一起工作，而不必实际先渲染它们，类似于资源容器或精灵表。
检查一下，如果你有兴趣： http : //snapsvg.io
既然这里没有提到：你也应该看看Dojox.drawing ，它也提供了很好的SVG绘图function。 它有一个相当令人印象深刻的function。 我只是用它开始一个项目，但在我看来，对Raphael和JQuerySVG来说，它是远远优于（至less在function方面）。
这个介绍说服我用它代替Raphael / JQuerySVG： http ://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
参考： http : //dojotoolkit.org/reference-guide/dojox/index.html
关于Dojocampus： http ://docs.dojocampus.org/dojox/drawing
下载Dojo（包括Dojox）： http ://dojotoolkit.org/download/
另一个svg JavaScript库你可能想看看是d3.js。 http://d3js.org/
我更喜欢使用RaphaelJS，因为它具有很好的跨浏览器function。 但是，使用RaphaelJS（复合渐变…）无法实现某些SVG和VML效果。
Google也开发了一个自己的库来支持IE中的SVG： http : //svgweb.googlecode.com/files/svgweb-2009-08-20-Bzip
如果你不需要VML和IE8支持，那么使用Canvas（例如PaperJS）。 查看最新的Windows 7 IE10演示。它们在Canvas中有惊人的animation。 SVG不能做任何接近他们的事情。 整体canvas可在所有移动浏览器上使用。 SVG在Android 2.0-2.3的早期版本中不工作（据我所知）
是的，canvas不是可缩放的，但速度如此之快，以至于您可以更快地重新绘制整个canvas，然后浏览器能够滚动视图端口。
从我的angular度来看，微软的优化提供了使用Canvas作为常规的GDI引擎的方法，并且实现了graphics应用程序，就像我们现在为Windows所做的那样。
