How do I use SVG images interchangably with PNGs in Firefox?

Question

My project supports users uploading their own icons to be used for various entities in the system. I'd like to support SVGs, as this means that the same image can be scaled nicely and thus used in multiple places.

Firefox has a current bug that prevents SVG files being used in <img> tags. It was my understanding from my other xhtml work that <object> tags were the (xhtml) way forward for external media (and essentially equivalent - enhanced fall-back functionality support aside), and as Firefox supports SVG in object tags, I switched over to using these.

However, it seems SVG's "features" prevent them being used interchangeably as scalable images as JavaScript events don't seem to bubble up out of the object, amongst a few other things.

Does anyone know if these issues can be resolved? I.e. how can I tell Firefox I just want the picture using the object tag?

Answer 1

Maybe you can use a DIV of the correct size and set background-image on it.

Edit: this does not seem to work, although I am not sure why.

Answer 2

The object element "encapsulates" the containing object, that is, the two DOMs are completely separated. Therefore events can't pass through from the SVG DOM to the containig HTML DOM.

However, using JavaScript and AJAX, you can just load the SVG file (since it's XML) and put it directly into the DOM (you might have to set some width/height somewhere):

Using jQuery, the code is something along this:

$.get('icon.svg', function (svg) {
  $('#put_svg_here').append(svg.rootElement);
}, 'xml');

Answer 3

I'm not sure if this qualifies as cheating, but I've set the object tag to 'z-index: -1' and the containing div to 'position: relative' (to create a new positioning context without altering the page layout).

Into this, I've added another absolutely-positioned div with height and width set to 100%; this effectively sits above the object tag (and without going behind the container due to the positioning context), with the net result being that mouse events get captured by the overlay div and bubbled up to the container node.

The bonus div could be added by jQuery, but for simplicity's sake I've just stuck it in server-side when the page is composed.