移动设备上的 SVG 图像显示不正确

Question

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

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

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

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

谢谢

Answer 1

使用 <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>

Answer 2

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

移动设备上的 SVG 图像显示不正确

SVG image on mobile device isn't displaying properly

html

mobile

svg

responsive