implementing an SVG viewer in JavaScript
Posted by: Kae Verens, in ajax, javascript, web developmentLast week, I wrote about the idea of rendering SVG through JavaScript. At the time, it seemed possible, but pretty difficult. Today, I sat down and threw a few hours at it, and have a simple viewer that shows about 80% of basic shapes.
check this out (in a non-SVG browser, of course)
The actual drawing of the shapes is handled with Walter Zorn’s JSGraphics library, so I did not need to do much, in that regard.
The most difficult part was the parsing of the SVG itself. I could not find an XML parser for JavaScript that I liked, so I spent a bit of time writing one into the script. The parser reads the file in using the XMLHttpRequest object, then parses it into a walkable DOM-tree.
The next difficult part was more frustrating than tricky - apparently, there is no simple “navigator.SVGSupported” constant, so I spent a bit of time finding some tests for that. That bit still annoys me…
I have not tested this in IE yet (I don’t have Windows on any of my home machines), so will probably need to fix up some things in it tomorrow.
Walter’s script does not yet support anti-aliasing or bezier lines, which I have mailed him about.
When I started working on this, I was only doing it as a way to improve the speed of FCKEditor’s icons. For some reason, I could not see the more obvious benefits to this, which would make it justifiable to spend some time working on this on company time.
However, it dawned on me that SVG is perfect for drawing clean graphs for various purposes, without complex PHP. That means that I may be able to get some time sanctioned for this purpose at my place of employment (which means I won’t simply lose interest and go do something else for a few months).
Anyway - enjoy, and give me some feedback!
Entries (RSS)
February 5th, 2006 at 10:58 pm
SVG Using Nothin’ But JavaScript
Enabling SVG for everyone
…
February 6th, 2006 at 2:37 am
Hi Kae,
Above linked is a little SVG file I produced as an assignment a couple of months back, which you might find handy for testing your renderer. It uses curved paths, patterns, transparency, animation, lots of things like that. Written by hand and only 6K so it’s easy to tell what’s what in it. Looks a bit weird in an SVG viewer that doesn’t understand animation though (Firefox, for example).
cjb / m1
February 6th, 2006 at 10:09 am
“The parser reads the file in using the XMLHttpRequest object, then parses it into a walkable DOM-tree.”
Why didn’t you use the XMLHttpRequests reponseXML property?
“Walter’s script does not yet support anti-aliasing or bezier lines, which I have mailed him about.”
Well, I guess that you will have to pay with a bad performance and memory penalty for anti-aliasing. Look at how Walters library works.
Beziers can be aproximated by polygons - actually many GUI systems do it that way.
February 6th, 2006 at 11:21 am
the code was not rendering in IE. I’ve fixed that (characters cannot be pulled from strings with
str[charIndex]- they must be pulled withstr.charAt(charIndex)).Christof - I’ve never used the responseXML property, so didn’t think of it
Walter replied, saying that he would be adding functions (probably Bezier) to the library when he gets the time. I don’t think he’ll bother with anti-aliasing, though, so I suppose I’ll need to hack that in myself.
February 6th, 2006 at 5:04 pm
[...] klog has written a library that handles drawing “about 80% of basic shapes” for SVG using nothing but DHTML. I haven’t tried it out yet, simply because all the browsers on all of my machines support SVG (Internet Explorer with the Adobe plugin, of course). I might actually uninstall ASV on one of my machines just to see how his library works. [...]
February 7th, 2006 at 6:42 pm
Doesn’t work in FF 1.5 w/ svgenabled set to false.
February 7th, 2006 at 7:37 pm
thanks for pointing that out, Sean
it does, now!
February 9th, 2006 at 10:06 am
right… it handles 100% of the basic primitives now. Christof, I’ll be upgrading it soon to use that IE Canvas implementation that you pointed out, sometime soon.
The only problem I have is with licenses. I give all my scripts out for free to anyone that asks for them, but I am always wary of any licensse of any kind, as I am not a legal type of person - the IE Canvas project uses the MIT license, and the jsGraphics library uses the LGPL license. I haven’t a clue what those mean in real world terms.
The biggest problem I have with those licenses is that they specify that a copy of the license must be included with each script (or “sizable portion” of the script). This is most annoying, as a bit of optimisation would reduce the actual scripts to a tiny fraction of the size of the licenses themselves.
I would much rather a license that simply said something like this:
unfortunately, I haven’t a clue if that is legally binding.
February 9th, 2006 at 12:08 pm
I’m not shure, but it seems as if Emil changed his plans to implement SVG via VML. Maybe the two efforts can somehow be brought together. I’d like the idear of just integrating a Script and then using SVG as if every Browser did support it natively.
About the Licenses: I simply didn’t think of that problem.
February 9th, 2006 at 12:11 pm
Christof, there is no problem using Emil’s code. I had a read through it, and it’s a simple matter to use that as just a drawing library, instead of another SVG replacement.
You know - this is pretty exciting! I’m really enjoying this project.
June 19th, 2006 at 12:22 am
Hello,
Just a new user of walter zorn’s incredible jsgraphics library of functions.
I am searching for way to put hyperlinks into any of the graphics drawn using the functions e.g. jg.drawRect. I would like to associate a URL with this image. Any way in which I can do that?
All help appreciated.
Thanks in advance.
Uttam.
PS. I am planning to use this feature in my website http://www.agni-systems.com which is under development.
June 19th, 2006 at 6:25 am
You could try attach an onclick event to the container of the svg which will redirect the browser to the new page. To make it more clear, you could add some css to change the mouse pointer to a hand/finger/whatever-your-system-uses to indicate that the image is a link.