移动设备上的 SVG 图像无法正确显示答案

【问题标题】：SVG image on mobile device isn't displaying properly移动设备上的 SVG 图像无法正确显示
【发布时间】：2016-11-11 03:15:51
【问题描述】：

我刚刚在我的个人网站上添加了一个 SVG 图像作为徽标，但是当我在移动设备上查看图像时，它正在显示，但字体不同。那是我的问题。我该如何解决这个问题？

我添加 SVG 的方式与添加普通图像的方式相同。

<img src="images/logo.svg">

我觉得这不是添加 SVG 图像的正确方法，对于不支持 SVG 的浏览器，我也没有后备方案，所以如果有人能就如何做到这一点提供建议，那就太好了。

谢谢

【问题讨论】：

您可以随时截取 SVG 的屏幕截图并在绘图编辑器中对其进行编辑以使其成为 PNG
是的，但我更愿意为视网膜显示器保留 SVG，并为不支持 SVG 图像的浏览器/设备创建后备方案。我只是不知道该怎么做。
请参阅this post，它会检查 SVG 功能。如果 JavaScript 不支持 SVG，您可以调整 JavaScript 以更改它尝试显示的图像

标签： html mobile svg responsive

【解决方案1】：

如果您从 Ilustrator（例如）创建 .svg，首先，确保从您的文本对象创建轮廓，然后将对象导出到 .svg 文件，该文件将从任何（现代）浏览器中读取。

【讨论】：

【解决方案2】：

现在使用<img> 显示 SVG 图像具有很好的浏览器支持：http://caniuse.com/#feat=svg-img 所以我个人会推荐它。

如果您需要支持非常旧的浏览器，例如 IE8 或 Android 2.3，我会使用

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

检查特征检测（来源：https://css-tricks.com/test-support-svg-img/）然后使用 PNG 文件（通过替换 <img> 的 src 属性）。

要在 SVG 中包含自定义字体，可以将其包含在 SVG 的 <def>：

<defs>
  <style type="text/css">
    @font-face {
      font-family: 'Gunny Rewritten';
      src: url('GunnyRewritten.woff');
    }
  </style>
</defs>

【讨论】：

您对这个问题还有疑问吗？如果没有，请毫不犹豫地接受它。 :-)
对不起，我周末出去了。我还在努力解决这个问题，是的。我想知道问题是否在于我使用的是浏览器不支持的字体；这是“Gunny Rewritten”。它也不在谷歌字体上，所以我不能将它嵌入到 SVG 代码中。正如我所说，SVG 使用任何桌面浏览器都能正确显示，只是当我在 iPhone 6 或 Safari 上使用 google 时。
如果字体非标准或嵌入，浏览器无法显示。如果您的本地系统安装了字体，它可能会显示，但在其他地方没有。如果你有字体的有效许可证，你应该嵌入它。
如何嵌入字体？我宁愿不改变你看到的字体。
带css。在 svg 的 <defs> 中的 <style> 标签中定义字体资源：<defs> <style type="text/css"> @font-face { font-family: 'Gunny Rewritten'; src: url('GunnyRewritten.woff'); } </style> </defs>