如何在 Firefox 和 Internet Explorer 中使 SVG 更清晰

Posted 2023-03-06

【中文标题】如何在 Firefox 和 Internet Explorer 中使 SVG 更清晰

【英文标题】：How to make SVGs sharp in Firefox and Internet Explorer

【发布时间】：2016-06-05 10:01:43

【问题描述】：

当我使用<svg> 来显示图标时，它在 Google Chrome 中看起来非常清晰锐利。但是，当我在 Firefox 或 Internet Explorer 中打开 svg 时，图标看起来很模糊。

似乎那些浏览器将图标渲染为半像素。只有谷歌浏览器在这方面做得很好。

在所有浏览器中获得清晰 svg 图标的最佳方法是什么？ （我们想通过填充为图标着色：...所以使用背景图像或像素图形是没有选择的）

到目前为止我所做的尝试： 我已经应用了 CSS 属性 shape-rendering。但是这个太脆了，太前卫了。

<svg   version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg   version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>

<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
	<rect y="19" fill="#231F20"  ></rect>
	<rect y="3" fill="#231F20"  ></rect>
	<rect y="11" fill="#231F20"  ></rect>
</svg>
</i></button>


<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
	<rect y="19" fill="#231F20"  ></rect>
	<rect y="3" fill="#231F20"  ></rect>
	<rect y="11" fill="#231F20"  ></rect>
</svg>

【问题讨论】：

每个坐标加 0.5 cairographics.org/FAQ/#sharp_lines

您在问题中包含的 sn-p 与您的屏幕截图不匹配。

@PaulLeBeau：实际上我想通过这样做添加另一个示例。我现在在两个示例中都添加了两个图标 :)

@RobertLongson：这 0.5 个像素是要添加到 viewBox 上的（也可能是启用背景），对吧？当我尝试这个时，我注意到图标发生了变化......但它并没有变得更清晰。所有这些图标都是通过使用 illustrator 中的像素预览创建的，并且具有正确的尺寸，它们将被使用。所以图标本身非常清晰。谷歌浏览器以我创建它们的方式显示它们。但是，我不明白为什么 Firefox 和 Internet Explorer 会通过增加大小并使它们变得模糊来呈现它们......

@Rebecca 我相信罗伯特指的是半坐标问题，你可以在这里看到解释：***.com/questions/23376308/… 这是完全正常和预期的，但这真的只适用于用笔划宽度绘制的路径.您的图标是位于像素边界上的填充形状，并且不使用笔划。所以你的图标应该没问题。我不确定为什么 FF 会这样渲染你的路径。

【参考方案1】：

火狐破解：

svg 
 transform: translateZ(0);

IE 呢： 可能的原因当 svg 容器定位在 31.5 之类的坐标中（不完全在像素线上）时，IE 将以相同的方式在此容器中绘制 svg，有点偏离像素线。

【讨论】：

不客气）如果我完全理解为什么会这样。如果我了解它是如何工作的，我会澄清我的答案

也为我工作。正在拔头发，试图在 Firefox 上锐化我的 SVG。

看起来这个 hack 不再适用于最新版本的 Firefox。 9+ 旧错误，声称已“修复”但仍在发生。 bugzilla.mozilla.org/show_bug.cgi?id=608812

这个技巧对我不起作用，但它给了我一个想法，它奏效了。对于某些 svg 尺寸，例如 width: 24px 和 height: 24px，transform: translateX(0.5px) 修复了问题，而对于 width: 32px 和 height: 32px，transform: translateY(0.5px) 修复了模糊 svg...¯_(ツ)_/¯

【参考方案2】：

width 和 height 使用更大的值。

您目前所做的实际上是指定一个 24 x 16 像素的图像，并将其扩展为全屏尺寸。 SVG 应该是无限可扩展的，因此得名，但一些浏览器，比如一些电视，在像素插值方面比其他浏览器更好。