Troubleshooting Checklist: SVG Image Not Displaying
This is just a draft kick-off version.
In the mean time comments are very welcome, so i can improve it myself (haven't figured out markup on this blog either).
I have seen many, many different reasons for an SVG file not to result in an image.
Some happen often, some rarely. Let's try to make a rather complete list:
- viewer not perfect. As with any data format, the interpreter is not perfect. Over the years HTML support has become pretty darn good; SVG is getting there. http://www.codedread.com/svg-support.php has a measure for how good the different viewers are. At http://browsershots.org/ you can try out any (static) page/image on many different browsers. Or just use the best release of the moment: Opera.
- declare the namespace(s)
The start tag of the SVG document should have the SVG namespace declaration in it. So instead of
<svg>
it should be
<svg xmlns="http://www.w3.org/2000/svg">
And when you use one of the things from the Xlink namespace (in other words, you're using <a xlink:href="http://...">...</a> links), you need to also declare the xlink namespace:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- Maybe the SVG is not really SVG. Not conforming to the SVG specification, also known as invalid. Next to strict viewers as for example Batik, i advise the W3C validator to check. Remember though that the validator is good, but not perfect. For example it doesn't like perfectly valid foreign namespace content, as for example 'embedded' application round-trip information, like in Inkscape SVG.
- Maybe the .svgz file is not really SVGZ. An SVGZ file should be a gzipped SVG file. Many so-called zipping applications, WinZip is an example, have a different than gzip method as their default. Some people even think that renaming .svg to .svgz automatically turns the SVG content into SVGZ, which is of course wrong.
- It's rendered off-screen or too small to result in visible pixels. change viewBox and preserveAspectRatio
- Things can have the same color as the background. Or (fill/stroke) colors are not set.
- Maybe the SVG file doesn't have any graphical elements in it at all. Maybe a script was meant to add them later. If the script is broken, nothing will happen. jslint, FireBug (Firefox) and Dragonfly (Opera) can help you figure out the script.
- Try http://web-sniffer.net to see if the server sends it as the right Content-Type (also known as MIME-type). It should be "image/svg+xml"
Your server can also be ill-configured such that it compresses all .svgz files a second time. A symptom of this problem is that your .svgz files will be served with the header: Content-encoding: gzip, gzip
Sometimes not showing an SVG image is the result of the HTML that is using it, or mixing it in. As there are a few different ways of doing this, each with multiple ways of doing it wrong, i won't at this moment go into them.
As tools are getting better, you won't run into those bugs that often anymore. But at least you know what to do when it happens.
PS: If some application generated your broken SVG content, make sure to report it, so the cause can be fixed.
- stelt's blog
- Login or register to post comments
Comments
#1 More when the wiki starts: "SVG is everywhere" links collection
After years of trying to make the startpagina.nl people improve their system (valid (X)HTML and general bug-fixing) without much luck, i've decided my svg.startpagina.nl will soon be generated from a then primary link list at the planet SVG Wiki. My take on the list will as always be to show "SVG is everywhere", to shut up those saying the opposite, and as a general SVG link resource
#2 Remember though that the
Remember though that the validator is good, but not perfect. For example it doesn't like perfectly valid foreign namespace content, as travesti for example 'embedded' application round-trip information, like in Inkscape SVG.