Using SVG images w/D3

_.md

[ Launch: Tributary inlet ] cc4f042f843ced3adecc by taivare
[ Launch: Tributary inlet ] d55d569bc5bfd52c0c0a by taivare
No parent Inlet

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":579,"height":508,"hide":false},"endpoint":"","description":"Using SVG images w/D3","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/e4UyRlm.png"}

inlet.js

var svg = d3.select("svg");

svg.append("rect")
  .attr({
    width: 200,
    height: 200,
    x: 100,
    y: 100,
    fill: "#1A9224"
  })
  
svg.append("image")
  .attr({
    width: 100%
    height: 100%
    xlink:href="https://www.dropbox.com/s/gtindax1177ewmx/BLANK_VOWEL_trapezoid.svg?dl=1"...
    x: 10,
    y: 20
  })
  
  
function cerealize(node) {
  var svgxml = (new XMLSerializer()).serializeToString(node);
  if($.browser.webkit){ 
      svgxml = svgxml.replace(/ xlink/g, ' xmlns:xlink');
      svgxml = svgxml.replace(/ href/g, ' xlink:href');
  }
  return svgxml;  
}
//usage:
var exp = cerealize(svg.node());
console.log(exp);

inlet.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="tributary_svg" width="1439" height="774"><rect width="200" height="200" x="100" y="100" fill="#1A9224"></rect><image width="200" height="200" xlink:href="https://twimg0-a.akamaihd.net/profile_images/2560186719/7f57h85fjrqelks62v75.jpeg" x="325" y="100"></image></svg>