implementing an SVG viewer in JavaScript
Last 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!
Pingback: Something Witty Goes Here
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
“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.
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.
Pingback: Something Witty Goes Here » Blog Archive » SVG Using Nothin’ But JavaScript
Doesn’t work in FF 1.5 w/ svgenabled set to false.
thanks for pointing that out, Sean
it does, now! 🙂
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.
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.
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.
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.
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.