How do I define an SVG doc under , and reuse with the tag?

Question

I'm trying to do something like the following:

<svg>
    <defs>
        <svg id="importeddoc">...</svg>
    </defs>
    <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"></use>
</svg>

I would think that a sub portion of my original SVG document would appear in a box 100x100. But instead nothing happens. From the SVG spec it looks like this should work. Any pointers?

Turns out it was the the d3.js library to construct my image and it snips off namespaces for some reason. I had to do .attr("xlink:xlink:href", "...") to get it to work. Thanks!

score 1 · Accepted Answer · answered May 03 '12 at 13:19

If you add all namespace declarations to the svg element, it should indeed be possible to reference the embedded SVG. The following example produces the output shown below. This works in all browsers I tested, and in Batik Squiggle as well:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="5cm" height="5cm" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">      
  <defs>
    <svg id="importeddoc">
      <rect width="2cm" height="1cm"/>
      <circle cx="1cm" cy="5mm" r="3mm" fill="red"/>
    </svg>
  </defs>
  <use x="0" y="0" width="100" height="100" xlink:href="#importeddoc"/>
  <use x="0" y="60" width="40" height="20" transform="scale(1.5, 1)" xlink:href="#importeddoc"/>
</svg>

enter image description here

If it doesn't work for you, what SVG viewer do you use?

Tis was exactly it - I was using the d3.js library to construct my image and it snips off namespaces for some reason. I had to do `.attr("xlink:xlink:href", "...")` to get it to work. Thanks! — dsummersl, May 03 '12 at 14:09

How do I define an SVG doc under , and reuse with the tag?

1 Answers1

Linked