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?

studiohack
  • 13,468
  • 19
  • 88
  • 118
Keith
  • 8,013
  • 1
  • 31
  • 34

2 Answers2

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.

Berteh
  • 81
  • 1
  • 1
  • 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 08: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 06: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
  • Thanks for the tip. I was forced to prefix the xlink:href with "./" to make it work in Inkscape. – Bludwarf Jun 19 '19 at 15:22
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

Community
  • 1
Mirzhan Irkegulov
  • 1,384
  • 1
  • 12
  • 31