Icon svg does not occupy 100% of the area in svg tag

Asked

Viewed 48 times

2

I’m having trouble with one of my icons in svg, it doesn’t occupy 100% of width and height tag svg and this ends up disturbing me in some alignments with texts and other icons.

Follows the code:

<svg>
  <defs>
    <symbol id="question-list" viewBox="0 0 512 512">
        <path class="st0" d="M112.9,24.6H22.4C10,24.6,0,34.6,0,47v90.6C0,149.9,10,160,22.4,160H113c12.3,0,22.4-10,22.4-22.4V47
        C135.3,34.6,125.3,24.6,112.9,24.6zM14.6,47c0-4.3,3.5-7.8,7.8-7.8H113c4.3,0,7.8,3.5,7.8,7.8v90.6c0,4.3-3.5,7.8-7.8,7.8H22.4c-4.3,0-7.8-3.5-7.8-7.8C14.6,137.6,14.6,47,14.6,47z"/>
        <path class="st0" d="M191.9,63h312.8c4,0,7.3-3.3,7.3-7.3s-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3C184.6,59.7,187.9,63,191.9,63z"/>
        <path class="st0" d="M191.9,99.5h247.2c4,0,7.3-3.3,7.3-7.3s-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3S187.9,99.5,191.9,99.5z"/>
        <path class="st0" d="M504.7,121.5H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,124.8,508.7,121.5,504.7,121.5z"/>
        <path class="st0" d="M504.7,212.2H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,215.4,508.7,212.2,504.7,212.2z"/>
        <path class="st0" d="M191.9,263.3h247.2c4,0,7.3-3.3,7.3-7.3c0-4-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3C184.6,260,187.9,263.3,191.9,263.3z"/>
        <path class="st0" d="M504.7,285.2H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,288.5,508.7,285.2,504.7,285.2z"/>
        <path class="st0" d="M29.3,123.3c0,1.9,0.8,3.8,2.1,5.2c1.4,1.4,3.2,2.1,5.2,2.1c1.9,0,3.8-0.8,5.1-2.1l25.9-25.9l25.9,25.9c1.4,1.4,3.2,2.1,5.1,2.1s3.8-0.8,5.2-2.1c1.4-1.4,2.1-3.2,2.1-5.2c0-1.9-0.8-3.8-2.1-5.2L78,92.3l25.9-25.9c2.8-2.8,2.8-7.5,0-10.3c-1.4-1.4-3.2-2.1-5.2-2.1c-1.9,0-3.8,0.8-5.1,2.1L67.7,82l-26-25.9c-1.4-1.4-3.2-2.1-5.2-2.1c-1.9,0-3.8,0.8-5.2,2.1c-1.4,1.4-2.1,3.2-2.1,5.2c0,1.9,0.8,3.8,2.1,5.2l25.9,25.9l-25.9,25.9C30,119.5,29.3,121.4,29.3,123.3z"/>
        <path class="st0" d="M112.9,188.3H22.4C10,188.3,0,198.4,0,210.7v90.6c0,12.3,10,22.4,22.4,22.4H113c12.3,0,22.4-10,22.4-22.4v-90.6C135.3,198.4,125.3,188.3,112.9,188.3z M14.6,210.7c0-4.3,3.5-7.8,7.8-7.8H113c4.3,0,7.8,3.5,7.8,7.8v90.6c0,4.3-3.5,7.8-7.8,7.8H22.4c-4.3,0-7.8-3.5-7.8-7.8C14.6,301.3,14.6,210.7,14.6,210.7z"/>
        <path class="st0" d="M49.7,292.6c1.4,1.6,3.4,2.5,5.5,2.5c0.1,0,0.3,0,0.4,0c2.2-0.1,4.3-1.3,5.6-3.2l43.7-63.6c1.1-1.6,1.5-3.5,1.2-5.5c-0.4-1.9-1.4-3.6-3-4.7c-1.2-0.8-2.6-1.3-4.1-1.3c-2.4,0-4.7,1.2-6,3.2l-38.3,55.9L42,261.4c-1.4-1.6-3.4-2.5-5.5-2.5c-1.7,0-3.4,0.6-4.8,1.8c-3,2.6-3.4,7.2-0.8,10.3L49.7,292.6z"/>
		</symbol>
  </defs>
</svg>



<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="myicons.svg#question-list"></use>
</svg>

I couldn’t get him to show up here, but here’s a picture of this.

Ele não ocupada a área azul inteira como os demais

Aqui esta ok ocupando toda área azulAqui tb esta ok ocupa toda área

svg

  • Will you use SVG as icons in an HTML? Making use of Sprite CSS?

  • @Guilhermenascimento in vdd so to add it straight into HTML I’m not using as Sprite.

  • I would recommend the Sprite CSS approach, using SVG, so you can repurpose the same SVG for countless icones and use only to change the color of Fill.

  • @Guilhermenascimento yes yes but in this case I chose not to use as Prite, but to with problem in this specific icon =/ and that problem me in some alignments.

2 answers

0

It’s not the perfect solution, but you can leave the symbol with preserveAspectRatio="none" so it occupies 100% in the X Y to control putting a width and height of the SVG in hand.

inserir a descrição da imagem aqui

Also, you have to make a fine-tuning in the viewbox of the SVG, switched to viewBox="0 25 512 300"... This problem happened because when the icon was drawn it was not occupying the full size of the canvas

And the icon did not appear in the example of your question because you left the xLink reference wrong, it should just be xlink:href="#question-list"

OBS: is a good practice to put style="display: none" in the <svg> where you’re building your Pattern of Symbols!, if not it will take up space on the screen!

.teste {
  border: 1px solid #000;
  width: 170px;
  height: 100px;
}
<svg style="display: none">
  <defs>
    <symbol id="question-list" viewBox="0 25 512 300" preserveAspectRatio="none">
        <path class="st0" d="M112.9,24.6H22.4C10,24.6,0,34.6,0,47v90.6C0,149.9,10,160,22.4,160H113c12.3,0,22.4-10,22.4-22.4V47
        C135.3,34.6,125.3,24.6,112.9,24.6zM14.6,47c0-4.3,3.5-7.8,7.8-7.8H113c4.3,0,7.8,3.5,7.8,7.8v90.6c0,4.3-3.5,7.8-7.8,7.8H22.4c-4.3,0-7.8-3.5-7.8-7.8C14.6,137.6,14.6,47,14.6,47z"/>
        <path class="st0" d="M191.9,63h312.8c4,0,7.3-3.3,7.3-7.3s-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3C184.6,59.7,187.9,63,191.9,63z"/>
        <path class="st0" d="M191.9,99.5h247.2c4,0,7.3-3.3,7.3-7.3s-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3S187.9,99.5,191.9,99.5z"/>
        <path class="st0" d="M504.7,121.5H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,124.8,508.7,121.5,504.7,121.5z"/>
        <path class="st0" d="M504.7,212.2H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,215.4,508.7,212.2,504.7,212.2z"/>
        <path class="st0" d="M191.9,263.3h247.2c4,0,7.3-3.3,7.3-7.3c0-4-3.3-7.3-7.3-7.3H191.9c-4,0-7.3,3.3-7.3,7.3C184.6,260,187.9,263.3,191.9,263.3z"/>
        <path class="st0" d="M504.7,285.2H191.9c-4,0-7.3,3.3-7.3,7.3s3.3,7.3,7.3,7.3h312.8c4,0,7.3-3.3,7.3-7.3C512,288.5,508.7,285.2,504.7,285.2z"/>
        <path class="st0" d="M29.3,123.3c0,1.9,0.8,3.8,2.1,5.2c1.4,1.4,3.2,2.1,5.2,2.1c1.9,0,3.8-0.8,5.1-2.1l25.9-25.9l25.9,25.9c1.4,1.4,3.2,2.1,5.1,2.1s3.8-0.8,5.2-2.1c1.4-1.4,2.1-3.2,2.1-5.2c0-1.9-0.8-3.8-2.1-5.2L78,92.3l25.9-25.9c2.8-2.8,2.8-7.5,0-10.3c-1.4-1.4-3.2-2.1-5.2-2.1c-1.9,0-3.8,0.8-5.1,2.1L67.7,82l-26-25.9c-1.4-1.4-3.2-2.1-5.2-2.1c-1.9,0-3.8,0.8-5.2,2.1c-1.4,1.4-2.1,3.2-2.1,5.2c0,1.9,0.8,3.8,2.1,5.2l25.9,25.9l-25.9,25.9C30,119.5,29.3,121.4,29.3,123.3z"/>
        <path class="st0" d="M112.9,188.3H22.4C10,188.3,0,198.4,0,210.7v90.6c0,12.3,10,22.4,22.4,22.4H113c12.3,0,22.4-10,22.4-22.4v-90.6C135.3,198.4,125.3,188.3,112.9,188.3z M14.6,210.7c0-4.3,3.5-7.8,7.8-7.8H113c4.3,0,7.8,3.5,7.8,7.8v90.6c0,4.3-3.5,7.8-7.8,7.8H22.4c-4.3,0-7.8-3.5-7.8-7.8C14.6,301.3,14.6,210.7,14.6,210.7z"/>
        <path class="st0" d="M49.7,292.6c1.4,1.6,3.4,2.5,5.5,2.5c0.1,0,0.3,0,0.4,0c2.2-0.1,4.3-1.3,5.6-3.2l43.7-63.6c1.1-1.6,1.5-3.5,1.2-5.5c-0.4-1.9-1.4-3.6-3-4.7c-1.2-0.8-2.6-1.3-4.1-1.3c-2.4,0-4.7,1.2-6,3.2l-38.3,55.9L42,261.4c-1.4-1.6-3.4-2.5-5.5-2.5c-1.7,0-3.4,0.6-4.8,1.8c-3,2.6-3.4,7.2-0.8,10.3L49.7,292.6z"/>
    </symbol>
  </defs>
</svg>



<svg class="teste">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#question-list"></use>
</svg>

-3

It tries to put inside a div, and it leaves this div with height and width 100%. I never had problem with svg, it always occupied 100% maintaining the relation. If you don’t play an Object-fit: Fill in svg.

Browser other questions tagged svg

You are not signed in. Login or sign up in order to post.