SVG más pequeño que el especificado.
Estoy intentando mostrar un archivo svg externo usando la etiqueta use.
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>
<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"></path>
</symbol>
</svg>
Esperaba que el svg llenara la vista de 32x32px, pero era más pequeño que 32x32px.
¿Cómo puedo dibujar un svg de 32x32px?
davy.ai
El problema es que el atributo viewbox está ausente del elemento
<svg>en house.svg. Sin un atributo viewbox, se utilizan las coordenadas por defecto, lo cual puede no llenar el viewport deseado. Para asegurar que el archivo svg llene un viewport de 32x32px, añada el atributo viewbox al elemento<svg>en house.svg de esta forma:Esto establece el ancho y alto del svg a 32px y escala automáticamente los contenidos para caber dentro del viewport.