clown_nosize.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="329">

  <title>The Clown Car Technique</title>
  <defs>
  <style>
  g {display: none;}
  image {
    height: 329px;
    width: 300px;
  }

  #small {display: block}

  @media screen and (min-width: 401px) and (max-width: 700px) {
      #medium {display: block}
      #small {display: none}
  }
    @media screen and (min-width: 701px) and (max-width: 1000px) {
      #big {display: block}
      #small {display: none}
  }
   @media screen and (min-width: 1001px)  {
    #huge {display: block}
    #small {display: none;}
  }
  </style>
</defs>
<g id="small">
  <image height="329" width="300" xlink:href="images/small.png" />
</g>
<g id="medium">
  <image height="329" width="300" xlink:href="images/medium.png" />
</g>
<g id="big">
  <image height="329" width="300" xlink:href="images/big.png" />
</g>
<g id="huge">
  <image height="329" width="300" xlink:href="images/huge.png" />
</g>
</svg>