J Knight J Knight - 3 months ago 4x
HTML Question

SVG image on mobile device isn't displaying properly

I have just added an SVG image to my personal website for the logo but when I view the image on my mobile device it's displaying, but in a different font. That's my problem. How do I fix this?

The way I am adding the SVG is as I would a normal image.

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

I have a feeling this is not the correct way to add SVG images, I also have no fallback for browsers that do not support SVG so if anyone could offer advice on how to do that, that would be great.



Displaying SVG images using <img> has quite good browser support nowadays: http://caniuse.com/#feat=svg-img so I personally would recommend it.

If you need to support very old browsers like IE8 or Android 2.3, I would use

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

to check for feature detection (source: https://css-tricks.com/test-support-svg-img/) and use a PNG file then (by replacing the src attribute of the <img>).

To include a custom font in a SVG, one can include it in the SVG's <def>:

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