CODEWITHSUNDEEP
htmlsvg
kumomomo
kumomomo

Reputation: 1

SVG smaller than specified

I'm trying to display an external svg file using the use tag.

index.html

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px">
    <use href="./Assets/svg/icons/house.svg#bsi-house"></use>
</svg>

house.svg

<svg xmlns="http://www.w3.org/2000/svg" >
    <symbol viewbox="0 0 32 32" id="bsi-house">
        <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
    </symbol>
</svg>

I expected the svg to fill the 32x32px viewport, but it was smaller than 32x32px: SVG result

How can I draw a 32x32px svg?

Upvotes: 0

Views: 661

Answers (1)

ray
ray

Reputation: 27245

As @enxaneta points out, the problem is that the symbol's viewbox specifies a 32x32 canvas but the paths draw a 15px icon. Either reduce the viewbox to the bounds of the icon or change the paths to use the entire 32x32 grid.

#symbols {
  display: none;
}

svg {
  border: 1px solid red;
}
<svg id="symbols">
  <!-- original, with 32x32 viewbox -->
  <symbol viewbox="0 0 32 32" id="bsi-house-32">
    <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
    <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
  </symbol>
  
  <!-- 15x15 viewbox to be closer to the icon's actual bounding box -->
  <symbol viewbox="0 0 15 15" id="bsi-house-15">
    <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
    <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
  </symbol>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px">
  <use href="#bsi-house-32"></use>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px">
  <use href="#bsi-house-15"></use>
</svg>

Upvotes: 1

Related Questions