Web 上 svg 图标周围的空白区域

Question

i use google material icon, and it has white space around it. When i apply sizing for the svg, it still keeps white space around it and the icon is tiny. I add css to svg or a wrapper div it doesn't matter.

css

svg {
    height: 16px;
    width: 16px;
}

html

<svg>
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/path.svg#ic_arrow_drop_down"></use>
</svg>

the svg file contains

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
... more symbols...
    <symbol id="ic_arrow_drop_down" viewBox="0 0 24 24">
        <path d="M7 10l5 5 5-5z"/>
        <path d="M0 0h24v24H0z" fill="none"/>
    </symbol>
... more symbols...
</symbol>

Answer 1

I guess the viewBox is the wrong size. Try viewBox="7 10 10 10" .

 svg { width: 16px; height: 16px; }

 <svg id="ic_arrow_drop_down" viewBox="7 10 10 10 "> <path d="M7 10l5 5 5-5z" /> </svg>

I think the second path is obsolete, I have removed it.

Answer 2

I had the same problem but with this code, I could fix it

<svg class="icon icon-bookmark"><use xlink:href="#icon-bookmark"></use>
     <symbol id="icon-bookmark" viewBox="0 0 32 32">
          <path d="M6 0v32l10-10 10 10v-32z"></path>
     </symbol>
</svg>


.icon {
   display: inline-block;
   width: 8rem;
   height: 8rem;
   stroke-width: 0;
   stroke: currentColor;
   fill: currentColor;

}