Embed SVG in SVG?

xml svg embedding
Marcin picture Marcin · Mar 27, 2011 · Viewed 85.9k times · Source

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

Phrogz picture Phrogz · Mar 27, 2011

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>

Related questions

Auto line-wrapping in SVG text

I would like to display a <text> in SVG what would auto-line-wrap to the container <rect> the same way as HTML text fills <div> elements. Is there a way to do it? I don't …

Read More
SVG rounded corner

I have the following SVG: I want to get a CSS-like border-top-right-radius and border-top-bottom-radius effect. How can I achieve that rounded corner effect?

Read More
SVG Scaling Text to fit container

This is likely a very simple question, but how do I get text in SVG to stretch to fit its container? I don't care if it looks ugly from being stretched too long or high, but it needs to fits …

Read More