Clash Royale CLAN TAG#URR8PPP

How to scale SVG when svg reference another

I use inline svg in my project and I want change width and height to use like small icon but use tag dont resize.

.row
display: flex;
justify-content: space-between;
align-items: center;
border: solid 1px;


svg.icon
border: solid 1px tomato;
/**debug*/
overflow: visible;


.icon use
border: solid 1px green;


<svg style="display: none;" viewBox="0 0 24 24" width="24" height="24">
<defs>
<g id="ico-and">
<path d="M152.682,458.363c0,15.3,10.2,25.5,25.5,25.5h25.5v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25 h51v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25h25.5c15.3,0,25.5-10.2,25.5-25.5v-255h-306V458.363z M88.932,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5 C127.182,221.213,109.332,203.363,88.932,203.363z M522.432,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5 c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5C560.682,221.213,542.832,203.363,522.432,203.363z M394.932,55.463l33.15-33.15c5.1-5.1,5.1-12.75,0-17.85c-5.101-5.101-12.75-5.101-17.851,0l-38.25,38.25 c-17.85-12.75-40.8-17.851-66.3-17.851s-48.45,5.101-68.85,15.3l-35.7-38.25c-5.1-2.55-15.3-2.55-20.4,0 c-2.55,5.101-2.55,15.301,0,20.4l33.15,33.15c-35.7,28.05-61.2,71.399-61.2,122.399h306 C458.682,126.863,433.182,80.963,394.932,55.463z M254.682,126.863h-25.5v-25.5h25.5V126.863z M382.182,126.863h-25.5v-25.5h25.5 V126.863z" >
</g>
</defs>
</svg>

<div class="row">
<svg class="icon" alt="SO" viewBox="0 0 24 24" width="24" height="24">
<use xlink:href="#ico-and" viewBox="0 0 24 24" width="24" height="24"></use>
</svg>
<p>System</p>
</div>

https://codepen.io/chicoxin/pen/EpdMQj

1 Answer
1

You need to correct the viewBox, its also wrong in the first SVG.

.row
display: flex;
justify-content: space-between;
align-items: center;
border: solid 1px;


svg.icon
border: solid 1px tomato;
/**debug*/
overflow: visible;


.icon use
border: solid 1px green;


<svg style="display:none" viewBox="0 0 600 600" width="24" height="24">
<defs>
<g id="ico-and" >
<path d="M152.682,458.363c0,15.3,10.2,25.5,25.5,25.5h25.5v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25 h51v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25h25.5c15.3,0,25.5-10.2,25.5-25.5v-255h-306V458.363z M88.932,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5 C127.182,221.213,109.332,203.363,88.932,203.363z M522.432,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5 c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5C560.682,221.213,542.832,203.363,522.432,203.363z M394.932,55.463l33.15-33.15c5.1-5.1,5.1-12.75,0-17.85c-5.101-5.101-12.75-5.101-17.851,0l-38.25,38.25 c-17.85-12.75-40.8-17.851-66.3-17.851s-48.45,5.101-68.85,15.3l-35.7-38.25c-5.1-2.55-15.3-2.55-20.4,0 c-2.55,5.101-2.55,15.301,0,20.4l33.15,33.15c-35.7,28.05-61.2,71.399-61.2,122.399h306 C458.682,126.863,433.182,80.963,394.932,55.463z M254.682,126.863h-25.5v-25.5h25.5V126.863z M382.182,126.863h-25.5v-25.5h25.5 V126.863z" />
</g>
</defs>
</svg>

<div class="row">
<svg class="icon" alt="SO" viewBox="0 0 600 600" width="24" height="24">
<use xlink:href="#ico-and"></use>
</svg>
<p>System</p>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.