Scaling SVG Images

SVG images are not like raster images - they can scale to any size. this means the way scaling works is different.

Other images scale because the browser knows the height, width, and aspect ratio of the image, and it adjusts everything together.

Giving SVG these properties is the first step to getting it to scale. However, scaling SVG goes beyond what is possible with other images -

The trick is to ignore the default svg width and height values and use the viewbox widths and heights. For an alternative approach you can scale the svg -

# Scale to fit (without distorting)

In the example below we define an svg symbol to make it easier to see how we inline svg:

<svg class="defs-only" xmlns=""> <symbol id="potofgold" > <g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5"> <circle r="5" transform="translate(30,7)" /> <circle r="5" transform="translate(35,13)" /> </g> <path fill="url(#pot)" stroke="#751" stroke-width="0.5" d="M30,50 C45,50 55,45 55,35 Q 55,27 50,25 C55,22 53,15 45,20 S 23,25 15,20 S5,22 10,25 Q 5,27 5,35 C5,45 15,50 30,50Z" /> </symbol> </svg>

Now we can see the effect of setting the viewbox attributes correctly:

<svg viewBox="0 0 60 55" width="100" height="50"> <use xlink:href="#potofgold"/> </svg>


Brian Vibber on reviving wikipedia's svg client-side rendering task. wikimedia