Resizing svg element

Question

I need a flexible svg element, but this is the first time using it.

I tried to change the width, height and 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 get something like this:

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>