I love how this isolates the complexity of responsive image serving from the CSS. I wonder if a good practice might be to have a single images.svg file with all your site's responsive images included as ID'd groups, like:

  <g id="logo">
    <image id="1x" xlink:href="logo_low_rez.png" />
    <image id="2x" xlink:href="logo_high_rez.png" />
  </g>
  <g id="promo">
    <image id="1x" xlink:href="promo_low_rez.png" />
    <image id="2x" xlink:href="promo_high_rez.png" />
  </g>

Then, you could render the content as such:

  <img src="images.svg#logo" />
  <img src="images.svg#promo" />

I'll have to play with this, but it looks like a promising idea. Here's hoping browser compatibility is decent. For some reason, the first 'foreground' svg example doesn't seem to render an image for me in Chrome or Firefox, despite supposed support for the latter:

http://estelle.github.io/clowncar/

This could be a problem; I'd like to see expanded browser support.