How to make SVG file paths relative to file, and not root

by

I have some complex SVG’s images being generated by a program I wrote. Periodically I will update these.

I then put these together into a diagram.svg. The diagram is actually relatively simple and simply pulls several image together, adds some legends and text etc. The diagram links to the images in the SVG using relative paths. There are image blocks that look like .. ex:

        <image
         preserveAspectRatio="none"
         inkscape:svg-dpi="96"
         width="127"
         height="225.425"
         xlink:href="../year3.svg"
         id="image1147741"
         x="252.79448"
         y="22.960333" />

This works great, as the diagram file is simple. I can update the underlying images and the diagram will immediately “update” and look correct.

Now I want to embed this diagram.svg into a poster.svg elsewhere on disk. As you can guess, I’d like to now update diagram.svg (ex: add and tweak legends) and have it correctly update in the poster.svg

This is where I start to have issues. When in poster.svg I make a link using xlink:href= to point to diagram.svg, all those relative image links from before that I’ve wrapped up inside diagram.svg become relative to the poster.svg directory. They’re no longer relative to the diagram.svg. So all the links in the diagram.svg break and it stops displaying correctly.

Do I have some way around this? Is there some way to embed an external svg while forcing it to keep use its relative-paths relative to its own location?

You need a ‘viewBox’-attribute. Try adding viewBox=”0 0 1146 1146″ to the -element. You may also want to look into the ‘preserveAspectRatio’-attribute.

Leave a Comment