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文件（通过替换src的{{1}}属性）。

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

<def>

Answer 2

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