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

Question

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

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

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

发生了什么事？

Answer 1

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

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

• 在（A）中，矩形坐标根本不与像素网格对齐。结果，一些线条清晰锐利，而另一些线​​条模糊，有点暗。

• 在（B）中，矩形坐标被捕捉到整数值，使它们具有统一的外观。但是，它们现在看起来都很模糊，因为抗锯齿将每条线展开为两个像素的宽度。

• 在（C）中，在x和y方向上给定0.5像素的附加偏移量时，坐标被捕捉到整数值和。你应该能够在这里看到明显的改进。

如果您在Illustrator中工作，请尝试在“像素预览”中以100％的价格观看您的作品。模式。

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你的＆＃34;坏＆＃34;例如，SVG已减少到大约一半的大小。这意味着你的＆＃34;好的＆＃34;中的一些约1像素厚的线条。例子现在只有约0.5像素厚。这并没有给SVG渲染器中的抗锯齿例程提供很多帮助。尝试使笔划宽度更粗。

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