Kevin Powell - Community•6mo ago

Best way to handle svg sizes

Hey there, what would be the best way to maintain svg sizes throughout a project? Should you keep the inline sizes they are given e.g. <svg width="x" height="y"></svg>? Or should you handle them similar to how you handle images by setting a max-width: 100%; on them and not setting the sizes on them until you have to in which case maybe setting up a few classes like .icon-small, .icon-medium etc could be an ideal way? Thanks in advance.

4 Replies

MarkBoots•6mo ago

most important is the viewbox, then you can set a default size inline and handle the rest in css

snxxwyyOP•6mo ago

i'm not really too familiar with the in depths of svgs, the viewbox consists of the inline width and height right? so you're saying have an inline width and height and then handle the rest in css with things like the classes?

MarkBoots•6mo ago

the viewbox creates the canvas in which the svg is drawn and were all shapes are positioned relative too. typically it has the same aspect-ratio as your width/height

<svg width="32" height="32" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

<svg width="32" height="32" viewBox="0 0 100 100">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />
</svg>

here the canvas starts at 0,0 and ends at 100 100, it does not have units

snxxwyyOP•6mo ago

ahh okay i see, thank you

Gaming

Programming

Best way to handle svg sizes