How to resize a svg - html

Question

I want to reduce the size of a svg. I tried reducing the height and width attributes and that helped, but the size of the image is still too big and when I try to reduce more, it ends up being cut instead of reduced.
So, more specifically, if I have a svg like this one:
<svg height="15" width="28" fill="#D0D4D9" fill-rule="evenodd">
<path d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"></path>
<path d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"></path>
</svg>
how can I resize it? Is there maybe an online page when we can do that or a general rule for this?

Answer 1

SVG elements have no actual size, they are made up of vectors to precisely be displayed in any size.
The first problem with your SVG code is to have omitted the viewbox attribute.
You can calculate its values using the JS method: SVGGraphicsElement.getBBox().
In your case your viewBox is: viewBox="2 4 20 16"
Then simply change css values of width and height, according to the viewbox props (20 / 16).
this will be :
const mySVG = document.querySelector('#my-svg');
function toggleSize()
{
mySVG.classList.toggle('sz200');
}
svg {
width : 100px;
height : 80px;
margin : 20px;
background : blue;
fill : #D0D4D9;
fill-rule : evenodd;
}
.sz200 {
width : 200px;
height : 160px;
}
<button onclick="toggleSize()">toggle size: (100-80) | (200-160)</button>
<br>
<svg id="my-svg" viewBox="2 4 20 16" >
<path d="
M 12 18 c -4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998
3.973 7.998 6 0 1.74-3.462 6-7.998 6 m 0-14 C 6.48 4 2 8.841 2 12
c 0 3.086 4.576 8 10 8 5.423 0 10 -4.914 10-8 0 -3.159 -4.48 -8 -10 -8" />
<path d="
M 11.977 13.984 c -1.103 0-2-.897-2-2 s .897-2 2-2 c 1.104 0 2 .897 2 2
s -.896 2-2 2 m 0-6 c -2.206 0-4 1.794-4 4 s 1.794 4 4 4 c 2.207 0 4-1.794
4-4 s -1.793-4-4-4" />
</svg>

Answer 2

Change the height from 15 to auto
<svg
height="auto"
width="28"
fill="#D0D4D9"
fill-rule="evenodd"
>
<path
d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"
></path>
<path
d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"
></path>
</svg>