Streaming live at 10am (PST)

SVG not rendered in Safari

Hi there

I am using many SVG images on my site, yet some of them do not appear on the published site or the editor on Safari (and iOS devices, I couldn’t check any Android devices yet).

The SVGs which do not appear include some SVG animation (within the SVG file), as well as mouse interaction animation (3D Parallax Desktop, specified in the Webflow editor).

Opening the URL of these SVGs directly, displays them perfectly fine in all browsers.

Did anyone else stumble over this issue? I couldn’t find similar topics. Help is much appreciated!

Thanks a lot

1 Like

It seems that Safari 13.1 does not render these SVGs within img tags.

Embedding the SVG with a HTML embed as <object type="image/svg+xml" data="some.svg"></object> did the trick.


Mine was doing the same thing, so I started messing with parts of the SVG code until I came to this conclusion. I had the SVG code written as <svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns=""></svg>

I guess Safari doesn’t respond to SVG code that has a width and height of auto. So I rewrote the code to fit responsively for my particular use as <svg width="2em" height="2em" viewBox="0 0 24 24" fill="none" xmlns=""></svg>

Now it renders perfectly.