How to preprocess an SVG graphic?

Exposition of the problem

I have an XML file containing the raw data (i.e. ecliptical longitude values for ten planets and twelve house cusps) of a horoscope and want to use an XSLT transformation for graphically displaying the planetary positions and house cusps. For the trigonometric computations that are necessary to convert these longitude values into cartesian co-ordinates, XSLT is not the appropriate tool - a scripting language like JavaScript serves better. I therefore divided the task into two steps:
  1. Build an SVG raw document containing all the necessary elements of the graphic, using XSLT
  2. Write a JavaScript object that preprocesses the SVG document before display by placing all the elements at the right places. This JavaScript code has to be run after generation of the SVG raw document and before displaying it.
The problem is: How to trigger the graphics preprocessing (i.e. the execution of the JavaScript code)?

A natural option would be to use the onload event of the SVG root node of the document. But it comes out that this event is not triggered in Firefox if the SVG is not parsed but generated. As Boris Zbarsky points out in the Firebug Ticket #386856 that I had opened on this issue, this behaviour is conforming to the SVG spec. The spec states that the onload event should be triggered when the parsing of the element is completed. But for a programmatically generated SVG tree, there is no parsing.

An alternative suggested by Boris Zbarsky works better: Putting the JavaScript code right at the end of the generated SVG tree, just before the closing </svg> node, therefore forcing immediate execution while this script element is built into the target. It comes out that this method works. But how reliable is it? In HTML, one cannot be sure that the complete DOM is accessible if a script is built into the HTML document itself instead of executing it on load.

I have sent this issue for further clarification to the mailing list of the W3C SVG working group. If onload is not appropriate for automatically generated SVG documents, a reliable alternative is necessary. Or should the spec be changed so that the onload event will be fired also for automatically generated graphics? Here are the three alternatives:


XSLT-generated graphics, execution attached to <svg> onload

Contrary to Google Chrome, the graphic doesn't display correctly in Firefox.

Horoskop kann leider nicht angezeigt werden. Verwenden Sie einen SVG-fähigen Browser (wie z.B. Firefox). Im Internet Explorer benötigen Sie ein SVG-Plugin, z.B. den Adobe SVG Viewer.

XSLT-generated graphics, immediate script execution noted in the SVG tree

Instead of executing the script on load, it is embedded into the SVG XML, right before the closing </svg> node. In this case, Firefox and Chrome display the graphics properly.

Horoskop kann leider nicht angezeigt werden. Verwenden Sie einen SVG-fähigen Browser (wie z.B. Firefox). Im Internet Explorer benötigen Sie ein SVG-Plugin, z.B. den Adobe SVG Viewer.

SVG embedded as XML, script attached to <svg> onload

If the graphic is available as XML document, it displays properly on both browsers, since the onload handler is performed. But this is not a smart solution: The code of the SVG tree has to be duplicated for all horoscope graphics - redundancies are always bad. In particular since browsers can generate the tree dynamically with sufficient execution speed.

Horoskop kann leider nicht angezeigt werden. Verwenden Sie einen SVG-fähigen Browser (wie z.B. Firefox). Im Internet Explorer benötigen Sie ein SVG-Plugin, z.B. den Adobe SVG Viewer.

Browser versions

I used Firefox version 3.5.5 and Google Chrome version 4.1.249.1045, both in their portable editions, to do these tests.