SVG not rendered in Safari

Design help General
1

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
2

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.

3 Likes
3

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="http://www.w3.org/2000/svg"></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="http://www.w3.org/2000/svg"></svg>

Now it renders perfectly.

2 Likes
4

Hello at Slituo we found this working on Safari with paths:

Note that adding “width, height” in SVG and "fill-rule=“evenodd” clip-rule=“evenodd” in Path
With “Stroke” in Path that not worked.

<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 7.75H18.1C18.5 7.27 18.75 6.67 18.75 6C18.75 4.48 17.52 3.25 16 3.25C14.32 3.25 12.84 4.14 12 5.46C11.16 4.14 9.68 3.25 8 3.25C6.48 3.25 5.25 4.48 5.25 6C5.25 6.67 5.5 7.27 5.9 7.75H4.5C3.81 7.75 3.25 8.31 3.25 9V11.5C3.25 12.1 3.68 12.58 4.25 12.7V19.5C4.25 20.19 4.81 20.75 5.5 20.75H18.5C19.19 20.75 19.75 20.19 19.75 19.5V12.7C20.32 12.58 20.75 12.1 20.75 11.5V9C20.75 8.31 20.19 7.75 19.5 7.75ZM19.25 11.25H12.75V9.25H19.25V11.25ZM16 4.75C16.69 4.75 17.25 5.31 17.25 6C17.25 6.69 16.69 7.25 16 7.25H12.84C13.18 5.82 14.47 4.75 16 4.75ZM8 4.75C9.53 4.75 10.82 5.82 11.16 7.25H8C7.31 7.25 6.75 6.69 6.75 6C6.75 5.31 7.31 4.75 8 4.75ZM4.75 9.25H11.25V11.25H4.75V9.25ZM5.75 12.75H11.25V19.25H5.75V12.75ZM18.25 19.25H12.75V12.75H18.25V19.25Z" fill="currentColor"/></svg>

CleanShot 2023-10-26 at 12.31.59@2x

Note that I used “currentColor” for inheriting the current div color that allow me to use color editor