Resizing svg element - html

Question

I need a flexible svg element, but this is the first time using it.
I tried to change the width, heigh & even set positioning property for the circle but none of them work. How to resize this circle?
Thanks in advance
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
position: absolute;
top: 38%;
left: 39%;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent="75"] .outer {
stroke-dashoffset: 133;
//stroke-dashoffset: 50;
-webkit-animation: show75 2s;
animation: show75 2s;
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
<div class="container text-center">
<figure class="chart" data-percent="75">
<figcaption>45%</figcaption>
<svg width="200" height="200">
<circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
</svg>
</figure>
</div>
When i resize the circle i got something like this:Resized circle

Answer 1

Don't use a set height or width on the SVG, use the viewbox attribute instead
<svg viewbox="0 0 200 200">
Then the SVG will scale to any size you want just by using a width on the parent container.
The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
Viewbox # MDN
.container.text-center {
/* for demo */
display: inline-block;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
width: 100px;
/* size here */
}
.chart figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent="75"] .outer {
stroke-dashoffset: 133;
//stroke-dashoffset: 50;
-webkit-animation: show75 2s;
animation: show75 2s;
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
.chart.wide {
width: 150px;
}
<div class="container text-center">
<figure class="chart" data-percent="75">
<figcaption>45%</figcaption>
<svg viewbox="0 0 200 200">
<circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
</svg>
</figure>
</div>
<div class="container text-center">
<figure class="chart wide" data-percent="75">
<figcaption>45%</figcaption>
<svg viewbox="0 0 200 200">
<circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
</svg>
</figure>
</div>

Answer 2

Using the transform property you can scale the circle however you want. For example: using transform: scale(0.5,0.5); will scale the circle to half width and height. W3 Schools shows how this works nicely.
However, you can't transform text, so you will have to move it manually.
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
position: absolute;
top: 18%;
left: 15%;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent="75"] .outer {
stroke-dashoffset: 133;
//stroke-dashoffset: 50;
-webkit-animation: show75 2s;
animation: show75 2s;
transform: scale(0.5, 0.5);
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
<div class="container text-center">
<figure class="chart" data-percent="75" transform="">
<figcaption>45%</figcaption>
<svg width="200" height="200">
<circle class="outer mr-auto ml-auto" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"></circle>
</svg>
</figure>
</div>