16

I'd like to take one small SVG file (created with Inkscape), and embed or link it into another (bigger) one. When displayed by a browser I hope to see the smaller one show up inside some placeholder of the bigger one.

Is it possible?

2 Answers 2

8

Prefer <use> to <image> as the later is rendered at a fixed resolution and doesn't scale as regular vector objects do in the current document. http://www.w3.org/TR/SVG11/struct.html#ImageElement

But the element <use> cannot reference entire SVG files, its xlink:href attribute is a reference to an element/fragment within an SVG document (http://www.w3.org/TR/SVG11/struct.html#UseElement). The 'use' element can reference any local or non-local resource.

example:

MyLibrary.svg:
<svg (...)>
        <rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
              style="fill:#729fcf;fill-opacity:1;fill-rule:nonzero;stroke:none"
              id="upper-left-blue" height="200"/>

UseParts.svg:
        <use x="0" y="0" width="400" xmlns:xlink="http://www.w3.org/1999/xlink"
             xlink:href="MyLibrary.svg#upper-left-blue" xlink:type="simple"
             xlink:actuate="onLoad" height="400" id="use8793" xlink:show="embed"/>

Support of that feature may vary for different SVG editors/viewers, as far as I know it should work (at least) in Inkscape, Firefox and Batik.

6
  • I think it worth noting that Inkscape added support for this feature in the 0.91 release. I added the Inkscape ppa to get this version on Mint 17 (14.04 Ubuntu). Dec 24, 2015 at 8:59
  • @LeifCarlsen How exactly? I seem to not find how to do it in 0.91
    – rac2030
    Jan 24, 2016 at 16:24
  • 1
    I generate files with this feature outside Inkscape and view/render with Inkscape. Jan 25, 2016 at 6:53
  • Hmmm... ok I tried and failed this before but maybe I need to try harder
    – rac2030
    Jan 30, 2016 at 10:35
  • Ha nevermind... usually its the user that makes the mistake... for reference I did just forget to add the xlink definition... I added the namespace to the top svg tag and suddenly it started working ;-)
    – rac2030
    Jan 30, 2016 at 11:02
3

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"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>

Source: https://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238

2
  • Somehow this results in "Linked image not found" message with Inkscape 0.48.4 on Windows at least.
    – mlt
    Dec 12, 2013 at 20:04
  • maybe prefix the xlink:href with "./" ? works for me.
    – Berteh
    Jul 7, 2019 at 6:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .