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


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.


<svg (...)>
        <rect x="0" y="0" width="200" inkscape:label="upper-left-blue"
              id="upper-left-blue" height="200"/>

        <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.

  • 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

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

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

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.