Including images in SVG

[tsdineen]

I have a svg document, that includes png images as part of the background and graph. Most of this is working, but it would appear display is getting confused on where to put the graph images. Below is the svg test doc. As you can see by the code, there should be 5 png images roughly in the center which are ordered largest to smallest from the left, even though the code doesn't reference largest to smallest. Adobe's SVG viewer shows this correctly, but the latest ImageMagick places the first graph image on the left border, then puts the other 4 in the center. The order for those are also, not correct.

The order should be graph1, graph3, graph2, graph4, graph5; but is should up as graph1, graph3, graph4, graph2, graph5. I have the images ready to send if you need those as well. Nothing special, just some background image and basically 5 rectangles of varied size.

[edit]
I forgot to mention that display also, parses the svg and assumes the images are relative to cwd not location of the svg. Calling `display ./data/svg/test3.svg` only displays correctly if the png images are in ./.
[/edit]

Code: Select all

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1056 816">

<g id="Page1" clip-path="url(#clipBox)">
<rect x="0" y="0" width="1056" height="816" style="fill: #FFFFFF; stroke: #FFFFFF; fill-rule: evenodd; "/>

<defs>
<image id="Image1" width="1055" height="815" xlink:href="bkgrnd.png"></image>
</defs>
<use x="0" y="0" xlink:href="#Image1" />

<defs>
<image id="Image2" width="24" height="457" xlink:href="graph1.png"></image>
</defs>
<use x="519" y="312" xlink:href="#Image2" />

<defs>
<image id="Image3" width="24" height="362" xlink:href="graph2.png"></image>
</defs>
<use x="579" y="312" xlink:href="#Image3" />

<defs>
<image id="Image4" width="24" height="376" xlink:href="graph3.png"></image>
</defs>
<use x="549" y="312" xlink:href="#Image4" />

<defs>
<image id="Image5" width="24" height="327" xlink:href="graph4.png"></image>
</defs>
<use x="609" y="312" xlink:href="#Image5" />

<defs>
<image id="Image6" width="24" height="255" xlink:href="graph5.png"></image>
</defs>
<use x="639" y="312" xlink:href="#Image6" />

</g>

<defs>
<clipPath id="clipBox"><rect x="0" y="0" width="1056" height="816"/></clipPath>
</defs>

</svg>