Html 为什么这个SVG如此模糊？

我的SVG有问题：

TestTest

您看到SVG模糊/像素化了吗

---

有没有办法解决这个问题？

您应该将svg文件分为两个不同的路径。。。主标志在一条路径中，标语在另一条路径中。然后，可以将形状渲染选项分别应用于每个路径。如果你把：

shape-rendering="crispEdges"

在标记行上，它将使用较少的抗锯齿，使小像素不会模糊。您可以研究所有形状渲染选项，并决定svg是否适用于此场景

---

如果您希望在SVG中以如此小的尺寸显示文本，最好的解决方案是调整字形形状，以便更好地适应像素边界

下图显示了我的意思。在我的编辑器中，我打开了一个148x45的网格以匹配输出大小。然后我调整了角色形状，使它们更好地位于像素边界内。黑色形状是原始路径形状，灰色是经过调整的版本。我寻找跨越像素边界的部分轮廓，并调整它们，使它们不再这样做。您需要特别关注glyph的垂直和水平茎

在下图中，“D”的右侧沿网格线向下延伸。我把那个部分向右移动了一点，所以它完全在下一列像素中。我本可以把那部分移到左边，但我不想让角色看起来太窄。在“N”的情况下，我只是向左移动了一小部分

在下面更新的示例中，第二个SVG是我的修改版本，其中我调整了第一个“D”、“N”和“F”以显示改进。我将把其余的调整留给你

body{background:#000}

TestTest


TestTest

SVG不是问题所在；这是你的显示设备。@chepner我用的是4K显示器，看起来不对：/n你是说品牌名称下面的索赔线吗？好吧，这是如此之小的开始，它可以简单地替换为一个坚实的白线，而不会失去易读性…@CBroe是的，我说的是品牌名称下面的索赔线。但是如果我使用PNG，它并不模糊，它与SVG有关。PNG是如何生成的？你能把它加起来比较一下吗？部分问题在于SVG只是一个规范；外观与使用的特定SVG渲染器和代码有着同样多的关系。它看起来更好，但有可能只用一个普通文本来做这个小“口号”吗？因为我刚试过，看起来好多了，但我不知道怎么做才对。你知道如何用普通文本而不是SVG来制作标语吗？

shape-rendering="crispEdges"