How to resize a svg icon (use href) - svg

Question

I have all my icons added as symbols in the html file, eg:
<symbol id="flag-bg"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 319.997h640V480H0z"/><path fill="#fff" d="M0 0h640v160.003H0z"/><path fill="#00966e" d="M0 160.003h640v160.003H0z"/></g></symbol>
And I want to use it to display an icon of 32 by 24
<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg"><use href="#flag-bg"><title></title></use></svg>
But it doesn't resize the flag to fill the size. What's the magic properties to make it happen?

Answer 1

You have to set a viewBox attribute on the <symbol> element that matches the size of its grafical content. To find out what size that is, you can use the .getBBox() function. Temporarily exchange <symbol> for <svg>, and don't mind if the grafical output makes no sense. You only need the numbers on the console:
console.log(document.querySelector('#flag-bg').getBBox())
<svg>
<svg id="flag-bg">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</svg>
</svg>
Then, use these values for your viewBox. There is no need to set a size on the <use> element, it defaults to 100% (of the surrounding <svg>) element.
<svg width="0" height="0">
<symbol id="flag-bg" viewbox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</symbol>
</svg>
<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg">
<use href="#flag-bg"><title></title></use>
</svg>

Answer 2

you can use viewbox property to scale your svg icon
check this code and reference link in below
<h1>Auto-Scaling an SVG Image with a <code>viewBox</code>
<div>—watch out for IE and table layouts</div></h1>
<figure>
<figcaption><code>img</code>, 100xauto height</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg"
style="width:100px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto widthx50</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg"
style="height:50px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto size</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
</div>
</figure>
you can use viewbox property and scale your svg icons in it ..
reference link clickhere