我很难找到最好的方法来生成通过缩放来保持其质量的 SVG。图像的实际大小是在 Illustrator 中像素完美的中等大小。但是，一旦我将它保存为 SVG，最右边的垂直线就会变得模糊。我能做些什么来产生更好的质量/规模友好的 SVG？
小的
实际的
大
缩小 SVG 时的质量损失
平面设计
svg
调整大小
2022-01-12 20:39:46
4个回答
SVG 保持 100% 的源质量
SVG 图像的数据存储为 XML 而不是像素，并且由可以缩放到任何级别而不会丢失源质量的组件组成。
屏幕分辨率
随着图形在屏幕上变得越来越小，代表其来源的像素越来越少（仍然处于完美质量），导致图像看起来不那么清晰。
抗锯齿
大图像（左）和小图像（右）都经过抗锯齿处理（看到边缘使用的轻微、微妙的颜色了吗？）。
抗锯齿是一种用于渲染图像的技术，它会牺牲清晰度以避免难看的锯齿状边缘。这种用于保持边缘平滑的技术是最小图像质量差的原因。由于分辨率低，抗锯齿在这里更加明显，甚至在垂直边缘使用。
我怀疑这发生在抗锯齿过程中，要么是因为很难以不同的方式进行处理，要么是为了图像的一致性。如果对角线边缘因抗锯齿而略微模糊，而垂直边缘则没有，这将不是一个非常平衡的效果。
抗锯齿是网络图形中的无名英雄。这就是我们的屏幕上有清晰的文本和平滑的矢量形状的原因。实际上，当今的浏览器中使用了几种抗锯齿方法，这些方法在文本渲染方面最为明显。当算法用于抗锯齿开关时，它可能会导致意想不到的视觉结果。在本文中，我们将了解抗锯齿的方法，并了解如何绘制像素。
众所周知，我们所有的屏幕都是由像素组成的。它是一个巨大的块网格，每个块都包含红色、绿色和蓝色 (RGB) 分量。在远处，我们可以看到图像、文本和图标，但在近距离，我们实际上可以看到 RGB 组件的网格以及一切是如何组成的。
那么当我们绘制一个矢量形状并且它穿过一个像素的“部分”时会发生什么？假设我们正在绘制的形状是黑色的，背景是白色的。我们应该为那个像素着色吗？如果我们给它上色，它应该是什么颜色？黑色，灰色，还有什么？
解决方案
像素提示。正如新用户所链接的，像素提示正是您所需要的，也是您问题的正确答案。抗锯齿把每一个边缘都当做钉子，无拘无束地粉碎和平滑。除非你给提示！
它是如何完成的...
首先，打开包含您想要像素提示的矢量形状的文档。如果您使用矢量，则此技术非常有用，但如果您使用光栅形状，像素提示是可管理的 - 但仅适用于高级。所以现在让我们坚持使用矢量形状。
其次，尽可能放大，直到看到像素网格。如果你认为你已经放大到足够远，但仍然看不到像素网格，我建议你更改一些设置和偏好以将其打开。如果它打开并且您可以看到它，请选择您的矢量路径/形状。
第三，选择矢量路径上的点，并使用箭头键以分钟增量移动像素。有些应用程序要求您按住按钮，有些则不需要。只要您知道路径不只是向上移动一个像素 - 因为您希望它们最多移动半个像素。
第四，对矢量的其余点执行相同操作，直到缩小时一切看起来不那么模糊。完成后，您现在可以应用锐利的“像素完美”样式、渐变、阴影等，就像您通常使用矢量形状一样。
最后，如果您正在考虑使用这种技术加倍努力，请尝试在看起来“太”清晰的图标上轻推矢量点。有时，稍微模糊的曲线看起来比酥脆时看起来要好得多。
- The Industry 的来源文章，由 tareq-a 提供。
带有矢量形状的像素提示告诉渲染系统边缘的意图，因此抗锯齿知道是否摆动它的平滑锤！
正如其他人所指出的，当您的比例图像中的垂直线没有完全落在像素边界上时，模糊是由抗锯齿引起的。
您可以在 SVG 编辑器中手动更正此问题，方法是首先将图像缩放到所需大小，然后放大并手动调整线条，使它们恰好落在像素边界上。（如果您在 Inkscape 中执行此操作，我建议设置一个 0.5 像素的网格，在文档首选项中每隔一行强调一次。）
或者，您可能会发现PixelSnap Inkscape 插件很有用。它将这项工作的繁琐部分自动化，自动移动线条，使它们精确地落在像素边界上。虽然它并不总是能完美地完成工作，但通常让它完成它的工作然后清理任何次优结果比总是完全手动地进行像素提示要容易得多。
我认为@Jonathan Todd 给出了一个很好的理论解释和避免模糊的一般方法。我想补充一个关于如何在 Adobe Illustrator 中进行像素提示的练习视频，我在这篇文章中找到了。
我将描述这个视频的方法如下：
知道你想显示多大的图标。如果您希望它以 16px x 16px 显示，那么您最好制作相同大小的图标以获得最佳效果。请记住，您最好将自定义图标设计为您需要的确切大小。
使用 Adobe Illustrator 打开 SVG 图标文件并进行编辑。两个三角形都是 SVG 格式，但一个与虚拟网格有很好的对齐，当它在屏幕上显示时不会模糊。
要编辑它的模糊图标，您首先以像素为单位设置图像单位。我认为这在 Windows 和 Mac OS 上是不同的，所以你最好用谷歌搜索。
启用像素提示的设计。（在 mac 上为 + + 或alt在⌘Windows上为 + +）您可以 看到左三角形的水平和垂直边缘像素完美地对齐网格，而右三角形的水平边缘像素则不是。YaltctrlY
先改变宽度和高度，然后改变X和Y以消除小数部分。我建议您先编辑宽度和高度，然后修改 x 和 y 坐标。
更改十进制值
四舍五入（无小数）
- 瞧。保存您的图像以供使用！
也许这个链接将有助于解决你的问题， http ://theindustry.cc/2012/10/17/design-pixel-hinting/