Alex Rivera | Logout

Displaying vector graphics in a browser

Asked 2008-08-13T09:43:53.787
28

I need to display some interactive (attaching with DOM listeners etc. and event handling) vector graphics in web site I am working on. There is a W3C recommendation for SVG though this format is still not recognized by Internet Explorer support of which is a must (for a public website). IE handles VML though and there are even javascript libraries that do some canvas-like drawing depending on a browser (SVG vs. VML) - excanvas, GFX of Dojo Toolkit and more. That would be nice and acceptable though none of them can display an SVG image from the given markup.

So the question actually consists of several parts:

  1. Are there any cross-browser Javascript libraries that display vector graphics from given markup (not obligatory SVG) and offer availability to attach to DOM events?
  2. If there are not, which of the most pupular browser-embedded technologies would be most suitable for doing such a task? I can choose from Flex/Flash, Java applet. Silverlight is not an option because of Windows lock-in.

[EDIT] Thank you all for your comments/suggestions. Below are just some my random notes/conclusions on this matter:

  • The level of interactivity I need is ability to detect DOM events on the vector image being displayed - mouseover, mouseout, click etc. - and ability to react on them like changing background color, displaying dialog etc.
  • The idea of sticking with SVG format is quite well as it is native on many browsers except the most popular one - IE. After some experimenting with displaying dynamic SVG I realized that IE version 7 the most problematic. There's too much hassle because of browser incompatibilities.
  • Cake seems a great Javascript framework, though I could not get the examples w
cross-browser svg vector-graphics vml
Edit
Report

2 Answers

0

IE supports VML, but nothing else does and it's ugly. Microsoft claimed that they'd dropped it (with new XAML and all) but it's still part of their Office XML format (it's how Excel .xlsx supports comments, weirdly enough).

FX and loads more support the new Canvas element. Many support SVG, but given the work MS are doing on Silverlight I can't see IE supporting SVG any time soon.

Microsoft are supposed to be providing Silverlight plug ins for no MS operating systems.

I've been using Flex - it's pretty good despite using Eclipse. You don't need to buy the hugely expensive Adobe server components to use Flex - it can consume SOAP services.

The dev tools for Flex are quite affordable, and nearly everyone has Flash.

answered 2008-08-13T10:12:54.227
0

Of all the possibilities you list, the only one that's not a horrible abuse of an existing technology (Javascript), barely supported (SVG, Canvas element) or a lot of work (Java) is Flash. It was designed as a vector graphics package and is compatible with more browsers than SVG and the canvas tag.

The only reason I wouldn't choose Flash over all other options is if you're aiming at mobile browsers or don't have the budget for the Flash package.

answered 2008-08-13T12:43:36.933

Your Answer