How to make SVG images code responsive

by Janeth Kent Date: 23-11-2017 responsive images html5 css svg

For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by default.

Make A Responsive SVG Image

As an image, you can make a SVG vector illustration scale with the page content as you would any other:

<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">

SVG illustration of a happy monkey face

While this works in many cases, sometimes it isn’t enough, especially if you’re trying to embed the SVG illustration by entering the code directly into the page. In that case, simply modifying the width and height of the element won’t work.

Making Inline SVG Responsive

After being pasted into the <body> of an HTML document, embedded SVG code will typically look something like this:

<body>
	<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="500px" height="500px" viewBox="0 0 500 500" 
enable-background="new 0 0 500 500" xml:space="preserve">
		<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	cx="250" cy="250" r="200" opacity="0.6" />
	</svg>
</body>

With the <svg> root element cleaned up, the code is much more presentable:

<svg version="1.1" viewBox="0 0 500 500">
	<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	cx="250" cy="250" r="200" opacity="0.6" />
</svg>

Removing most of the redundant <svg> element attributes makes the illustration responsive, but at the cost of adding space above and below the vector image in some browsers (IE in particular). You might assume that the remaining viewBox attribute is the culprit, but it’s not: leave that alone. We have to take three more steps to integrate the responsive SVG element with our page content to make it work in all browsers.

First, surround the SVG code with a <div> and add a preserveAspectRatio attribute and class to the <svg> root element:

<div class="svg-container">
	<svg version="1.1" viewBox="0 0 500 500" 
preserveAspectRatio="xMinYMin meet" class="svg-content">
	<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
	</svg>
</div>

That moves the SVG illustration to the top of its display container.

.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

Note that the width used in the CSS assumes that you want the SVG image to be the full width of the page (or at least its parent container). The padding-bottom amount represents a ratio between the SVG illustration’s height and width. Dividing the height of the document’s viewBox by its width gives a 1:1 ratio in this case, meaning padding-bottom should be set to 100%. If the SVG image was wider than it was tall, say 1:2, the padding-bottom would be set to 50%.

Finally, position the SVG inside the container with a little more CSS:

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

This provides a solution in which the SVG illustration can scale gracefully on the page without disturbing other content; the same code will work on an <object> tag used to embed the vector drawing:

<div class="svg-container">
	<object type="image/svg+xml" data="samurai.svg" 
	width="100%" height="100%" class="svg-content">
	</object>
</div>

Note that all content inside the SVG will scale when it is responsive, including text.

by Janeth Kent Date: 23-11-2017 responsive images html5 css svg hits : 4347

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

GAN Generated Images

Let’s play a game - can you guess what these portraits have in common? They all depict non-existent people. All these images were created by artificial intelligence. We could say, that…

Layouts with Bootstrap 4: how to create a responsive web 2

Here we are with the second part of the guide: Layouts With Bootstrap 4 Horizontal alignment To align the columns horizontally we can use justify-content-value classes, which use the justify-content property of…

Layouts with Bootstrap 4: how to create a responsive web

Responsive or adaptable web design is a design methodology in which the appearance of the web page adapts to the resolution of the device with which it is being viewed,…

CSS in JavaScript (CSS-in-JS) Vs CSS in CSS

What actually is CSS-in-JS? You've certainly heard or read words like CSS-in-JS, Styled Components, Radium, Aphrodite and you're and you're stuck in limbo there, "why is it? I'm completely happy about CSS…

A roadmap to becoming a web developer in 2019

There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

The Absolute Beginner's Guide to Sass

You've probably heard about CSS preprocessors before, whether it's Sass, LESS or Stylus, and they're all great tools to maintain your CSS, especially when you work with large codebases. For…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

CSS Shapes: how to create non-rectangular shapes (part 2)

The shape-image-threshold (Position Text Over A Semi-Opaque Image) So far we've looked at employing a fully transparent part of a picture or of a gradient so as to form our shape,…

CSS Shapes: how to create non-rectangular shapes (part 1)

CSS Shapes (Level 1) has been accessible in Chrome and Safari for various years, be that as it may, this week it sends in a creation form of Firefox with…

6 CSS & JavaScript Text Animation Snippets

Do you know? We can make some pretty text effects with basic CSS and a few lines of JavaScript. These effects range from text display animations to 3D rotations or…

Useful Tutorials on SVG & CSS3 Animation

There isn't just one way to do SVG and CSS3 animations. Animation is one such area which has been quite complicated until recently. Today we're going to look some tutorials…

The CSS Grid Explained in 7 Minutes (with diagrams and code)

A quick and easy high level introduction to the main concepts of CSS Grid given by Morten Rand-Hendriksen at Wordcamp Europe 2017. 7 minutes and you'll understand what CSS Grid…