SVG not rendering under MacOS/iOS

My SVG logo displays fine in Chrome, but fails over to text in Safari. Is there there something simple I’m missing?


Here is my site Read-Only: https://preview.webflow.com/preview/partner-with-nature?utm_source=partner-with-nature&preview=f2c429fef4e258b56fde3f55b6998987
(how to share your site Read-Only link)

Can you share a published link?

1 Like

Sure! https://partner-with-nature.webflow.io/

The logo looks like this (below) on both safari and chrome on OS X.

CloudApp

When viewing just the hosted SVG, it was the same.

I see it was created in sketch. I downloaded it, then imported it into sketch and the text was now complete. I then exported it and loaded it into chrome and the display issue was gone. I uploaded the SVG to a webflow project and it is displaying correctly. Save the SVG again from sketch and upload it. Or you can use this one…

https://svg-test-d05f70.webflow.io/

Let me know if this resolved your issue.

1 Like

@webdev Thank you for looking at this. The logo is supposed to look like this:

I’m not sure why it renders as what I call the “fallback font”. Maybe I’ll just use a png, although I would like to understand what’s happening with the svg file.

You should convert a font logo to an outline before exporting it as an SVG. If the user does not have the font, that causes the fallback.

1 Like