How to listen to a load event of an object with a SVG image?

Question

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object?

I have created this minimal example of my problem.

HTML:

<object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" />

Javascript:

alert('loading');
$('#animation').on('load', function() {
  alert('loaded');
});

Answer 1

From this post jQuery SVG-object tag load event

It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function...

Also unsure if that's still the case but your issue was mostly that in jsfiddle you were executing the code on document "loaded" instead of document "ready". Document loaded means all the resources are loaded prior executing the code so the svg image would already be loaded.

Works fine with this updated jsfiddle http://jsfiddle.net/47jSh/2/

alert('loading');
$('#animation')[0].addEventListener('load', function() {
    alert("loaded");    
}, true);