为什么我的svg看起来这么糟糕? [英] Why do my svg look so bad?
问题描述
我的svg在Google Chrome和Firefox中看起来也很糟糕，Svg边框的质量很差:
My svg looks very bad in Google Chrome and Firefox too, the Svg borders have poor quality:
同时，在Illustrator中，svg看起来很棒:
Meanwhile, in Illustrator the svg looks awesome:
我已经使用以下配置保存了.svg文件:
I have saved the .svg file with this configuration:
发生了什么事?
推荐答案
如果SVG具有很多水平和/或垂直线，则可以通过将坐标与像素网格对齐来改善其外观.我给你举个例子:
If your SVG has a lot of horizontal and/or vertical lines, you can improve its appearance by aligning the coordinates to the pixel grid. I'll give you an example:
这是三个由圆角矩形组成的SVG图像. (这些图片的源代码粘贴在下面.)
Here are three SVG images made of rounded rectangles. (The source code for these images is pasted below.)
-
在(A)中，矩形坐标根本不与像素网格对齐.结果，其中一些线条清晰锐利，而另一些则模糊且有点暗.
In (A), the rectangle coordinates aren't aligned to the pixel grid at all. As a result, some of the lines are clear and sharp while others are fuzzy and a bit darker.
在(B)中，矩形坐标被捕捉为整数值，从而使它们具有统一的外观.但是，它们现在都显得模糊了，因为抗锯齿将每条线分布在两个像素的宽度上.
In (B), the rectangle coordinates are snapped to integer values, giving them a uniform appearance. However, they all look fuzzy now, because the antialiasing spreads each line across a width of two pixels.
在(C)中，将坐标捕捉到整数值和，并在x和y方向上附加0.5个像素的偏移量.您应该可以在这里看到明显的进步.
In (C), the coordinates are snapped to integer values and given an additional offset of 0.5 pixels in the x and y directions. You should be able to see a definite improvement here.
如果您使用的是Illustrator，请尝试在像素预览"模式下以100％的比例查看作品.
If you're working in Illustrator, try viewing your artwork at 100% in "Pixel Preview" mode.
我也建议不要使用小于1像素的笔触宽度.如果要模拟更细的线条，请尝试降低不透明度.
I would also recommend not using stroke widths smaller than 1 pixel. If you want to simulate thinner lines, try reducing the opacity instead.
<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看起来这么糟糕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
