奇妙な辺を持つSVGアイコンのレンダリング

Question

クロムのSVGアイコンは、非常に奇妙に見えます。特にinstagram 1 - すべての奇妙なエッジを見ることができます。誰もそれを修正する方法の任意のアイデアを持っていますか？ここで

アイコンのコードです：

<div id="instagram"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="35px" height="35px" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" class="icon"> 
<path fill="black" class="social_instagram" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z"/> 
<path class="circle" fill="white" d="M12,8.4c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6s3.6-1.6,3.6-3.6S14,8.4,12,8.4z M12,14.3c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3s2.3,1,2.3,2.3S13.3,14.3,12,14.3z M15.7,9.1c-0.5,0-0.8-0.4-0.8-0.8s0.4-0.8,0.8-0.8c0.5,0,0.8,0.4,0.8,0.8C16.6,8.7,16.2,9.1,15.7,9.1z M19,9.1c-0.1-2.5-1.5-4-4.1-4.1c-0.7,0-1,0-2.9,0S9.9,5,9.1,5C6.6,5.2,5.2,6.6,5,9.1c0,0.7,0,1,0,2.9s0,2.1,0,2.9c0.1,2.5,1.5,4,4.1,4.1c0.7,0,1,0,2.9,0s2.1,0,2.9,0c2.5-0.1,4-1.5,4.1-4.1c0-0.7,0-1,0-2.9S19,9.9,19,9.1z M17.7,14.8c-0.1,1.9-1,2.8-2.9,2.9c-0.7,0-1,0-2.8,0c-1.9,0-2.1,0-2.8,0c-1.9-0.1-2.8-1-2.9-2.9c0-0.7,0-1,0-2.8s0-2.1,0-2.8c0.1-1.9,1-2.8,2.9-2.9c0.7,0,1,0,2.8,0s2.1,0,2.8,0c1.9,0.1,2.8,1,2.9,2.9c0,0.7,0,1,0,2.8S17.7,14.1,17.7,14.8z"/> 
</svg> 
</div> 

Answer 1

サークルが実際にコーナーを曲がり、いくつかのベクターでちょうど正方形であるように見えます。これは、Chromeがあなたとは違ったレンダリングをしている理由かもしれません。サークルを描画するのにpathを使用する代わりに、代わりにcircleを使用してください。

<circle cx="12" cy="12" r="12" fill="black" class="social_instagram"/>