set img.src to dynamic svg element

This updates the accepted answer from Phrogz (8 years after it!)

The sample does not work on Chrome or Firefox (the image appears broken) changing to

  img.src = "data:image/svg+xml;base64,"+btoa(xml);

I am not sure of the reason why the original stopped working but this may help someone landing here.


You can do this with JavaScript:

var svg = document.querySelector('svg'),
    img = document.querySelector('img');

setImageToSVG(img,svg);

function setImageToSVG(img,svg){
  var xml = (new XMLSerializer).serializeToString(svg);
  img.src = "data:image/svg+xml;charset=utf-8,"+xml;
}​

If your SVG element is dynamic (changing) then you would need to re-run this code each time the SVG element changed.

Demo: http://jsfiddle.net/3PfcC/

Alternatively, here's a demo showing @Robert's answer, using another <svg> element to reference the first, live:

Demo: http://jsfiddle.net/3PfcC/3/

<svg id="src" xmlns="http://www.w3.org/2000/svg" …>
  <!-- Your SVG here -->
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" …>
  <use x:href="#src" x="80" y="30" width="100" height="100" />
</svg>

The demo also shows that you can resize and otherwise transform the referenced SVG document, and that the reference is live: changes to the original are immediately reflected in the <use>.

Tags:

Html

Svg

Recent Posts