How to resize an svg? - html

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

Answer 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

Answer 2

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>