

Use SVG to Handle Retina Image Serving - tpenzer
http://thepenzone.com/svg-image/

======
michaelbuckbee
I came across a similar technique: SVG Clowncar - whose README goes into some
more of the details of the technique and browser limitations:

<https://github.com/estelle/clowncar>

~~~
tpenzer
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.

------
lallysingh
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.

~~~
tpenzer
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.

------
tpenzer
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.

------
protomyth
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?

------
bsimpson
Wasn't the same technique posted last week?

<https://github.com/estelle/clowncar>

