Converti un file SVG generato da JavaScript in un file

Sto usando d3.js per visualizzare alcuni dati. Mi piacerebbe essere in grado di prendere il codice SVG che genera e memorizzarlo come file di immagine .svg (per la modifica in Inkscape / Illustrator).

Ho provato semplicemente a copiare il contenuto del tag svg cioè

    

in un file chiamato image.svg, ma questo manca sulle informazioni sul colore / stile, che si trovano in due file CSS separati.

Sto lavorando con questo esempio .

C’è un modo semplice per fare questo?

Penso che SVG Crowbar potrebbe essere il modo migliore per affrontarlo.

Documentazione

Ecco un buon modo per utilizzare svg-crowbar.js per fornire un pulsante sul tuo sito per consentire agli utenti di scaricare la visualizzazione come svg.

1) Definisci il CSS del tuo pulsante:

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

2) Definisci il tuo codice HTML / JS:

  Download 

Ecco uno sguardo più ravvicinato a quello stesso 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) Hai finito. Questo produce un download svg che può essere aperto da Inkscape.

Nota: svg-crowbar.js è caricato da https://rawgit.com o http://nytimes.github.com ; potresti preferire di integrarlo nel tuo sito web / cartella.

È tardi, ma con D3.js sarebbe semplice integrare il CSS. Faresti qualcosa come:

 d3.json("../data/us-counties.json", function(json) { counties.selectAll("path") .data(json.features) .enter().append("path") .attr("fill", data ? quantize : null) .attr("d", path); }); d3.json("unemployment.json", function(json) { data = json; counties.selectAll("path") .attr("fill", quantize); }); function quantize(d) { return "hsla(120, 50%, 50%, " + Math.min(8, ~~(data[d.id] * 9 / 12)) + ")"; } 

La mia funzione quantize è solo un rapido trucco per la dimostrazione, ma si potrebbe guardare a colorbrewer per capire la logica per applicare i quantili ai colors.

Questo funziona per me in Chrome v16b e Safari v5.1 su Windows: http://phrogz.net/SVG/chloropleth.html

Tutto ciò che ho fatto è stato utilizzare gli Strumenti per sviluppatori per copiare come HTML il nodo SVG, incollarlo in un documento vuoto e aggiungere i collegamenti ai due file CSS. Questo appare correttamente per te in Safari?

Modifica : qui è come un file SVG standalone: http://phrogz.net/SVG/chloropleth.svg
Per questo ho aggiunto l’attributo xmlns al e ai link esterni:

    

Ancora una volta, verificato di funzionare in Chrome e Safari.