Apr 13, 2020

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.