Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer
    
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 at 16:24
1  
I generate files with this feature outside Inkscape and view/render with Inkscape. – Leif Carlsen Jan 25 at 6:53
    
Hmmm... ok I tried and failed this before but maybe I need to try harder – rac2030 Jan 30 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 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"
     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: http://stackoverflow.com/questions/5451135/embed-svg-in-svg/5451238#5451238

share|improve this answer
    
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

You must log in to answer this question.

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