SVG file only works in certain places - svg

Question

I have a very simple svg file, a book shelf, which I extracted from a public domain image in Inkscape.
My intention is to use an SVG Renderer within WinForms to produce bitmaps of variable widths from it.
It works fine within Inkscape but doesn't want to display in IE or Chrome or the DevExpress Svg renderer or a public domain SVG Viewer.
What should I change in the XML to make it work outside Inkscape?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg11134"
version="1.1"
viewBox="0 0 100 9.9999993"
height="10mm"
width="100mm">
<defs
id="defs11128">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath304">
<path
d="M 4410,3710 H 90 v -180 h 4320 z"
id="path302" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath320">
<path
d="M 360,3890 90,3710 h 4320 l -270,180 z"
id="path318" />
</clipPath>
<linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(-7.9e-6,180,180,7.9e-6,2250,3710)"
spreadMethod="pad"
id="linearGradient326">
<stop
style="stop-opacity:1;stop-color:#ebecea"
offset="0"
id="stop322" />
<stop
style="stop-opacity:1;stop-color:#d6d7d5"
offset="1"
id="stop324" />
</linearGradient>
</defs>
<g
transform="translate(13.396613,-100.26342)"
id="layer1">
<g
id="g9848"
transform="matrix(-0.62409419,0,0,0.93340311,-15.02437,93.369296)">
<g
transform="matrix(0.02909742,0,0,-0.02975968,4.8287909,123.15116)"
id="g9840">
<g
id="g9838"
>
<path
d="M 4410,3710 H 90 v -180 h 4320 v 180"
style="fill:#d6d7d5;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path9836" />
</g>
</g>
<g
transform="matrix(0.02909742,0,0,-0.02975968,4.8287909,123.15116)"
id="g9846">
<g
id="g9844"
>
<path
d="M 360,3890 90,3710 h 4320 l -270,180 H 360"
style="fill:url(#linearGradient326);fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path9842" />
</g>
</g>
</g>
</g>
</svg>

Answer 1

The grafics were outside the viewBox limits (outside the area displayed).
Inkscape tends to produce a lot of crud that makes maintaining and changing a SVG outside the visual editor almost impossible. The following is the same image reduced to the bare essentials, including some changes:
I have removed the width/height values for the SVG. Giving dimensions in real-live values (here: mm) is not helpfull in most cases. and you said you wanted to produce bitmaps of variable size anyway. This amounts to overwriting these values, so you can leave them off in the source file.
The grafic elements have been moved inside the viewBox and all transformations resolved.
The grafics would not have filled the full viewBox width. I have widened them to a 100:10 ratio.
If you want to change the height/width ratio, you can set an attribute preserveAspectRatio="none" on the <svg> element and the set arbitrary output dimensions in the export program. The grafics will then scale non-uniformly and always fill the viewport.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10">
<defs>
<linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="50" y1="5" x2="50" y2="0">
<stop offset="0" stop-color="#ebecea" />
<stop offset="1" stop-color="#d6d7d5" />
</linearGradient>
</defs>
<path d="M 100,5 V 10 H 0 V 5 Z" fill="#d6d7d5" />
<path d="M 100,5 L 95,0 H 5 L 0,5 Z" fill="url(#grad)" />
</svg>