svg sizing
Hey, just a couple questions about how sizing of an svg works-
1) If there's no
viewbox and you try to resize an svg in css, the content within the svg won't scale with it, why is this? (example in codepen)
2) If you have an svg with a viewbox of 0 0 100 100 and let's say there's a circle in there that has a r, cx and cy of 50 to center it within the viewbox, if you resize the svg with css, what makes the content scale up/down since the svg is now larger/smaller than the viewbox, i'd expect the content to be cut off?
I'd appreciate any help, thanks in advance.
https://codepen.io/deerCabin/pen/RwXEaresvg size
...
21 Replies
you misunderstood what the viewbox is
the viewbox indicates the visible area
and that's what the image is
Oh? I thought the 100 100 was 100px, what does that number represent then?
no, the 100 means 100
it's in the svg coordinate space
basically, what the viewbox does is say "from x,y you're supposed to show everything for the next w,h units"
1 can be 0 pixels but can also be 3km - you don't knowoh okay i see. So if for example you have a viewbox of
0 0 50 50, as you say, that means from x,y show everything for 50 50, but if i resize the svg tag to a width and height of 100px, that doesn't change the 50 50 in the viewbox, so it confuses me how the content (circle) scales up with it rather than staying the same size? the extra 50px should reveal blank space no?no, the frame is still 50x50
the circle scales up and down
everything is the same
you have this image, in the svg
this is the viewbox
this is the final result
now, i will resize
😮 oh no, it doesn't show more
😮 still doesn't show more
this is what happens with an svg
it's an image you can resize to infinity, but the viewable box is always the same
i can keep on resizing this, and you won't see more
ah okay i get that. and then i assume the numbers are linked to the width/height in some way so that causes content to scale up/down in size? not showing more of the svg as you say of course.
the numbers mean "x y width height"
it's the width and height of the viewbox
not the image
yeah that's what i was thinking, which is why i thought resizing the svg wouldn't scale the viewbox with it since the width and height for both are different, like so, but instead it does what's on the right.
the viewbox stays the same, always
what happens is that the visible area will work like any other image
except that it doesn't lose quality
oh okay, so what i'm getting is that if my viewbox is
0 0 100 100, and i change my svg width and height in css, the 100 100 becomes the width and height? i don't really understand how it's possible for the viewbox to stay the same if it dosn't work that way?no, it doesn't become anything
the viewbox is unchanged
it's just the visible area
and everything inside the visible area is what you see
if you resize the image to 30000x30000, the viewbox is still
0 0 100 100
the exact same content is shown, but biggerAh okay, I think I get it now haha, thank you for the help
you're welcome