Menu
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:
[EDIT] Thank you all for your comments/suggestions. Below are just some my random notes/conclusions on this matter:
[EDIT 2] Some more comments appeared. I'd like to clarify that by "Windows lock-in" I mean the situation that Silverlight would normally run on Windows, more specifically, IE. I doubt it is an accepted solution (like Flash or Java Applet, for instance) on other systems. Yes, I have no doubt that one is able to launch Silverlight app on any system though I fear it would be too much effort for an average user.
@Akira: Have you had any problems with those "SVG renderers" on IE7? I get thrown Javascript errors all the time.
869
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
Using an <img> tagThe <img> tag is now supported across all major browsers that support SVG (IE9+). Both available.
Vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The SVG format allows us to create powerful vector graphics for use on the Web.
svg: The Scalable Vector Graphics format is based in XML (a markup language used widely across the Internet that's readable by both machines and humans). It's useful for the web, where it can be indexed, searched, and scripted.
Safari, Opera and Firefox all support SVG natively (eg. without plugins) to varying degrees of completeness and correctness, including the ability to script the svg from javascript.
There's also the canvas element which is now being standardised in html5, and is already supported in the above browsers as well (with various quirks in certain edge cases due to relatively recent changes in the html5 draft).
Unfortunately any standards based approach is kind of destroyed by IE's willful disregard of what is happening outside its own ecosystem, however there are a number of libraries that try to convert canvas/svg into VML (IE's proprietary vector language) such as iecanvas.
[Edit: whoops, i forgot my favourite js library -- Cake! which can parse and display svg in canvas, and believe supports IE as well]
[Yet another edit: Cake actually has a demo doing what i think you want to do]
164
Take a look at the Raphael Javascript library. It's early days but it looks very promising.
I remember the IE roadmap that had SVG support listed in IE7.2.
Depends on how interactive you want it?
24
Can you clarify what you mean by the "Windows lock-in" thing with Silverlight? It runs on Windows and MacIntel, and the vector portions run just fine on Linux with the Moonlight plugin.
Were you thrown off by the lack of Amiga support?
2
Have a look at the new Canvas element which has been implemented in many browsers. I heard also that there is an ActiveX control for IE that implements the Canvas element too.
Update: Wait, you already said that. I should read the whole question next time! :)
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
