生成的SVG图片比对应的PNG图片质量差，这是为什么？

Question

为了设置这个，我使用了svgwrite库来创建一个示例SVG图像（在长度为400的显示器上，随机位置有20个边长为100的正方形）。

import svgwrite
import random

random.seed(42)
dwg = svgwrite.Drawing('x.svg', size=(400,400))
dwg.add(dwg.rect(insert=(0,0), size=('100%', '100%'), fill='white')) # White background
for i in range(20):
    coordinates = (random.randint(0,399), random.randint(0,399))
    color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
    dwg.add(dwg.rect(coordinates, (100, 100),
        stroke='black',
        fill=svgwrite.rgb(*color),
        stroke_width=1)
    )
dwg.save()

我随后编写了一个示例pygame程序，生成了与该示例相同的PNG图像。 （使用种子生成了相同的正方形序列。）

import pygame
import random

random.seed(42)
display = pygame.display.set_mode((400,400))
display.fill((255,255,255)) # White background
for i in range(20):
    coordinates = (random.randint(0,399), random.randint(0,399))
    color = (random.randint(0,255), random.randint(0,255), random.randint(0,255))
    pygame.draw.rect(display, color, coordinates+(100,100), 0)
    pygame.draw.rect(display, (0,0,0), coordinates+(100,100), 1) #For black border

pygame.image.save(display, "x.png")

这些是我得到的图片（由于SVG无法上传到SO，因此我提供了截图。不过，上面的程序可以运行以输出相同的结果）。

我的问题是，为什么左边的PNG图像比相应的SVG图像更丰富和更清晰？相比之下，SVG看起来模糊而平淡。

编辑：可以注意到左上角前两个正方形之间的细白线。在SVG中不太清晰。

- Miraj50

---

尝试添加 shape-rendering="crispEdges"。 - Robert Longson

@RobertLongson 非常感谢您的帮助。是的，这使边缘更加清晰了！但颜色仍然有些不同。例如，请看第一个正方形下面的紫色正方形和底部的热粉色正方形。 - Miraj50

我也了解到，如果我将正方形的长度设置为99来制作SVG，则这种微小的白线差异就会消失。 - Miraj50

也许渲染器正在对其中一种输出进行伽马校正，而另一种则没有。 - Robert Longson

@sloth 你说得对。我只是在Ubuntu中使用默认的图像查看器。它确实会稍微“增强”一下颜色。 - Miraj50

Answer 1

我认为可能有两个因素会影响：

1. 您正在使用图像浏览器，这可能会扭曲矢量SVG图像。我认为所有矢量图像浏览器都会获取实际屏幕尺寸，然后将矢量图像导出到基于您拥有的屏幕尺寸的矩阵图像中。然后他们会显示矩阵图像。如果他们以柔和的清晰度呈现图像，或者如果他们在获取屏幕尺寸时遇到问题，则图像可能会模糊。

2. 要制作PNG图像，您使用pygame。 但是，您正在使用另一个模块来创建SVG图像。此模块可能有不同的功能，并且以与使用pygame导出它时不同的质量导出图像。

对于我个人而言，例如通过 Gimp 查看SVG图像时会出现模糊，但其他SVG查看器则不会。

因此，我认为问题出在您的图像浏览器上。

- D_00