Categories

Responsive SVG Images

Posted on: May 19, 2018 by Dimitar Ivanov

What is SVG

Scalable Vector Graphics (SVG) is a markup language based on XML that is used for displaying of 2-dimensional graphics. SVG has numerous advantages over the traditional image formats like PNG, JPG, GIF etc. SVG documents are scalable, interactive, accessible, responsive, programmable, and have great performance.

non responsive svg
Figure 1. Non-responsive SVG

SVG and responsive design

Since the SVG is a widely supported across browsers it became a preferred file format for logos, icons, charts, geo maps, and even games. Nowadays more and more websites follows the responsive web design principle. That's why is so important to know how to make your SVG resources to fit the responsive design.

fluid svg image
Figure 2. Stretch and scale of SVG

Fluid SVG

For fluid SVG images don't use the width and height attributes. Instead of this add viewBox and preserveAspectRatio attributes.

  • viewBox - this attribute allows you to specify that a given set of graphics stretch to fit a particular container element.
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
    
  • preserveAspectRatio - this attribute indicates whether or not to force uniform scaling.
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet">
    

    Let's see a fluid SVG demo.

fluid svg
Figure 3. Fluid SVG source code

Responsive SVG

In addition to rules for fluid SVG images, to also add a responsiveness use CSS media queries.

  • CSS media queries - depending on device screen size and/or orientation, you can change SVG attributes or even displays different shape.
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet">
        <style>
        @media screen and (max-width: 767px) {
            #logo1 {
                opacity: 1;
            }
            #logo2 {
                opacity: 0;
            }
        }
        @media screen and (min-width: 768px) {
            #logo2 {
                opacity: 1;
            }
            #logo1 {
                opacity: 0;
            }
        }
        </style>
        <polygon id="logo1" points="300,100 500,200 500,400 300,500 100,400 100,200" />
        <rect id="logo2" x="100" y="100" width="400" height="400" />
    </svg>
    

    Check out our responsive SVG demo.

responsive svg
Figure 4. Responsive SVG

How to use SVG

SVG images can be used in a bunch of contexts:

  • Inline SVG - the inline use increases the overall size of HTML document but reduces the need for additional HTTP requests to load image resources. See an example.
    <!doctype html>
    <html>
    <head>
        <style>
        circle {
            fill: red;
        }
        polygon {
            fill: green;
            stroke: black;
            stroke-width: 10;
        }
        </style>
    </head>
    <body>
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" preserveAspectRatio="xMinYMin meet">
        <circle cx="300" cy="300" r="200" />
        <polygon points="300,150 430,400 170,400" fill="black" />
    </svg>
    
    </body>
    </html>
    
  • SVG as <img> - a common practice is to use SVG as an image source. In this case, CSS helps to adjust the dimensions. The main drawback is that you can't apply styles separately for each shape in a single SVG since the last could possibly consist of multiple shapes as <path>, <circle>, <rect>, etc. See an example.
    <style>
    img {
        max-width: 100%;
        height: auto;
    }
    <style/>
    
    <img src="fluid.svg">
    
  • SVG as background image - See an example.
    div {
        background-image: url(responsive.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
  • SVG as CSS content - See an example.
    div:before {
        content: url(responsive.svg);
        display: block;
        height: 100%;
        width: 100%;
    }
    
  • SVG as <object> - See an example.
    <object type="image/svg+xml" data="fluid.svg"></object>
    

SVG Graph Tool

If you don't feel enough comfortable with creating an SVG from scratch, you can always use your favorite SVG library. Here, at Zino UI we have a great SVG drawing tool and yeah, it's responsive. Let's see a simple example how to drawn a responsive SVG:

  • Load SVG Graph tool:
    <script src="https://static.zinoui.com/1.5/compiled/zino.svg.min.js"></script>
    
  • Define an HTML element:
    <div id="circle"></div>
    
  • Initialize the API:
    var api = zino.Svg({
        target: document.querySelector("#circle"),
        viewBox: "0 0 600 600",
        preserveAspectRatio: "xMinYMin meet"
    });
    
  • Draw a simple circle:
    api.circle(300, 300, 100).attr({
        fill: "black"
    });
    
  • That's all. Now, let's see a demo of above code.

Fluid SVG with JavaScript

The fact that every SVG element and its shapes/attributes are part of DOM, make it easy to be accessed and manipulated with JavaScript. This is how to alter an inline SVG with fixed width and height using JavaScript to make it stretch and scale.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
    <circle cx="300" cy="300" r="200" fill="red" />
</svg>

<script>
var svg = document.querySelector("svg");

svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
svg.setAttribute("viewBox", [0, 0, svg.getAttribute("width"), svg.getAttribute("height")].join(" "));

svg.removeAttribute("width");
svg.removeAttribute("height");
</script>
Browser Compatibility

Chrome 1+, Edge, Firefox 1.5+, IE 9+, Opera 8+, Safari 3+

svg browser support
Figure 5. SVG browser support
See also
Comment and share

I'm looking forward to your comments about responsive SVG. If you find useful this article please share it with friends on social media. Thanks so much for reading.


0 Comments

Leave a comment

Captcha