svg sizing when in img tag

Hey, so if i have an svg in a file, e.g.

// example.svg
<svg width="10px" height="10px" viewbox="...">
  <path></path>
</svg>

// example.svg
<svg width="10px" height="10px" viewbox="...">
  <path></path>
</svg>

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

ἔρως•2w ago

if you use <img>, you're not importing anything it's just another image, like jpeg or the nasty webp

snxxwyyOP•2w ago

Oh okay I see, so it’s turning the svg into an image which means the svgs height and width attributes are the images?

ἔρως•2w ago

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)

snxxwyyOP•2w ago

I don’t really understand why the img isn’t 100% of the container and somehow uses the svgs width and height attributes

ἔρως•2w ago

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%?

snxxwyyOP•2w ago

How is the natural size determined? I didn’t actually, so block doesn’t set it to 100%?

ἔρως•2w ago

by the image's dimensions for images? i don't think it does images are special

snxxwyyOP•2w ago

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?

ἔρως•2w ago

no, it's the naturalWidth and naturalHeight i think so, but don't quote me on that

snxxwyyOP•2w ago

Oh I see, I’ve never seen those on an image before, I thought it’d just be the images dimensions that size it

ἔρως•2w ago

those are properties that you can only see in javascript or in the debug tools

snxxwyyOP•2w ago

Oh okay, I see

ἔρως•2w ago

that is what determines the size of an image when you don't set anything

snxxwyyOP•2w ago

And I assume that’d be the images dimensions by default?