SVG logo appears serifed, looks different across browsers

Table of contents

Logo of mustcode.xyz was made by me in Adobe Illustrator. I exported it in .svg format to benefit from :

  • No resolution limitations, no quality loss ;
  • SVG’s small file size ;
  • page speed considerations ;

So what could possibly go wrong ?

Issue: SVG logo is rendered incorrectly

Logo's serifed appearance in Tor Browser
Logo’s serifed appearance in Tor Browser

As i work mostly with Google Chrome i couldn’t spot the issue at first. But then when i checked my website via Tor Browser i noticed that my logo looks serifed, way different than it’s appearance in Chrome.

Logo made of text, not converted to paths
Logo made of text, not converted to paths

Solution: Create outlines, convert text to paths

Mustcode.xyz’s logo is pretty simple, it’s all just text typed from keyboard in combination with slash and brackets. So there are no paths yet.

Bellow is the way to solve it via Adobe Illustrator :

Ctrl + A to select all the layers of your svg
1) Ctrl + A to select all the layers of your svg
SVG logo appears serifed, looks different across browsers
2) Go to Type and select Create Outlines or just use the key combination : Shift + Ctrl + O
text converted to paths
This will convert text to path

Don’t forget to Save the .ai project and to export your fixed svg logo.

Leave a Reply