SVG 图标包含在页面中时看起来有所不同

Question

我想在我的页面中显示this svg（这是下载链接）。我这样做：

<img alt="logo" src="/assets/logo.svg">

但这就是结果：

我在中心圆周围有那些丑陋的线条，但当我打开 SVG 文件时它们不在那里。

是浏览器错误吗？

Answer 1

这称为抗锯齿，所有浏览器都可以使用它来将形状混合在一起。可以通过将 shape-rendering="crispEdges" 或 shape-rendering:crispEdges 设置为 CSS 样式来禁用它。

您的两个形状可以使用此集合，即圆上方的多边形和圆下方的路径。

Answer 2

不工作，当我检查 1920vw 尺寸 > https://d.pr/v/fs3zFE