Prevent SVG from Overflowing Div Container

Steps to prevent an SVG from overflowing its div container:

1. On the <svg> element, remove the inline height and width attributes, if present.
2. On the <svg> element, make sure a viewBox is specified. Example: viewBox="0 0 72 72".
3. On the container div, specify a width.

Here’s a CodePen showing the end result: https://codepen.io/kellenmace/pen/vYNOMKW

If you’re using an SVG as an img element’s src, or have something more complex going on, check out this Stack Overflow thread.

Written by Kellen Mace, who lives in Rochester Hills, MI and builds cool stuff on the web. About Kellen // Follow him on Twitter →