CODEWITHSUNDEEP
svgresizesymbols
M C
M C

Reputation: 256

Cannot change the size of a use SVG element

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 : )

Upvotes: 1

Views: 79

Answers (1)

ccprog
ccprog

Reputation: 21821

  1. If you encapsulate a SVG drawing in a symbol, the viewBox attribute moves from the <svg> to the <symbol> element.

  2. 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.

  3. 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>

Upvotes: 3

Related Questions