Any ideas why patterned SVG file is showing up blank in the browser?

怎甘沉沦 提交于 2020-01-11 14:19:31

问题


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


回答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!!




回答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.




回答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.



来源:https://stackoverflow.com/questions/9382989/any-ideas-why-patterned-svg-file-is-showing-up-blank-in-the-browser

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!