停止 SVGZ 内的自动图像平滑

Question

我在 HTML 页面上使用 SVGZ 图像来调整大小。这些 SVGZ 图像包含以我想要保留的特定方式放大的 PNG，像素化等等。 Firefox 正确显示它（我在 Inkscape 中设计的方式）：

而 Chrome 是 "helpfully" 自动平滑一切：

我正在教授一门课程，我试图展示图像数据是如何通过连续传递创建的。我想要像素化，因为这就是数据。事实上，SVGZ 中的 PNG 包含属性 style="image-rendering:optimizeSpeed"。我希望 Chrome 能认识到这一点并尊重它。

（请注意，我已经尝试过 CSS image-rendering: pixelated; 技巧。我确信如果我直接显示 PNG 效果会非常好，但这不是我想要的做。）

Answer 1

我在 Chrome 工作：

<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px"/>
</svg>


<svg width="100" height="100">
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWP4z8DwHwyBNJDN8B8AQNEG+t5Ik2kAAAAASUVORK5CYII=" width="100px" height="100px" style="image-rendering: pixelated"/>
</svg>

Answer 2

我找到了一个基于 Paul 上述内容的答案。

看起来在 Chrome 中执行此操作的方法是确保 SVG/SVGZ 中的 PNG 具有属性 style="image-rendering: pixelated"，这是有道理的。然而，

这不适用于 Firefox。
这不是 Inkscape 中的一个选项，因此如果您需要它，您必须手动编辑 SVG 代码。

Firefox 和 Inkscape 似乎都更喜欢 style="image-rendering: optimizeSpeed"。所以我最终将 both 添加到我的 SVGZ 文件中：style="image-rendering:optimizeSpeed;image-rendering:pixelated"。这似乎让两个浏览器都满意，尽管它再次意味着手动修改图像文件的 SVG 代码，因为 Inkscape 不允许您直接这样做。

如果可以的话，我将添加一个 Inkscape 标签，因为这似乎涉及该程序。

停止 SVGZ 内的自动图像平滑

Stop auto image smoothing inside an SVGZ

html

css

svg

inkscape

smoothing