76 replies

svg width and height attribute + resizing

Hey, when i use svgs, i used to take off the

width

width

and

height

height

attributes e.g.

<svg width="x" height="y">...</svg>

<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;
}

svg {
  width: 1em;
  height: 1em;
}

whereas without those attributes, just defining the width would resize it e.g.

svg {
  width: 1em;
}

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;

width: 1em;

worked without them.

I'd appreciate if anybody could give me some insight into that info, thanks in advance.

KP-C

Kevin Powell - Community•17mo ago•

76 replies

snxxwyy

svg width and height attribute + resizing

Hey, when i use svgs, i used to take off the

width

width

and

height

height

attributes e.g.

<svg width="x" height="y">...</svg>

<svg width="x" height="y">...</svg>

svg {
  width: 1em;
  height: 1em;
}

svg {
  width: 1em;
  height: 1em;
}

whereas without those attributes, just defining the width would resize it e.g.

svg {
  width: 1em;
}

svg {
  width: 1em;
}

width: 1em;

width: 1em;

worked without them.

I'd appreciate if anybody could give me some insight into that info, thanks in advance.

svg width and height attribute + resizing

Similar Threads

svg width and height attribute + resizing

Similar Threads

Similar Threads

Similar Threads