Question

I have an SVG document, and I would like to include an external svg image within it, i.e. something like:

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

(“object” is just an example – the outer document will be SVG rather than xhtml).

Any ideas? Is this even possible? Or is the best thing for me to simply slap the logo.svg xml into my outer SVG document?

Answer 1

Use the image element and reference your SVG file. For fun, save the following as recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>