Convert JavaScript-Generated Svg to a File

Convert JavaScript-generated SVG to a file

Here's a nice way to use svg-crowbar.js to provide a button on your site to allow your users to download your visualization as svg.

1) Define your button's CSS:

.download { 
  background: #333; 
  color: #FFF; 
  font-weight: 900; 
  border: 2px solid #B10000; 
  padding: 4px; 
  margin:4px;
}

2) Define your button's HTML/JS:

<i class="download" href="javascript:(function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</i>

Here's a closer look at that same javascript:

javascript:(function (){ 
    var e = document.createElement('script'); 
    if (window.location.protocol === 'https:') { 
        e.setAttribute('src', 'https://rawgit.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); 
    } else { 
        e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); 
    } 
    e.setAttribute('class', 'svg-crowbar'); 
    document.body.appendChild(e); 
})();

3) You're done. This produces an svg download that Inkscape can open.

Note: svg-crowbar.js is loaded from https://rawgit.com or http://nytimes.github.com; you may prefer to integrate it into your website/folder.

Convert SVG to image (JPEG, PNG, etc.) in the browser

Here is how you can do it through JavaScript:

1. Use the canvg JavaScript library to render the SVG image using Canvas: https://github.com/gabelerner/canvg
2. Capture a data URI encoded as a JPG (or PNG) from the Canvas, according to these instructions: Capture HTML Canvas as gif/jpg/png/pdf?

Convert SVG Data to SVG File that can be uploaded

var file = canvas.toSVG({
  // Multiplier appears to accept decimals
  width: '200mm',
  height: '300mm'      
});

$http.post('/postVendor', {
  filename: 'myfile.svg', file: file 
}).success(function (data) {...}

on the server side, there is no need to decode the base64 encoding because you are just uploading text and URL encoding from ajax should be enough.

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

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.

Export an SVG from DOM to file

There are more complicated methods involving node.js and server-side rendering but a quick, easy way is to just copy the svg element from the DOM, paste it into a file and save it with the extension .svg

After that you can open it in a vector editor.

Load and transform and embed an SVG file with svg.js

The solution is silly and easy:

var svg = SVG('svgId');

instead of using the .get() function.

You have to use the SVG() constructor with the SVG id, not the .get() function, I'm confused with this because this answer says that you can use .get() to retrieve the SVG.

Render javascript in svg

Most SVG editors, viewers and convertors presumably do not execute JavaScript in SVG documents; they expect static XML text files. (This applies even for browser if you load such SVG as image or CSS background-image.)

If you have your SVG document displayed in browser (as document, so JS is interpreted and runs), you can then obtain resulting source code from web console using

copy(document.documentElement.outerHTML)

command: it should place SVGs source even with elements and attributes generated by JS. (It will include <script> tags as well, but since they are not needed anymore because their outcome is already present, you can safely remove them. Or you can remove them prior copying with while(x=document.querySelector('script'))x.remove();copy(document.documentElement))

---

Related Topics