30 replies

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

img

tag, if my

img

img

tag has

display: block

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

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

10px

)?

Is this because those attributes inherit over to the

img

img

tag and become it's

width

width

and

height

height

attributes? I always thought the

img

img

tag would be 100% of the container due to

display: block;

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.