使用奇怪的边缘渲染SVG图标

Question

chrome上的SVG图标看起来非常奇怪，特别是instagram的放大，你可以看到所有奇怪的边缘。有谁知道怎么解决这个问题吗？

​

​

下面是图标的代码：

    <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呈现它的方式和你想要的不一样。请使用circle，而不是使用path来绘制圆。

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