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/RwXEare
21 Replies
ἔρως
ἔρως5w ago
you misunderstood what the viewbox is the viewbox indicates the visible area and that's what the image is
snxxwyy
snxxwyyOP5w ago
Oh? I thought the 100 100 was 100px, what does that number represent then?
ἔρως
ἔρως5w ago
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 know
snxxwyy
snxxwyyOP5w ago
oh 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?
ἔρως
ἔρως5w ago
no, the frame is still 50x50 the circle scales up and down everything is the same
ἔρως
ἔρως5w ago
you have this image, in the svg
No description
ἔρως
ἔρως5w ago
this is the viewbox
No description
ἔρως
ἔρως5w ago
this is the final result
No description
ἔρως
ἔρως5w ago
now, i will resize
No description
ἔρως
ἔρως5w ago
😮 oh no, it doesn't show more
No description
ἔρως
ἔρως5w ago
😮 still doesn't show more
No description
ἔρως
ἔρως5w ago
this is what happens with an svg it's an image you can resize to infinity, but the viewable box is always the same
ἔρως
ἔρως5w ago
i can keep on resizing this, and you won't see more
No description
snxxwyy
snxxwyyOP5w ago
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.
ἔρως
ἔρως5w ago
the numbers mean "x y width height" it's the width and height of the viewbox not the image
snxxwyy
snxxwyyOP5w ago
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.
No description
ἔρως
ἔρως5w ago
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
snxxwyy
snxxwyyOP5w ago
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?
ἔρως
ἔρως4w ago
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 bigger
snxxwyy
snxxwyyOP4w ago
Ah okay, I think I get it now haha, thank you for the help
ἔρως
ἔρως4w ago
you're welcome
Want results from more Discord servers?
Add your server