空白の周りのsvgアイコン

Question

私はGoogleのマテリアルアイコンを使用し、その周りに空白があります。私はsvgのサイジングを適用するとき、それはまだその周りに空白を保持し、アイコンは小さいです。 svgやラッパーdivにcssを追加しても問題ありません。

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> 

SVGファイルは、私はviewBoxが間違ったサイズだと思い

<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

が含まれています。試してください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>

私は2番目のパスが、私はそれを削除した、時代遅れだと思います。