That was actually my inspiration for this. Added support for stuffing multiple different assets in a single svg file, and did it with JS to avoid redundant image requests and keep it easy to use.
Sorry, I'm missing something. How come a regular SVG image, without any JS wouldn't work on retina displays? They're already vector images, and would rasterize on a machine that knows its own DPI.
Vector SVG graphics absolutely do work great on retina displays. This is for serving raster retina images, and the JavaScript enables you to request only the resolution appropriate for each client.
I'm not sure, although the implementation of SVG-as-`img` is still fairly buggy for me as far as dynamic resizing goes. This technique doesn't help with that, I'm just pointing out that the support isn't really all the way there.
The only problem I've got with this is that the JS image generator is run for every image on every svg load. If anyone can think of a way to only run it for the target image, I'm all ears; still struggling with it for now.
Can we just add something to the IMG tag and be done with it? Here's a list of other versions of this image with their dimensions and let the browser figure it out and request the correct one?