Responsive SVG

Imagine that you’ve used your incredible creativity to create the following beautiful HTML:

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <style>
        .container {
            width: 100%;
            border: 5px solid lightgray;
        }
    </style>
</head>
<body>
<div class="container">
    <svg width="800px" height="800px">
        <circle cx="400" cy="400" r="400"></circle>
    </svg>
</div>
</body>
</html>

You open the page in a browser and all looks fine – well, sort of. The top, left and bottom edge of the div’s border touch the circle (at least more or less), but the right edge doesn’t. But things get worse when you shrink the browser window’s width. While the width of the div’s frame shrinks with the window, the circle stubbornly retains its size.

That shouldn’t be too surprising, as we’ve fixed the width and height of the svg element to be 800 px. So the idea is to replace the width attribute value with “100%” and to drop the height attribute.

<svg width="100%">
...
</svg>

At first sight this makes things worse – the circle still retains its size of 800px, and the height of the div is just 150 px. However, this can be solved by also specifying the view box:

<svg width="100%" viewBox="0 0 800 800">
...
</svg>

This gives you a responsive circle. (Whether it works in Internet Explorer I don’t know though.)

Written by