title: Making SVG Responsive based on width 100% like images
body: <p>All day long I am working on making SVG responsive and reading various articles, and testing different kind of code even in stack overflow.
  Unfortunatly I am unsucessful in making my svg expand based on the container div, like I normally do with images when I define max-width:100%</p>
  
  <p>I am using SVG stacks as technique:
  <a href="http://simurai.com/blog/2012/04/02/svg-stacks/" rel="nofollow">http://simurai.com/blog/2012/04/02/svg-stacks/</a>
  example of his code: <a href="http://jsfiddle.net/simurai/7GCGr/" rel="nofollow">http://jsfiddle.net/simurai/7GCGr/</a></p>
  
  <p>I noticed that after a certain size of the svg, it doesn't expand anymore and his maximum size become 150px even if I give it 100% as width.
  if I force by inserting width &amp; height sizes it grows bigger, but it is not what I want. I want that it resizes ALWAYS based on the width of the container, even becoming something terribly huge without any size limitations.</p>
  
  <p>In the svg the height and width are removed.</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  /* RESET - http://meyerweb.com/eric/tools/css/reset/ */
    html, body, applet, object, iframe, svg, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure{
     margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; font-style:inherit;
     font-family:inherit; text-decoration:inherit; text-align:left; background:transparent;
    }
    header, footer, figure, details, hgroup, section, article, nav, aside{display:block;}
    img, object, audio, video, svg{width:100%;}
  
       .vector{display:block; width:100%; height:auto;}
          .vector embed{border:1px solid #f00; width:100%;}*/
       .box{border:1px solid #f00; width:700px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
   &lt;object class="vector"&gt;
    &lt;embed src="http://life-is-simple.net/sprite.svg#winner-cup" /&gt;
   &lt;/object&gt;
      
   &lt;img class="vector" src="http://life-is-simple.net/sprite.svg#winner-cup"&gt;
   &lt;img class="vector" src="http://life-is-simple.net/sprite.svg#lottery-ticket"&gt;
   &lt;img class="vector" src="http://life-is-simple.net/sprite.svg#monitor-number"&gt;
   &lt;img class="vector" src="http://life-is-simple.net/sprite.svg#emblem"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would really appreciate some help, I do not know what to test anymore to make it work it, especially when I see that simple included svg inserted they do go 100%, I was trying with  and  techniques but I do not see any difference (only IE behave expanding svg, but firefox and chrome do not)</p>