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?

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.

  • 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). – Leif Carlsen Dec 24 '15 at 8:59
  • @LeifCarlsen How exactly? I seem to not find how to do it in 0.91 – rac2030 Jan 24 '16 at 16:24
  • 1
    I generate files with this feature outside Inkscape and view/render with Inkscape. – Leif Carlsen Jan 25 '16 at 6:53
  • Hmmm... ok I tried and failed this before but maybe I need to try harder – rac2030 Jan 30 '16 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 '16 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

  • Somehow this results in "Linked image not found" message with Inkscape 0.48.4 on Windows at least. – mlt Dec 12 '13 at 20:04
  • maybe prefix the xlink:href with "./" ? works for me. – Berteh Jul 7 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.