0

I have a svg-element that I want to export as a SVG and PNG. There are already some approaches here on stack overflow, like this one and the one from mbostock. However, I did something like this: 

var $el = '<svg xmlns="http://www.w3.org/2000/svg" height="367" width="780"id="canvas" version="1.1" style="overflow: hidden;">
<circle r="12" style="cursor: move; fill: #4682b4; stroke: #000000; stroke-width: 1.5px;"/></svg>';

var serializer = new XMLSerializer();
var res = serializer.serializeToString($el);

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:image/svg+xml;base64,' + btoa(res);
hiddenElement.download = 'export.svg';
hiddenElement.click();

This does what it should do but only in chrome. Firefox does not react at all and safari tell me this:

Blocked a frame with origin "null" from accessing a frame with origin "http://localhost:8080". The frame requesting access has a protocol of "data", the frame being accessed has a protocol of "http". Protocols must match.

Any suggestions? Thanks.

Community
  • 1
  • 1
riasc
  • 281
  • 2
  • 3
  • 15
  • It seems you are using iframe or object don't you? Please provide the full code. `XMLSerializer().serializeToString()` works with appended DOM elements, you are passing an already string to it... Also, you don't need to encode as base64, just use `'data:image/svg+xml; charset=utf8, ' +encodeURIComponent(res)`. Finally, your title talks about conversion to png. I assume you'll pass the dataURI to an ``tag and then paint it on canvas to do so. There are caveats (basically external resources won't load). You can try to use this exporter I'm writing : https://github.com/Kaiido/SVG-to-Bitmap – Kaiido Dec 01 '15 at 02:30

1 Answers1

-1

May be you are presenting your page a like text/html, use application/xhtml+ xmlin <head> tag.<meta http-equiv="content-type" content="application/xhtml+xml; />. Hope, it will work.

najimsujon
  • 1
  • 3
  • Thanks for the answer, but unfortunately that doesn't work. So basically Im working on a Backbone View and I extract the svg through `$el.find('svg')` – riasc Nov 30 '15 at 22:20