jQuery $(document).ready and svg-web window.onsvgload

Question

jQuery of course requires everything to be inside

$(document).ready = function() {};

similarly, svg-web requires:

window.onsvgload = function() {};

Is there a correct, elegant way to combine these that doesn't introduce any problems?

Answer 1

You can just bind the functions to run on the appropriate event, like this:

$(function() { //shortcut for $(document).ready(function() {
  //stuff that needs the DOM to be ready
});
$(window).bind('svgload', function() {
  //SVG stuff
});

There's no harm is using both, in fact that's the appropriate usage, always use the event you need, this is no different from document.ready vs window.load when you need images ready, not just the DOM.

If it matters, svgload happens after onload in the browsers that support it as of the time of this answer, not sure if that'll be consistent when other browsers support it though.

Answer 2

Finally found this in the 'user manual':

$(document).ready(function() {
    window.addEventListener('SVGLoad', function() {
       // ready to work with SVG now
    }, false);
});