Re:The Clown Car Technique for Responsive Images
by duskwuff on Sunday April 21, 2013 @05:19PM
(#5586445)
Surely this can be solved by embedding the SVG in a data: URI?
Re:The Clown Car Technique for Responsive Images
by neilk on Sunday April 21, 2013 @05:28PM
(#5586474)
Or embedding it directly into the HTML - almost any browser that can show SVG can also handle it as markup.
But, the benefit of this technique (as far as I can tell) is decoupling, and any kind of embedding re-couples the data. Maybe in an acceptable way, if you can do it at a deploy step. It depends on what the use case is.
Re:The Clown Car Technique for Responsive Images
by michaelbuckbee on Sunday April 21, 2013 @05:42PM
(#5586535)
That would reduce the number of HTTP requests to one (but would also have the side effect of pulling in ALL of the different sized files)
Re:The Clown Car Technique for Responsive Images
by mistercow on Monday April 22, 2013 @10:19AM
(#5589318)
Why? It's not including the images in the data URI, just the SVG. That should act identically to downloading the SVG as a separate file (minus the extra HTTP request), unless I'm unaware of some very dumb quirk.
Re:The Clown Car Technique for Responsive Images
by estelleweyl on Monday April 22, 2013 @12:27PM
(#5590154)
including the data uri for the svg only makes sense. to include the data uri for all the images would be the same weight as downloading all the images plus about 10%.
The method at this link: http://estelle.github.io/clowncar/bgonly.html only does two http requests, the svg and the image used. We can bring that down to 1 by using data URI for the svg logic only.
The author neglects to point out that every image will waste a http request downloading the svg file so this is going to give poorer performance than having the logic in your css (perhaps he considered it too obvious).