CODEWITHSUNDEEP
htmlfirefoxsvgsvg-filters
cuuupid
cuuupid

Reputation: 1002

SVG is fully invisible in Firefox

Before this gets marked as a duplicate: we've already ensured the width and height are properly set. I'm phrasing it as invisible because although it takes up the correct space and is even loaded in with the correct dimensions on the image, the content of the image is empty in the website, network tab, and when viewing the SVG directly. Basically, the actual SVG is showing up invisible regardless of how we display it or view it.

We have an SVG we'd like to show on our site. It works perfectly in Chrome, Edge etc but not in Safari and Firefox. We originally thought it was an issue with how we were loading it, but going to the SVG file itself (i.e. ://xxx/image.svg) shows it as perfectly invisible. Moreover, it's being loaded in with the correct size and all, just with no actual content.

The other SVGs we're using all work, even though they're all from the same artboards, and exported the same way from Illustrator. Since it's exported from Illustrator it's hard for me to even read it let alone debug it for errors; I'd prefer not to change the SVG directly in case it needs to be modified in the future.

I'm wondering if there are any known issues that could cause an SVG to be invisible even when viewing it by itself.

SVG in question

Upvotes: 1

Views: 693

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

There is a BackgroundImage input to the feGaussianBlur primitive in the filter0_b. I think this supposed to be BackgroundImageFix - which is defined in the previous primitive.

BackgroundImage is a special input which is not supported in any major browser. When Firefox encounters an invalid input like this, it won't display the filtered image. Chrome will usually ignore errors and carry on.

Safari is probably a different problem - filters can only be referenced after they've been defined (it's a bug) - so if you move that defs section directly beneath the SVG, it should work in Safari.

Upvotes: 2

Related Questions