如何禁用SVGZ内部图像的自动平滑以保留像素化效果？

我太懂你这种授课时的尴尬了——精心设计的像素化效果是展示数据生成过程的核心，结果Chrome一搞平滑，直接把关键演示点给弄没了！别慌，咱们来搞定它：

核心思路：强制Chrome使用像素化渲染模式 #

Chrome默认会对缩放的图像进行平滑优化，咱们需要通过CSS/SVG属性明确告诉它：“就保持像素颗粒感，别瞎处理！”

方案1：修改SVGZ内部的元素 #

因为SVGZ是压缩后的SVG，你需要先解压再修改，步骤如下：

1. 用gzip解压SVGZ文件：

   gzip -d your-image.svgz
   

2. 打开解压后的SVG文件，找到嵌入的<image>标签，给它添加样式属性：

   <image xlink:href="your-embedded.png" width="XXX" height="XXX"
          style="image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges;" />
   

   • pixelated是W3C标准属性，让浏览器放大时严格保留像素方块感
   • crisp-edges/-moz-crisp-edges是兼容旧版浏览器的 fallback，确保Firefox也能稳定工作（虽然你说Firefox已经没问题，但加上更保险）
3. 修改完成后重新压缩成SVGZ：

   gzip -c your-image.svg > your-image.svgz
   

方案2：在HTML层面全局设置（不用修改SVGZ） #

如果不想折腾解压压缩，直接在引用SVGZ的HTML页面里加CSS：

svg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

这个样式会强制所有页面内的SVG元素（包括SVGZ）使用像素化渲染，一步到位解决问题。

为什么Firefox正常？ #

Firefox默认会更严格遵循SVG内的渲染设置，或者你在Inkscape导出时已经隐含了相关属性，但Chrome的默认优化逻辑会优先平滑缩放，所以必须显式声明渲染规则。

放心，这两种方法都能让Chrome完美还原你在Inkscape里设计的像素化效果，授课演示再也不会出问题啦！

内容的提问来源于stack exchange，提问作者Adam Smith