Hi All, I’m experiencing odd behaviour with an SVG logo in the navbar of a Webflow development site. Using Chrome in the Designer, the SVG does not display until I select the image in the Assets panel and load its URL in a new tab. This seems to force the SVG to display in the Designer and all is fine until I close the Designer.
Once published to the test site, the SVG won’t display in Chrome on desktop or mobile. It works fine on Microsoft Edge; I haven’t tested it on any other browsers.
The SVG was produced in Adobe Illustrator and altered in Photoshop to improve the transparency of the background.
The site is under a confidentiality agreement so cannot be loaded to the forum.
Update to this: Firefox displays SVG without issues. Seems to be a Chrome bug but I struggle to believe there s no solution, otherwise why would the awesome Webflow team recommend SVGs? Perhaps there’s a custom code solution?
I assume you’re using Generator to export the SVG file from Photoshop then. I don’t really get how the transparency can be improved from what AI exports. In any case you won’t get a better SVG with anything else than AI. I suspect Generator export is at fault. For instance, some of Generator’s SVGs don’t render in Affinity Designer, which has a pretty clean importer.
Because SVG is a neat file format and it’s very well supported. However it’s never exported/generated the same. All apps do it differently. I’m not trusting any app but AI for SVG export. Sketch can have grid shift issues, Photoshop… isn’t meant for that, at all, Xd export is such a joke. Affinity Designer has a great export quality but I don’t use it.
Thanks Vincent, I’ll try a clean export from AI. Will delighted if it solves the problem. Lots of stuff in GitHub on the topic, mostly suggesting the same as you - inconsistency of the various software export modules.
I’ve been using SVG lately alot too, like Vincent suggested, I always edit my SVG in AI then export them.
What I also often do, is open my SVG file in a text editor to clean it up a bit and make sure it has the following properties set in addition to what AI exported. Maybe your SVG is more complex than mine though.
