J Knight J Knight - 4 months ago 8
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.

Thanks

Answer

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>:

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