How to resize an svg?

Question

I've tried numerous methods I've found on stackoverflow and google but my svg isn't resizing. Can someone please explain why?

<div>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

https://codepen.io/hellojessicagraham/pen/XBOyzP

The method that I've shown in my code example with the "viewBox" Have also tried wrapping it in a div and changing the size of the div, the size of the svg tag, putting it in a span, displaying block, inline-block. — DumbDevGirl42069, Aug 12 '18 at 04:36
what size do you want it to be? or do you just want it to be responsive to the container size? — souzan, Aug 12 '18 at 04:42
20px by 20px - its 20px by 20px but it hasn't resized, it's like just cut off the outside :-/ — DumbDevGirl42069, Aug 12 '18 at 04:45
Possible duplicate of [Resizing SVG in html?](https://stackoverflow.com/questions/3120739/resizing-svg-in-html) — Heretic Monkey, Aug 12 '18 at 05:58
@HereticMonkey No it's not, I tried this method and it's not working — DumbDevGirl42069, Aug 12 '18 at 07:22
I saw nothing in the question that showed you had tried that. From [Why are some questions marked as duplicate?](https://stackoverflow.com/help/duplicates): "If you see a question and do not agree that it truly is a duplicate, **edit it to highlight the differences**" (emphasis in the original). — Heretic Monkey, Aug 12 '18 at 12:36

souzan · Answer 1 · 2018-08-12T05:55:28.433

1

I adjusted the viewbox values and removed the svg css styles.

<svg viewBox="15 32 75 36" height="20px" width="20px">

https://codepen.io/anon/pen/OwddPa

Explanation of how svg viewbox works: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

edited Aug 12 '18 at 05:55

answered Aug 12 '18 at 05:08

souzan

289
1
2
14

It's not scaled right... It's a plus sign with rounded corners – DumbDevGirl42069 Aug 12 '18 at 05:51
ok check my updated answer. added a border around the svg so you can see how it's cropped. – souzan Aug 12 '18 at 05:55

score 0 · Answer 2 · answered Aug 12 '18 at 05:23

You can do it by modifying 'width' and 'height' attributes on your tag.

<svg viewBox="32 32 32 32" height="100" width="100">

Or, also through css, by adding in your stylesheet:

svg{
  width:100px;
  height:100px;
}

<div style='background:red'>
  <svg viewBox="32 32 32 32" height="100" width="100">
        <g transform="translate(0,-952.36218)">
          <path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
            style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
            fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
          />
        </g>
   </svg>
</div>

How to resize an svg?

2 Answers2