The clown car technique -- used for foreground images in your HTML documents, works best when the SVG contains only background images . If you use <image>, all

The clown car technique -- used for foreground images in your HTML documents, works best when the SVG contains only background images . If you use <image>, all the images in the SVG will be downloaded. Yes, the SVG does "waste" a single HTTP request -- you get two http requests: one for the SVG file and one for the image it downloads that matches the media queries within the SVG. However, you can use a data URI within your HTML to eliminiate the call to the SVG file. An example of this (in CSS) is here: http://jsfiddle.net/estelle/ZHrb2/ http://jsfiddle.net/estelle/ZHrb2/ The reason I called it Clown Car technique was because we're stuffing a whole bunch of images into a tiny little file. I am looking into this technique not just to solve the <picture> RWD image issue, but also as a way to manage images. We currently separate content (html) from presentation (css) from behaviour (js). I like the idea of managing my assets separately as well. Thinking this helps along those lines.