Any ideas why patterned SVG file is showing up blank in the browser?
Solution 1
If you find that it works in Firefox, IE or Edge but not Chrome, this was my issue too.
I fixed it by opening the .SVG file in a text editor, and everywhere I saw this tag:
xlink:href="data:img/png;base64
I replaced it with
xlink:href="data:image/png;base64
This fixed it, and it displayed immediately. Hopefully this helps someone!!
Solution 2
Browsers have varying levels of SVG support, so your browser may just not support patterns.
If it's part of a website, I'd just export it as a PNG, as a vector image as big as this would bog down visitors' computers anyway.
Solution 3
Hope you got this sorted, but for anyone else having this issue: Check the saving as .svg settings within Illustrator.
The standard settings gave me a blank .svg, but when I messed with the settings (Font type: SVG, CSS Properties: Style Attribute, Output fewer elements unchecked, Include XMP checked) it worked fine.
On a side note, using .svg is fine on a website, as long as you have a fallback for browsers that don't support them. I believe modernizr (http://modernizr.com/) covers setting that up.
theNewman
Updated on June 05, 2022Comments
-
theNewman almost 2 years
I have an svg file that I created in Illustrator that consists of a pattern - it was made using the swatch tool. When I try and load it locally it shows up blank in the browser.
Here is the file if you want to test it: http://d.pr/ZvhV
-
theNewman about 12 yearsHi Chris, unfortunately it has to be an svg file because I am using it with a color picker. All the other svg files I have saved seem to open fine in Chrome/Safari. It just seems to be this one.
-
Spangle over 4 yearsSolved the problem for me. Thanks
-
Maarten van Middelaar almost 4 yearsI exported from Adobe Photoshop to svg instead of png to reduce filesize by 200kb. After finding over 200kb of strands of hair on my desktop/keyboard trying to figure out why it was not showing in the html page, but it was when opening the direct url to svg in a browser tab, i'm happy to have found this post. Thanks a lot!