How can I make an SVG scale with its parent container?

I want to have an inline SVG element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that.

index.html:

<img src="foo.svg" style="width: 100%;" />

foo.svg:

<svg width="123" height="456"></svg>

However, I want to add additional styles to the SVG through CSS, so linking an external one is not an option. How do I make an inline SVG scale?

Solution

To specify the coordinates within the SVG image independently of the scaled size of the image, use the viewBox attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the width and height attributes to define what the width or height are with respect to the containing page.

For instance, this will render as a 10px by 20px triangle:

svg {
  border: 1px solid blue;
}

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:

svg {
  border: 1px solid blue;
}

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:

svg {
  border: 1px solid blue;
}

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

If you want to scale it up to the width of the HTML viewport:

svg {
  border: 1px solid blue;
}

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Note that by default the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):

svg {
  border: 1px solid blue;
}

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
           points="0,10 20,10 10,0" />
</svg>

If you actually want it to stretch horizontally, disable aspect ratio preservation with preserveAspectRatio=none:

svg {
  border: 1px solid blue;
}

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>