Making SVG Responsive based on width 100% like images

Question

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%

I am using SVG stacks as technique: http://simurai.com/blog/2012/04/02/svg-stacks/ example of his code: http://jsfiddle.net/simurai/7GCGr/

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 & 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.

In the svg the height and width are removed.

My 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;}

<div class="box">
 <object class="vector">
  <embed src="http://life-is-simple.net/sprite.svg#winner-cup" />
 </object>
    
 <img class="vector" src="http://life-is-simple.net/sprite.svg#winner-cup">
 <img class="vector" src="http://life-is-simple.net/sprite.svg#lottery-ticket">
 <img class="vector" src="http://life-is-simple.net/sprite.svg#monitor-number">
 <img class="vector" src="http://life-is-simple.net/sprite.svg#emblem">
</div>

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)

`embed` isn't support in most browsers is it? - http://www.sitepoint.com/add-svg-to-web-page/ — Paulie_D, May 11 '15 at 16:09
I was reading this article: http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/4/ that talks about embed (but I think that I overlooked a couple of points, I was just testing to see what were the effect of using svg in different implementations), but I think that this solution it is the better choice http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files — Littlemad, May 12 '15 at 07:35

score 3 · Answer 1 · answered May 11 '15 at 16:20

Scale svg the how to:

You can set the width of the svg container so the image wil scale there after:

This requires:

svg element needs a viewBox
svg element width and height are 100%

.container1 {
  border: 1px solid green;
  display: inline-block;
  width: 100px;
}
.container1 .shape1 {
  width: 100%;
}
.container2 {
  border: 1px solid green;
  display: inline-block;
  width: 200px;
}
.container2 .shape2 {
  width: 100%;
}

<div class="container1">
  width set to 100px
  <svg class="shape1" viewBox="0 0 100 100">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>
<div class="container2">
  width set to 200px
  <svg class="shape2" viewBox="0 0 100 100">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

The commen error

This will scale the element but keep the aspect ratio of the <svg> image.

Example:

.text span {
  display: inline-block;
  border: 1px solid rgba(0,0,0, 0.2);
}
.text span:nth-child(2) {
  margin-left: 110px;
}
.container1 {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 200px;
}
.container1 .shape1 {
  width: 100%;
  height: 100%;
}
.container2 {
  margin-left: 100px;
  display: inline-block;
  border: 1px solid green;
  width: 200px;
  height: 100px;
}
.container2 .shape2 {
  width: 100%;
  height: 100%;
}

<div class="text"><span>width set to 100px<br> height set to 200px</span>
<span>width set to 200px
<br>height set to 100px</span><div>
<div class="container1">

  <svg class="shape1" viewBox="0 0 100 100">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>

<div class="container2">

  <svg class="shape2" viewBox="0 0 100 100">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

The elemetent DONT SCALE!
The reason they "dont scale" is as mentioned the aspect ratio
There is actually a property for this: preserveAspectRatio

How do i use this propert?
Wel:

.text span {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.text span:nth-child(2) {
  margin-left: 110px;
}
.container1 {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 200px;
}
.container1 .shape1 {
  width: 100%;
  height: 100%;
}
.container2 {
  margin-left: 100px;
  display: inline-block;
  border: 1px solid green;
  width: 200px;
  height: 100px;
}
.container2 .shape2 {
  width: 100%;
  height: 100%;
}

<div class="text"><span>width set to 100px<br> height set to 200px</span>
  <span>width set to 200px
    <br>height set to 100px</span>
</div>
<div class="container1">

  <svg class="shape1" viewBox="0 0 100 100" preserveAspectRatio="none">
    <circle fill="#15d" cx="50" cy="50" r="50" />
  </svg>
</div>

<div class="container2">

  <svg class="shape2" viewBox="0 0 100 100" preserveAspectRatio="none">
    <circle fill="#a2b" cx="50" cy="50" r="50" />
  </svg>
</div>

score 2 · Accepted Answer · edited May 23 '17 at 11:53

The reason your image won't scale is because it doesn't have a viewBox.

You are linking to a <g> element. That group is inside an SVG that has a viewBox, but that viewBox won't be used. The browser will look for a viewBox on the outer-most <svg> element. That element doesn't have one.

To prove my point, copy the winner-cup viewBox to the root/outermost <svg> element. The SVG will now scale to 100%.

<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 971.9 842.9">

As to the reason why it was only scaling to a height of 150px. You will find the answer here:

SVG height percentage not working under Linux browsers?

In your case the parent element is <embed> (and <object>) rather than <body>, but the reason is the same.

Thank you. Such simple thing that I was missing out completely, I thought that the svg container of the other svgs, didn't need the viewbox because already defined inside of each viewbox, instad it was the opposite :-/ Applying a viewbox solved the issue. Thank you again. — Littlemad, May 12 '15 at 07:31

Making SVG Responsive based on width 100% like images

2 Answers2

Scale svg the how to:

The commen error