CODEWITHSUNDEEP
htmlcsssvgweb
Jimmy
Jimmy

Reputation: 12487

Scaling SVG for web

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.

Upvotes: 0

Views: 105

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

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

See Also - svg viewBox attribute

Upvotes: 1

Related Questions