为什么我的 svg 看起来很糟糕？

Question

我的 svg 在 Google Chrome 和 Firefox 中看起来很糟糕，Svg 边框质量很差：

同时，在 Illustrator 中，svg 看起来很棒：

我已经使用此配置保存了 .svg 文件：

发生了什么事？

Answer 1

在您的 "bad" 示例中，SVG 已缩小到大约一半大小。这意味着 "good" 示例中一些粗约 1 像素的线条现在只有约 0.5 像素粗。这并没有给 SVG 渲染器中的抗锯齿例程太多可玩的地方。尝试使笔划宽度更粗。

那你应该会得到更好的结果。

Answer 2

如果您的 SVG 有很多水平 and/or 垂直线，您可以通过将坐标与像素网格对齐来改善其外观。我给你举个例子：

这是三张由圆角矩形组成的 SVG 图片。（这些图像的源代码粘贴在下面。）

在 (A) 中，矩形坐标根本没有与像素网格对齐。因此，有些线条清晰锐利，而另一些线条模糊且颜色较深。
在 (B) 中，矩形坐标被对齐到整数值，使它们具有统一的外观。但是，它们现在看起来都很模糊，因为抗锯齿功能将每条线展开为两个像素的宽度。
在 (C) 中，坐标被捕捉到整数值和，给定 x 和 y 方向上 0.5 像素的额外偏移。你应该能在这里看到明显的改善。

如果您正在使用 Illustrator，请尝试在 "Pixel Preview" 模式下以 100% 的比例查看您的作品。

我还建议不要使用小于 1 像素的笔划宽度。如果您想模拟更细的线条，请尝试降低不透明度。

<svg width="200" height="150" viewBox="0 0 200 150">
  <!-- (Original drawing) -->
  <rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
  <g fill="none" stroke="#fff" stroke-width="1.2">
    <rect x="20.1" y="20.1" width="160" height="110" rx="50" ry="50"/>
    <rect x="25.3071" y="25.3071" width="149.5857" height="99.5857" rx="44.7929" ry="44.7929"/>
    <rect x="30.5143" y="30.5143" width="139.1714" height="89.1714" rx="39.5857" ry="39.5857"/>
    <rect x="35.7215" y="35.7215" width="128.7571" height="78.7571" rx="34.3785" ry="34.3785"/>
    <rect x="40.9286" y="40.9286" width="118.3428" height="68.3428" rx="29.1714" ry="29.1714"/>
  </g>
  <text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(A)</text>
</svg>
<svg width="200" height="150" viewBox="0 0 200 150">
  <!-- (Lines snapped to integer coordinates) -->
  <rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
  <g fill="none" stroke="#fff" stroke-width="1.2">
    <rect x="20" y="20" width="160" height="110" rx="50" ry="50"/>
    <rect x="25" y="25" width="150" height="100" rx="45" ry="45"/>
    <rect x="30" y="30" width="140" height="90" rx="40" ry="40"/>
    <rect x="35" y="35" width="130" height="80" rx="35" ry="35"/>
    <rect x="40" y="40" width="120" height="70" rx="30" ry="30"/>
  </g>
  <text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(B)</text>
</svg>
<svg width="200" height="150" viewBox="0 0 200 150">
  <text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(A)</text>
  <!-- (Lines snapped to integer coordinates with 0.5px offset) -->
  <rect x="0" y="0" width="200" height="150" fill="#47f" stroke="none" />
  <g fill="none" stroke="#fff" stroke-width="1.2">
    <rect x="20.5" y="20.5" width="160" height="110" rx="50" ry="50"/>
    <rect x="25.5" y="25.5" width="150" height="100" rx="45" ry="45"/>
    <rect x="30.5" y="30.5" width="140" height="90" rx="40" ry="40"/>
    <rect x="35.5" y="35.5" width="130" height="80" rx="35" ry="35"/>
    <rect x="40.5" y="40.5" width="120" height="70" rx="30" ry="30"/>
  </g>
  <text x="100" y="80" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#fff">(C)</text>
</svg>

为什么我的 svg 看起来很糟糕？

Why do my svg look so bad?

svg

google-chrome

adobe-illustrator