The contents of the SVG are then positioned inside the viewport depending on the value of the viewBox specified on the. When an SVG is embedded as an image in an tag, the height and width specified on the tag are used by the browser as a viewport to render the SVG into. We’ll be using the following SVG nautical logo in the demos. After removing the height and width, you can embed the SVG in one of several ways on the page. You should, however, leave the viewBox attribute present. 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. In order to make an SVG fluid, the first logical thing to do is to remove the height and width attributes.

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. That said, there are certain “fixes” and hacks that we can use to get the expected behavior in all browsers.

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. The other commonly used techniques include embedding it as an image using the tag, embedding it using the tag, using an iframe, and as a CSS background image.Ĭonceptually, 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. 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 tag.

Css force responsive resize