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>

// 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

img

img tag, if my

img

img

img

img tag has

display: block

display: block

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

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

10px

10px)?

Is this because those attributes inherit over to the

img

img

img

img tag and become it's

width

width

width

width and

height

height

height

height attributes? I always thought the

img

img

img

img tag would be 100% of the container due to

display: block;

display: block;

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.