Responsive images with svg and CSS

Estelle Weyl is testing Responsive Images: Clown Car Technique

SVG supports media-queries — related to its parent—, we need responsive images...

Estelle provided the code of her experiments , and I've tried to make some tests... and it seems to work.

You can see the HTML, CSS and SVG code I used

Safari (windows) and Dolphin browser (android 4.2) failed with my experiments with <object> , background-position: 100% 100%; (inside svg file).
It works now with a wrapper with a fixed ratio, the <object> (with position: absolute) and background-size: cover (maybe another way is possible...)

.my-svg-container width : px

clown

Tested with

desktop : win7 | mobile : android 4.2

In a browser that doesn't support svg the fallback inside the object is used (tested with android 2.1 browser) but do not forget the type attribute

Doesn't work with ios6... I made a page with .png files from the same server to be sure that's not a security restriction

If you see a browser where it does not work please tell me : @eQRoeil

HTML

<div class="my-svg-container" >
  <object type="image/svg+xml" data="clownmqbg.svg" class="my-svg">
    <img src="https://raw.github.com/estelle/clowncar/master/images/small.png" alt="clown">
    <!-- svg no support fallback ie < 9 android < 3 ... -->
  </object>
</div>

CSS

/* ratio based on images (png) dimensions 
   ratio relative / absolute needed with safari (win7) and dolphin browser android 4.2 
   with background-size: cover in the SVG (<style>)
*/
.my-svg-container{
  position: relative;
  width: 50%;
  height: 0;
  padding-bottom: 55%;
  margin: 0 auto;
  outline: 1px solid gray;
  overflow: hidden;
}
.my-svg{
  display: block;
  position: absolute;
  top:0;
  left:0;
  padding: 0;
  margin: 0;
  width: 100%; 
  height: 100%; 
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
<title>Clown Car Technique</title>
<style>
svg{
  background-size: cover; 
  /* 
  cover seems to have better results than 100% 100% 
  but the ratio in HTML is mandatory see .my-svg-container
  */
  background-repeat: no-repeat;
}
/* media-queries */
/* small.png should be seen when is ** parent's width **  is < 180px */
@media screen and (max-width: 180px){
  svg{
    background-image: url("https://raw.github.com/estelle/clowncar/master/images/small.png");
  }
}
@media screen and (min-width: 181px) and (max-width: 250px) {
  svg{
    background-image: url("https://raw.github.com/estelle/clowncar/master/images/medium.png");
  }
}
@media screen and (min-width: 251px) and (max-width: 480px) {
  svg{
    background-image: url("https://raw.github.com/estelle/clowncar/master/images/big.png");
  }
}
@media screen and (min-width: 481px) {
  svg{
    background-image: url("https://raw.github.com/estelle/clowncar/master/images/huge.png");
  }
}
</style>
</svg>