0

I am using D3 to produce an svg element with a graph on it.

What I am trying to achieve is to save my SVG element to a PNG file locally through the browser.

I am wanting it to save the svg as a png locally when the user clicks the save button

I have tried to use:

https://github.com/exupero/saveSvgAsPng

But get the error:

Error: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide' is not a valid selector.

I have read other SO questions regarding the issue, but they don't make full sense to me.

Any help would be good.

user2469515
  • 373
  • 3
  • 12
  • Depending on browser support this post may have your answer: http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser – AllenSH May 30 '14 at 03:13

2 Answers2

1

I don't really understand the context of your question, but this is a way of downloading an SVG and saving it as a PNG using ImageMagick - here.

Say you have an SVG on the web like here.

You can download it to your local machine with curl like this:

curl http://upload.wikimedia.org/wikipedia/commons/1/10/Type_B_Plug_BW.svg > x.svg

Then you can use ImageMagick to convert it to PNG like this:

convert x.svg x.png

Or you can do it all in one:

curl http://upload.wikimedia.org/wikipedia/commons/1/10/Type_B_Plug_BW.svg | convert SVG:- x.png
Mark Setchell
  • 191,897
  • 31
  • 273
  • 432
  • Sorry about that. I have made a graph in D3, and when the user clicks on the save button i would like it to save it to local system. – user2469515 May 29 '14 at 07:30
1

You can do this with online services as well. Blitline.com for example lets you do it in a browser like via a custom URL, like this:

http://api.blitline.com/actions/vector_to_image?application_id=YOUR_APP_ID&src=https://s3.amazonaws.com/img.blitline/ai/butterfly.ai

Just replace "YOUR_APP_ID" with your free Blitline Application ID, and your browser will output a png version of the src vector.

There are also other options(like setting width, height, extension, etc) for the URL which you can find here:

http://www.blitline.com/docs/aliases

There are other services that do this as well. Blitline is just the one I am familiar with.

Jason Malcolm
  • 181
  • 9