svg sizing when in img tag
Hey, so if i have an svg in a file, e.g.
and i import it into my html with an
img tag, if my img tag has display: block on it because of the img reset, meaning it should take up 100% of the container width, why is the size of the img tag when i take a look in dev tools equivalent to the width and height attribute values of the svg it's importing (in this case 10px)?
Is this because those attributes inherit over to the img tag and become it's width and height attributes? I always thought the img tag would be 100% of the container due to display: block; and the svg inside it would just be it's own size.
I'd appreciate if someone could help clear this up, thanks in advance.17 Replies
if you use
<img>, you're not importing anything
it's just another image, like jpeg or the nasty webpOh okay I see, so it’s turning the svg into an image which means the svgs height and width attributes are the images?
no
it's the natural width and height
basically, if you don't touch it, don't set any size in css or html
that's the natural size of the image
(some will say "intrinsic size" but that now-a-days has a different meaning)
I don’t really understand why the img isn’t 100% of the container and somehow uses the svgs width and height attributes
that has nothing to do with the svg
remember that images have a natural size, and setting to block doesn't do what you expect
did you set the image to 100%?
How is the natural size determined?
I didn’t actually, so block doesn’t set it to 100%?
by the image's dimensions
for images? i don't think it does
images are special
And the images dimensions are usually its width and height attributes?
So since the img tag doesn’t have any, it’s natural size is the size of the svg?
Oh I didn’t know that haha, so it does for everything else but images?
no, it's the
naturalWidth and naturalHeight
i think so, but don't quote me on thatOh I see, I’ve never seen those on an image before, I thought it’d just be the images dimensions that size it
those are properties that you can only see in javascript or in the debug tools
Oh okay, I see
that is what determines the size of an image when you don't set anything
And I assume that’d be the images dimensions by default?
yup
Ah this all makes sense now. Understanding these little things really does make other things clearer haha
I appreciate the help, thanks
you're welcome