How can I resize svg using CSS?

Question

I've found a related question here: How can I resize an SVG?

I would like to resize the arrow made in swg using the CSS. In the related question the objective is achieved through an HTML directive ( viewBox="0 0 32 32" )

Do you have any suggestion?

 #DIV_1 { float: left; font-family: 'PT Sans Narrow'; font-size: 13px; height: 33px; overflow-wrap: break-word; padding-right: 20px; padding-top: 8px; text-align: center; width: 50px; word-wrap: break-word; perspective-origin: 35px 20.5px; transform-origin: 35px 20.5px; font: normal normal normal normal 13px/normal 'PT Sans Narrow'; padding: 8px 20px 0px 0px; }/*#DIV_1*/ #svg_2 { font-family: 'PT Sans Narrow'; font-size: 13px; height: 29px; overflow-wrap: break-word; overflow-x: hidden; overflow-y: hidden; text-align: center; width: 50px; word-wrap: break-word; perspective-origin: 25px 14.5px; transform-origin: 25px 14.5px; font: normal normal normal normal 13px/normal 'PT Sans Narrow'; overflow: hidden; }/*#svg_2*/ #path_3 { font-family: 'PT Sans Narrow'; font-size: 13px; overflow-wrap: break-word; text-align: center; word-wrap: break-word; fill: rgb(25, 94, 2); font: normal normal normal normal 13px/normal 'PT Sans Narrow'; }/*#path_3*/

 <div class="igc-textual-icon" id="DIV_1"><svg data-id="" height="29" width="50" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2"> <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.3399999999999933,23.413333333333334,0.9399999999999933,22.8C0.9399999999999933,22.8,22.819999999999993,0.9200000000000017,22.819999999999993,0.9200000000000017C23.433333333333326,0.3066666666666683,24.166666666666657,1.6653345369377348e-15,25.019999999999992,1.6653345369377348e-15C25.87333333333332,1.6653345369377348e-15,26.606666666666655,0.3066666666666683,27.21999999999999,0.9200000000000017C27.21999999999999,0.9200000000000017,49.099999999999994,22.8,49.099999999999994,22.8C49.713333333333324,23.413333333333334,50.019999999999996,24.14666666666667,50.019999999999996,25C50.019999999999996,25,50,25,50,25" id="path_3"></path> </svg></div>

Answer 1

Add this code to your svg in html preserveAspectRatio="xMinYMin meet" also remove from it width and height, and after that you can resize it by changing width and height of parent div

here is an example. you can change the with and height of parent div in css,

example

html part

<div class="igc-textual-icon" id="DIV_1"><svg data-id="" viewBox="0 0 56 56" preserveAspectRatio="xMinYMin meet" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg_2">
    <path class="igc-table-scaledpath" fill="#195e02" d="M50,25C49.99999999999999,25.84,49.69333333333333,26.573333333333334,49.08,27.2C48.46666666666666,27.826666666666664,47.73333333333333,28.133333333333333,46.879999999999995,28.12C46.879999999999995,28.12,3.1399999999999935,28.12,3.1399999999999935,28.12C2.2999999999999936,28.119999999999997,1.56666666666666,27.813333333333333,0.9399999999999933,27.2C0.31333333333332647,26.586666666666662,0.006666666666659825,25.853333333333328,0.019999999999993245,25C0.033333333333326665,24.14666666666667,0.3399999999999933,23.413333333333334,0.9399999999999933,22.8C0.9399999999999933,22.8,22.819999999999993,0.9200000000000017,22.819999999999993,0.9200000000000017C23.433333333333326,0.3066666666666683,24.166666666666657,1.6653345369377348e-15,25.019999999999992,1.6653345369377348e-15C25.87333333333332,1.6653345369377348e-15,26.606666666666655,0.3066666666666683,27.21999999999999,0.9200000000000017C27.21999999999999,0.9200000000000017,49.099999999999994,22.8,49.099999999999994,22.8C49.713333333333324,23.413333333333334,50.019999999999996,24.14666666666667,50.019999999999996,25C50.019999999999996,25,50,25,50,25" id="path_3"></path>
</svg></div>

Answer 2

One option is to use simple transform/scale declaration:

#svg_2{
  transform: scale(0.5); /* scales it to half its size */
}

Another option is to use "transfrom" attribute directly in the markup of the SVG, either svg element itself or any of its children, like path - example: transform="scale(0.5)"

<svg 
  data-id="" height="29" width="50" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" id="svg_2"
  transform="scale(0.5)"
>

You can also use number higher than 1 to make SVG larger.