3 ms·
Use SVG to Handle Retina Image Serving
- lallysingh 13y agoSorry, 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 13y agoVector 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.
- zw 13y agoI'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.
- tpenzer 13y agoThe 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.
- michaelbuckbee 13y agoI 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 https://github.com/estelle/clowncar
- tpenzer 13y agoThat 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.
- bsimpson 13y agoWasn't the same technique posted last week? https://github.com/estelle/clowncar https://github.com/estelle/clowncar
- protomyth 13y agoCan 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?