svg width and height attribute + resizing
Hey, when i use svgs, i used to take off the
width and height attributes e.g. <svg width="x" height="y">...</svg> and size them using css. Then i realised that if the css doesn't load, they're massive haha. so i keep those attributes now.
One thing i've noticed about resizing them with css when they have those attributes, is that they only resize when you define the width and the height e.g.
whereas without those attributes, just defining the width would resize it e.g.
With the attributes, logically it makes sense as to why you have to style both the width and height for it to resize however i'm not entirely sure if this is how you're supposed to go about it? i'm also now confused as to why just width: 1em; worked without them.
I'd appreciate if anybody could give me some insight into that info, thanks in advance.26 Replies
Yea so what browser are you in
This becomes a odd problem kinda like not having height/width on images depending on which browser
FF mainly
I will say if you are using <svg> or <img> its good to have the default size as attributes then change with CSS.
The bigger issue is when you don't want to set the size in CSS either xD
idk if this helps but it was what I was playing with to understand
yeah i'm using firefox haha. when you say "odd problem", are you referring to the width and height question or the just width question?
yeah i set them to a sort of medium size now with the width and height attributes
yes
FF renders SVG different for some reason
and it acts really funky when trying to do intrinsic sizing. It really just wants the exact size.
ah i'll keep that in mind then, thanks.
what would the issue be when you dont want to set the size in css either?
yup
well it happens when you don't set both too
if I remember correctly, been a bit since I messed with that.
what are you reffering to? sorry
in reality, svg doesnt have a size
chrome sets a default in those cases, but firefox does whatever firefox does
an svg isnt pixels: it's a coordinate system based on imagination
what is the size of an svg with a viewbox of
0 0 250 250? you would assume it is 250x250, because that's what the values are
but that's not the case: that's just the size of the viewbox, but the svg can be much larger: like 1300x2400 while the viewbox is 250x250
if you dont set a size, it's a good idea to assume that the viewbox size is the size of the svg
but an svg doesnt use pixels, so, what's 250? 250px? 100%? 100svw? 250%? 250svw?
set a width and height and the browser wont have to guestimate, and it will load with the correct size alreadyIs chromes default what you set in the width and height attribute, regardless of if you put a unit there or does it set a default another way?
What causes that? Is it just resizing it with css?
Yeah this is the method I’ll probably use. I get that adding the unit specifically tells the browser what to do, but if you just declare
width=“250”, wouldn’t that essentially be the equivalent of width=“250px”? Why would the browser have to guesstimate the value of 250, I don’t really know how to word this but I hope you understand what I mean haha, doesn’t 250 mean 250? I don’t quite understand how the browser could assume anything otherwise unless you declare something different?and the width and height attributes
it has nothing to do with units
if something is positioned at 50,30 in an svg, it is at 50,30 in the svg
thats it
where is that in the screen? it's impossible to say
Oh okay I see.
Ahh okay that makes sense, so just to make sure I have everything in order,
essentially as you say, it’s same to assume the view box width and height is the size of the svg, resizing it with the attributes or css can make it larger than the view box. On chrome the size defaults the width/height. and on Firefox I assume it’s the same? Is that correct?
What’s the difference between the way google and Firefox rendering them? Is it just that you must have the height on Firefox to resize it?
no
the size of the viewbox is the size of the viewbox
the width and height are what set the size of the svg
i cant tell you the differences between firefox and chrome because ive never looked into what firefox does
Oh yeah that’s my bad.
No worries
Thank you for your help. And thank you too b1
you're welcome
I recently heard a metaphor re svgs.
You’ve drawn a doodle on a long piece of paper in the upper left hand corner . Placing a frame over this part of the paper makes inside the frame the viewable area (view box). If you slide the frame to the right, only part of your doodle might be visible, or it might disappear from view entirely. However, the doodle still exists in its original spot on the paper. The frame simply determines what part of the paper you see.
Doodle lives at the top left coordinates and takes up a certain amount of space , even when it isn’t in the frame doesn’t mean it’s not there. The frame just needs to know the coordinates it needs to live at on the page for it to showcase the doodle. The frame is the viewport , the doodle is the path and it lives wherever you’ve drawn it.
Additionally , you can move this paper and frame around the house(the viewport) . Put in on the fridge or the table and the doodle (path) is still at the top left (coordinates) of the paper (Canvas).
The page has moved around but the doodle still lives where it lives on the page, top left. If you align the frame over it, doodle will be visible; if frame is obscuring doodle you don’t see it.
I think I’ve butchered the explanation though maybe one of the concepts will click
Viewbox* is infinite 😄
that helped lots click for me (cords on a infinite paper)
Fun fact they have
overflow: hidden by default but if you remove it you can keep the containing bounding box (viewbox/size) but expose outisde those bounds.the only thing i disagree is starting from the top left corner
the thing is: the viewport can be negative, and things can be placed in the negative position
an example of it:
this will center the circle in the viewbox
a paper sheet is not infinite: there's the table but you cant draw on the table
the sheet is infinite
you never hit the table
exactly
therefore, it has no corners
but this negative weirdness is hard to explain anyways
besides that tiny inaccuracy, i love that explanation
this is trippy
by the way, the "frame" can be of any size: bigger or smaller than the content
it is
but it works
and it is shorter than setting cx and cy to 12.5%
yea I guess I don't use %'s all that much
wouldn't work the same though huh
🤔
no, because if you change the width and height, the circle is in a different place
I mean no?
but visually speaking, it is the same
however... still longer than using -20 -20 on the viewbox
cx and cy are set to 0 by default
by moving the viewbox into the negative by half the width and height, you centered the circle
and in this case, it's just 4 bytes longer vs 16 bytes
also, it shows that the paper is, indeed, trully infinite
guess the flag: