Making SVGs Responsive with CSS

An SVG can be embedded on a web page in many ways; one of which is embedding it inline in an HTML5 page using the <svg> tag. The other commonly used techniques include embedding it as an image using the <img> tag, embedding it using the <object> tag, using an iframe, and as a CSS background image. Conceptually, making an SVG scale as its container scales should be as simple as removing any fixed height and/or width, and specifying a viewBox attribute value. However, due to different browser implementations and inconsistencies, the web isn’t all ponies and rainbows, and making SVGs fluid isn’t quite that straightforward, because the way browsers determine the dimensions of an SVG when embedded in different ways isn’t consistent across all of them. That said, there are certain “fixes” and hacks that we can use to get the expected behavior in all browsers. In this article, we’re going to explore these techniques, going over when to use each one, in order to make SVGs fluid and/or adaptive. Making SVGs Fluid Using CSS In order to make an SVG fluid, the first logical thing to do is to remove the height and width attributes. When a fixed height and/or width is specified, the SVG is going to maintain that height/or width, thus restricting it from being fully responsive. You should, however, leave the viewBox attribute present. After removing the height and width, you can embed the SVG in one of several ways on the page. We’ll be using the following SVG nautical logo in the demos. It’s from a freebie designed by Freepik. SVG embedded using...