SVG (Scalable Vector Graphic) is basically an image format for two-dimensional graphics. It allows you to create images within your web pages that scale up and down easily as per the specifications of the device the page is being viewed on. Plus, you can also add interactive and animated elements within your SVG. As an image format, SVG could be infinitely scalable and at the same time quite a tricky format to make responsive. It is difficult for vector images to adjust themselves as per the size and specifications of the viewport.

This tutorial is about making SVG responsive with CSS. Here, we'll discuss embedding techniques and methods of applying “Padding Hack” along with inline media queries to make SVGs adaptive. Irrespective of the technique you choose to embed SVG on a web page, there are a variety of standard procedures need to know about to make your SVG cross-browser compatible. The reason for this is that the way the browser detects the dimensions of SVG distinguishes it from some of the techniques of embedding. That's why the way SVG is handled is quite different and needs to be tweaked accordingly to make it uniform across all kinds of browsers.

One of the most common ways of embedding is inline it using an HTML5 page using <SVG> tag. Another one is injecting it as an image using <img> tag, and also embedding it using the <object> tag.

Whatever the method you opt for, the only thing which you should keep in your mind is simply to remove the height and width attributes from the root <svg> element.

Next, keep the “viewport” attribute as it is and set the 'preserveAspectRatio' to 'xMidYMid meet'.

However, integrating SVG with CSS does not call for any hacks or fixes. It will behave just like any other bitmap image and will showcase the expected behavior in all browsers.

Making SVG Fluids Using CSS

To make SVG fluid, the first thing you need to do is simply remove the height and width attributes. The reason why we need to remove is that specifying a fixed height will restrict the SVGs ability to behave responsively. So, once you remove both of these attributes, you can proceed to make embed SVG on the web page in many ways.

Using <img> and <object> Tag Method

Embedding SVG using <img> tag will expand the width of the container to give it cross-browser compatibility. Using this way, it will have its own set of browser support and it works everywhere except Internet Explorer 8 and below and Android 2.3 and below.

If you'd like to use SVG, and at the same time also want to make it browser compatible then you have some other options to explore. IE will set the height of SVG to 150 pixels whereas you can fix it to 100% to fix the compatibility issues.

<img src="mySVG.svg" alt="SVG Description." />
img {
width: 100%;
}

The same method is applied with SVG embedding using a <object> tag. Here, you'll also need to set the object width to 100%

object {
width: 100%;
}

Embedding SVG Using <iframe> Tag

An <iframe> function has a lot of functions in common with the <image> and <object> tag, however, the way the browser handles all of them is quite different. The leading browsers including Chrome, Firefox, and Internet Explorer handle an iframe referencing SVG which has no height and width, and set it to the default size for replaced element in CSS that is 300x150 pixels.

In order to make an iframe responsive while maintaining the aspect ratio of the SVG can be done by using “Padding Hack”. It's a technique introduced by Thierry Koblentz, which makes it possible for browsers to determine video dimensions on the basis of the width of containing block.

The main purpose of the padding hack is to establish a relationship between an element's padding and its width. When set in percentages, the value of the percentage is calculated as per the relative width of the element, regardless of what you choose padding-top or padding-bottom.

In order to make an iframe referencing the SVG fluid, SVG needs to be tweaked wrapped in a container. This container will bring out the intrinsic ratio with the help of a padding hack. Once it is done, you can proceed to apply some styling within the container and the iframe.

<!-- wrap svg in a container -->
<div class="container">
<iframe src="my_SVG_file.svg">
<!-- fallback here -->
</iframe>
</div>

.container {
/* collapse the container's height */
height: 0;

/* specify any width you want (a percentage value, basically) */
width: width-value;

/* apply padding using the following formula */
/* this formula makes sure the aspect ratio of the container equals that of the SVG graphic */
padding-top: (svg-height / svg-width) * width-value;
position: relative; /* create positioning context for SVG */
}

Both svg-height and svg-width and the actual values of the height and width of the SVG, the dimensions which we removed earlier. The width-value is the value you wish to give to the container page.

Now, SVG needs to be fixed inside the container.

iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

The reason why we have done this is that because the container's height has been collapsed earlier, and quite a considerable amount of padding has also been applied on the top of it. Due to this, the SVG iframe has pushed beyond the specified boundaries of the container thus making it difficult to sit inside the container. So, to pull it back we positioned the iframe inside the container.

As of now the height and width have been removed so we could say that finally, an SVG embedded inline in an <svg> tag has become responsive. Due to this, all the browsers will now assume 100% width and will scale the SVG accordingly. But, IE will take the same 150 pixels fixed height for the <image> tag. To fix it and make the SVG fluid in IE, we need to use some padding tricks.

For this, <svg> tag needs to be wrapped in the container, and follows the same padding rules mentioned above, and position the SVG inside it. There is only one thing that is different here is that we don't need to particularly define the height and width of <svg> once we are done positioning it inside the container.

svg {
position: absolute;
top: 0;
left: 0;
}

Implementing CSS Media Queries To Make SVGs Responsive

The graphical elements inside an SVG are made using XML components, which are responsible for the liberating functioning of an SVG. The content inside SVG contains XML tags that render graphics, we can style them by opting for individual elements.

Just like we can change the style of HTML elements- like background color, text, etc., one can also choose to style the SVG element using CSS media queries. Presentation attributes such as Fill, Stroke, Transform are generally used to style SVG elements. Fill is one the most sought-after styles, which is used to alter the background color.

An SVG embedded with <image>, <object>, and <iframe> will respond to the viewport as per the dimensions set by the three of them.

Below, we are going to add the media query using the <img> tag. This is how an SVG file will look like:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186">
<style>
@media all and (max-width: 50em) {
/* select SVG elements and style them */
}
@media all and (max-width: 30em) {
/* styles */
}
</style>
<!-- SVG elements here -->
</svg>

Once the SVG tag will be referenced, it will specify the media queries as soon as the image is fixed to width- 50 em and height- 30 em.

<img src="my-logo.svg" alt="Page Logo." />

SVGs are images that need to be accessed over all kinds of devices and browsers. Apart from what we have mentioned above, do not forget about optimizing the images and providing fallbacks to those browsers which do not support them.

Hopefully, you have now understood the whole process of creating responsive SVGs using CSS. Now, you can have an interactive and fully functional SVG that plays around different shapes and sizes.