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...

Wastronauts Media

Some neat CSS load transitions in this responsive one pager for 'Wastronauts Media' from Southampton Hampshire, UK. Such an awesome touch with the browser tab saying "Are you still there?" when you start browsing other tabs. Although not tested, I see there is an option to send them a voice message on the site, nice...

Horizillax

'Horizillax' is a rather unique horizontal scrolling one page WordPress theme. The colorful graphic design works well within the key selling feature - the "layered" horizontal parallax scrolling. Yes, there are links within the page to sections that aren't technically one page but those can easily be hidden with minimal CSS and you don't need them to achieve a visually stimulating portfolio. The scroll is perhaps a bit slow, but the admin area has a ton of options to get things working just the way you...

Beyond Bespoke

Loads of neat CSS load transitions as you scroll down this WordPress integrated one pager for luxury members directory, 'Beyond Bespoke'. The responsive adaption is quite impressive considering the volume of content including several...

The Cream of Manchester

Responsive one pager for an upcoming event in Manchester featuring a talk followed by a professional review session of your Behance portfolio. Awesome little game of Pong hidden in the one...