CODEWITHSUNDEEP
svg
Gidon Wise
Gidon Wise

Reputation: 1916

How to resize an SVG by changing the SVG without CSS

How do you resize an SVG without using CSS by just changing the SVG itself.

Here is my SVG and I'd like for it to be 17x17

  <svg xmlns="http://www.w3.org/2000/svg"  width="420px" height="420px"  fill="none" stroke="#dcdcdc">
    <path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z"/>
    <path stroke-width="18" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
    </svg>

Thanks!

Upvotes: 1

Views: 51

Answers (1)

enxaneta
enxaneta

Reputation: 33044

As I've commented you need to add a viewBox attribute to the svg element. The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height and in this case should be equal to the bounding box of the group of paths + some extra space to acomodate the wide stroke.

console.log(group.getBBox())
body{background:black}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 420"  width="17"  fill="none" stroke="#dcdcdc">
  <g id="group">
    <path stroke-width="26" d="M209,15a195,195 0 1,0 2,0z"/>
    <path stroke-width="18" d="m210,15v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"/>
  </g>
    </svg>

Upvotes: 2

Related Questions