My inline SVG is too big on the page

This is a common occurrence when using inline SVGs as they have a tendency to overlay the items outside their container.

Luckily, there’s a pretty easy fix we can put in place using some CSS.

.wpsvg-inline svg {
    max-width: 100%
}

The code above will make sure that the max width of the inline SVG doesn’t get any bigger than it’s container, and should return it to the way it was supposed to be.

WP SVG doesn’t add this code by default as we believe in not affecting the front end of a site.

Do remember, if you’ve used the wpsvg_inline_svg_class filter to change the class applied to the inline SVG containers, you’ll need to adjust the code above accordingly.