Kevin Powell - CommunityKP-C
Kevin Powell - Community15mo ago
76 replies
snxxwyy

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.
svg {
  width: 1em;
  height: 1em;
}

whereas without those attributes, just defining the width would resize it e.g.
svg {
  width: 1em;
}

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.
Was this page helpful?