Cannot change the size of a use SVG element - svg

Question

this is the raw code I've received. Just a cross defined as a polygon :
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 115.9 80" style="enable-background:new 0 0 115.9 80;" xml:space="preserve">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5
78.8,40.5 "/>
</svg>
and this is what I've done :
<svg class="icons" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<symbol id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg viewBox="0 0 115.9 80" width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>
following the solution for the same problem someone else had (Cannot Change SVG <use> icon size when linked to <symbol>)
but this is not working :/ I just want for exemple to resize the cross with a 15px width and 15px height.
Could someone provide me the solution as well as some explanations ? thanks : )

Answer 1

If you encapsulate a SVG drawing in a symbol, the viewBox attribute moves from the <svg> to the <symbol> element.
The viewBox values of your source are not really helpful. A tight bounding box around the grafic can be achieved with viewBox="58.2 28.2 20.6 20.6". You can find it with the original file loaded in a browser. Then do
document.querySelector('polygon').getBBox()
The returned object provides you with x/y/width/height values you can feed into the viewBox.
I'd like to point out there is an implicit sizing going on here: The symbol is shown according to the x/y/width/height values of the <use> element where it is referenced. None of them are present; they default to 0 (position) and 100% (size). In other words: the <use> element just fills its surrounding <svg> element, where width and height are set.
<svg class="icons" width="0px" height="0px">
<symbol viewBox="58.2 28.2 20.6 20.6" id="cross">
<polygon points="78.8,36.5 70.5,36.5 70.5,28.2 66.5,28.2 66.5,36.5 58.2,36.5 58.2,40.5 66.5,40.5 66.5,48.8 70.5,48.8 70.5,40.5 78.8,40.5" style="fill:#6511e4;"/>
</symbol>
</svg>
<div class="cross">
<svg width="15" height="15">
<use href="#cross" id="cross-1"/>
</svg>
</div>