Steps to prevent an SVG from overflowing its div container:
- On the
<svg>
element, remove the inlineheight
andwidth
attributes, if present. - On the
<svg>
element, make sure aviewBox
is specified. Example:viewBox="0 0 72 72"
. - 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 →