Firefox 无法正确显示 SVG img

Question

在桌面版 Firefox（56.0 版）中，SVG 图像显示不正确。 例如，对于 Twitter 徽标的以下 SVG 图像，它显示的内容甚至与 twitter 徽标不相近。相同的 SVG 图像在其他浏览器（IE11、Edge、Chrome 等）中正常显示。这是 Firefox 中的错误吗？还是有一种解决方法可以使它起作用？ （附件中工作和不工作页面的两个屏幕截图）

<img  style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1%2Cc-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5%2Cc-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1%2Cc0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7%2Cc0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E" />

Working SVG in Chrome

Not-working SVG in Firefox

Answer 1

您的路径无效。逗号只能在数字之间使用，因此 -2.1,c 无效，UA 应该停止解析。 Firefox 是正确的，其他 UA 不符合 SVG 规范。

如果您将数据 URL 解码为文件并直接查看该文件，您会在 Firefox 控制台中看到记录的错误。

删除无效的逗号可以解决问题。如果此 SVG 是由某个工具生成的，您应该修复该工具。

<img  style="width:640px; height:640px;" src="data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%2355ACEE%22%20d%3D%22M32%2C6.4c-1.2%2C0.5-2.4%2C0.9-3.8%2C1c1.4-0.8%2C2.4-2.1%2C2.9-3.6c-1.3%2C0.8-2.7%2C1.3-4.2%2C1.6c-1.2-1.3-2.9-2.1-4.8-2.1c-3.6%2C0-6.6%2C2.9-6.6%2C6.6c0%2C0.5%2C0.1%2C1%2C0.2%2C1.5C10.3%2C11.1%2C5.5%2C8.5%2C2.2%2C4.5c-0.6%2C1-0.9%2C2.1-0.9%2C3.3c0%2C2.3%2C1.2%2C4.3%2C2.9%2C5.5c-1.1%2C0-2.1-0.3-3-0.8c0%2C0%2C0%2C0.1%2C0%2C0.1c0%2C3.2%2C2.3%2C5.8%2C5.3%2C6.4c-0.6%2C0.1-1.1%2C0.2-1.7%2C0.2c-0.4%2C0-0.8%2C0-1.2-0.1c0.8%2C2.6%2C3.3%2C4.5%2C6.1%2C4.6c-2.2%2C1.8-5.1%2C2.8-8.2%2C2.8c-0.5%2C0-1.1%2C0-1.6-0.1c2.9%2C1.9%2C6.4%2C2.9%2C10.1%2C2.9c12.1%2C0%2C18.7-10%2C18.7-18.7c0-0.3%2C0-0.6%2C0-0.8C30%2C8.9%2C31.1%2C7.7%2C32%2C6.4z%22%2F%3E%3C%2Fsvg%3E">