Scaling SVG for web

Question

I've been learning about SVG, and this is what I have currently: http://jsfiddle.net/C8d34/1/

This is my SVG code specifically:

<svg width="100%" height="100%">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

My question is, how comes my SVG doesn't expand to 100% height and width of the light blue area, as this is what I was trying to achieve and expected from my code.

score 1 · Accepted Answer · edited May 23 '17 at 11:57

The width declaration is not the defining factor. It defines how big the SVG will be but you need to establish the co-ordinate limits by means of viewbox

In this case, I think you have a square that is 100 x 100 so your viewbox declartion will be like this

HTML

<svg viewBox="0 0 100 100"> /* this here */
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Now you can set the width of the SVG to anything you like and the SVG will scale automatically to accommodate that size.

CSS

svg {
    width:50%;
    height:50%;
}

As a result you get this

JSFiddle Demo

If you do not define any dimensions it will scale to 100% of the parent like this

JSFiddle Demo 2

Scaling SVG for web

1 Answers1