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!