How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?

by

There are 5 steps. I often use this method to output inline svg.

  1. get inline svg element to output.
  2. get svg source by XMLSerializer.
  3. add name spaces of svg and xlink.
  4. construct url data scheme of svg by encodeURIComponent method.
  5. set this url to href attribute of some “a” element, and right click this link to download svg file.
//get svg element.
var svg = document.getElementById("svg");

//get svg source.
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);

//add name spaces.
if(!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
    source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if(!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
    source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}

//add xml declaration
source="<?xml version="1.0" standalone="no"?>\r\n" + source;

//convert svg source to URI data scheme.
var url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);

//set url value to a element's href attribute.
document.getElementById("link").href = url;
//you can download svg file by right click menu.

More Related Contents:

  1. Add names of the states to a map in d3.js
  2. jQuery SVG, why can’t I addClass?
  3. Scaling d3 v4 map to fit SVG (or at all)
  4. How to add a tooltip to an svg graphic?
  5. Replacing d3.transform in D3 v4
  6. How do I include newlines in labels in D3 charts?
  7. Updating SVG Element Z-Index With D3
  8. D3 Appending Text to a SVG Rectangle
  9. In d3, how to get the interpolated line data from a SVG line?
  10. Creating and appending detached elements with d3.create
  11. Label outside arc (Pie chart) d3.js
  12. D3js take data from an array instead of a file
  13. Where is d3.svg.diagonal()?
  14. How are input parameters filled in javascript method chains?
  15. (Embed and) Refer to an external SVG via D3 and/or javascript
  16. Plotting points on a map with D3
  17. D3 fill shape with image using pattern
  18. Setting rounded corners for svg:image
  19. Is it possible to append a div inside an SVG element? [duplicate]
  20. svg / d3.js rounded corners on one side of a rectangle
  21. SVG to Canvas with d3.js
  22. How do I return y coordinate of a path in d3.js?
  23. Display an arrow head in the middle of D3 force layout link
  24. How to get the width of an svg:g element
  25. Does the attr() in jQuery force lowercase?
  26. Calculate SVG Path Centroid with D3.js
  27. draw text in d3 arc javascript
  28. D3 put arc labels in a Pie Chart if there is enough space
  29. jQuery SVG vs. Raphael [closed]
  30. Create a table in SVG

Leave a Comment