关于svg:在浏览器中显示矢量图形

关于svg:在浏览器中显示矢量图形

Displaying vector graphics in a browser

我需要在我正在工作的网站上显示一些交互式(附加DOM侦听器等和事件处理)矢量图形。尽管IE浏览器仍然无法识别此格式,但仍推荐使用SVG的W3C建议(对于公共网站)。 IE可以处理VML,甚至有JavaScript库可以根据浏览器(SVG与VML)进行一些类似于画布的绘制-exanvas,Dojo Toolkit的GFX等。尽管它们都不能显示来自给定标记的SVG图像,但这将是很好并且可以接受的。

因此,问题实际上包括几个部分:

  • 是否有跨浏览器Javascript库显示给定标记(不是必需的SVG)中的矢量图形,并提供附加到DOM事件的可用性?
  • 如果没有,哪种最流行的浏览器嵌入式技术最适合执行此任务?我可以选择Flex / Flash,Java applet。由于Windows锁定,因此无法选择Silverlight。
  • [EDIT]谢谢大家的评论/建议。以下是我对此事的一些随机注释/结论:

    • 我需要的交互级别是能够检测正在显示的矢量图像上的DOM事件-鼠标悬停,鼠标移出,单击等-并对它们做出反应,例如更改背景颜色,显示对话框等。
    • 坚持使用SVG格式的想法非常好,它在许多浏览器中都是固有的,但最受欢迎的浏览器是IE。经过一些显示动态SVG的试验后,我意识到IE版本7是最有问题的。由于浏览器不兼容,所以麻烦太多了。
    • 尽管我无法在IE7上使用示例,但Cake似乎是一个很棒的Javascript框架。
    • Java Applets-我最喜欢这个想法,尽管我可以使用Apache Batik库(一种优质的SVG渲染器)。但是,蜡染是一个很大的图书馆,我负担不起部署一个重达几兆字节的applet。
    • 我决定坚持使用Flex选项。我找到了一个不错的矢量图形库Degrafa。它使用自己的标记格式,但是可以识别SVG路径符号,因此在我的情况下,使用XSLT或仅解析它们来转换SVG将非常容易。

    [编辑2]还有更多评论。我想澄清的是," Windows锁定"是指Silverlight通常可以在Windows(尤其是IE)上运行的情况。我怀疑它是否在其他系统上是公认的解决方案(例如Flash或Java Applet)。是的,毫无疑问,我可以在任何系统上启动Silverlight应用程序,尽管我担心这对于普通用户来说会花费很多精力。

    @Akira:IE7上的那些" SVG渲染器"是否有问题?我一直都抛出Javascript错误。


    Safari,Opera和Firefox都以不同程度的完整性和正确性原生支持SVG(例如,没有插件),包括从javascript编写svg的功能。

    还有一个canvas元素,现在已在html5中进行了标准化,并且在上述浏览器中也已受支持(由于html5草案相对较新的更改,在某些特殊情况下存在各种怪癖)。

    不幸的是,任何基于标准的方法都会因IE故意忽略其自身生态系统之外发生的事情而被破坏,但是有许多库试图将canvas / svg转换为iecanvas等VML(IE专有的矢量语言)。

    [编辑:哎呀,我忘了我最喜欢的js库-Cake!可以解析并在画布中显示svg,并且相信它也支持IE]

    [另一个编辑:Cake实际上有一个演示,我正在做您想做的事情]


    看一下Raphael Javascript库。现在还很早,但是看起来很有希望。

    我记得IE7.2中列出了具有SVG支持的IE路线图。

    取决于您要如何互动?


    您能否阐明Silverlight中" Windows锁定"的含义?它可以在Windows和MacIntel上运行,矢量部分可以在带有Moonlight插件的Linux上很好地运行。

    您是否因缺少Amiga支持而被淘汰?


    Walter Zorn拥有一个用于任意矢量图形的JavaScript库。看起来不错。


    看看已经在许多浏览器中实现的新Canvas元素。我也听说有一个IE的ActiveX控件也实现了Canvas元素。

    更新:等等,你已经说过了。下次我应该阅读整个问题! :)


    在您列出的所有可能性中,Flash并不是对现有技术(Javascript),几乎不受支持(SVG,Canvas元素)或大量工作(Java)的可怕滥用。它被设计为矢量图形包,并且与SVG和canvas标签相比,与更多浏览器兼容。

    我不会选择Flash替代所有其他选项的唯一原因是,如果您的目标是移动浏览器,或者没有Flash软件包的预算。


    我认为SVG并不是未来的好选择。从维基百科:

    • "最常见的IE插件是由Adobe生产的。但是,Adobe计划在2009年初撤回该产品。"
    • " ... Internet Explorer在即将发布的IE8版本中也将不支持SVG"
    • " ...所有人都不完全支持SVG 1.1 ..."
    • " Corel SVG Viewer插件曾经由Corel提供。其开发已停止。"

    IE支持VML,但没有其他功能,而且很难看。微软声称已经删除了它(包括新的XAML及其它),但它仍然是其Office XML格式的一部分(这很奇怪,这就是Excel .xlsx支持注释的方式)。

    FX和负载更多支持新的Canvas元素。许多支持SVG,但是考虑到MS在Silverlight上所做的工作,我很快就看不到IE支持SVG。

    Microsoft应该为没有MS操作系统的用户提供Silverlight插件。

    我一直在使用Flex-尽管使用Eclipse还是不错的。您无需购买价格昂贵的Adobe服务器组件即可使用Flex,因为它可以使用SOAP服务。

    Flex的开发工具价格合理,几乎每个人都有Flash。


    选择SVG-并告诉用户获得IE的ADOBE SVG插件。

    看到这个优秀的网站-这是英国政府网站(公共服务)

    埃尔金


    推荐阅读