How do I superimpose one SVG image onto another us

Question

I have 2 SVG files I need to overlay using Batik. One file serve as the background image and is 308px by 308px while the second file (260px by 260px) is the foreground image that must be centered (that is at the center of the background image). I'd like the result of the operation to be saved in a third SVG file. If you are familiar with Batik, I'd appreciate your suggestions.

Thanks,

Olivier.

Answer 1

If you don't need to include the contents of the background and foreground documents in the final one, you can use simply reference them:

<svg xmlns='http://www.w3.org/2000/svg'
     xmlns:xlink='http://www.w3.org/1999/xlink'
     width='308' height='308' viewBox='0 0 308 308'>
  <image xlink:href='background.svg' width='308' height='308'/>
  <image xlink:href='foreground.svg' x='24' y='24' width='260' height='260'/>
</svg>

It should be simple to construct this document using the DOM. See here for an example of using the DOM APIs to construct a document.

If you need to merge the two documents into one, then you could:

• let a = the Document resulting from parsing background.svg
• let b = the Document resulting from parsing foreground.svg
• let e = a.importNode(b.getDocumentElement(), true)
• set the x and y attributes of e to "24"
• call a.getDocumentElement().appendChild(e)

Now a is a document with the foreground contents merged in.