web-dev-qa-db-fra.com

Convertir un fichier SVG généré par JavaScript en un fichier

J'utilise d3.js pour visualiser des données. J'aimerais pouvoir prendre le code SVG qu'il génère et le stocker sous la forme d'un fichier image .svg (pour le modifier dans Inkscape/Illustrator).

J'ai simplement essayé de copier le contenu de la balise svg i.e. 

<svg>
<!--snip-->
</svg>

dans un fichier appelé image.svg, mais les informations sur la couleur/le style manquent, qui se trouvent dans deux fichiers CSS distincts.

Je travaille avec cet exemple .

Y a-t-il un moyen simple de faire cela?

javascriptcsssvgd3.js
37
Jason Sundram

Je pense que SVG Crowbar est peut-être le meilleur moyen de régler ce problème.

Documentation

29
Jason Sundram

Voici une bonne façon d'utiliser svg-crowbar.js pour fournir un bouton sur votre site permettant à vos utilisateurs de télécharger votre visualisation au format svg.

1) Définissez le CSS de votre bouton: 

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

2) Définissez le code HTML/JS de votre bouton: 

<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>

Voici de plus près le même 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) Vous avez terminé. Ceci produit un téléchargement svg qu'Inkscape peut ouvrir.

Remarque: svg-crowbar.js est chargé depuis https://rawgit.com ou http://nytimes.github.com ; vous préférerez peut-être l'intégrer à votre site Web/dossier.

10
Hugolpz

C’est tard, mais avec D3.js, il serait simple d’aligner le CSS. Vous feriez quelque chose comme:

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)) + ")";
}

Ma fonction quantize n'est qu'un hack pour la démonstration, mais vous pouvez regarder colorbrewer pour élaborer la logique d'application des quantiles aux couleurs.

5
Duopixel

Cela fonctionne pour moi dans Chrome v16b et Safari v5.1 sous Windows: http://phrogz.net/SVG/chloropleth.html

Tout ce que j'ai fait, c'est utiliser les outils de développement pour copier en HTML le nœud SVG, le coller dans un document vierge et ajouter les liens aux deux fichiers CSS. Cela apparaît-il correctement pour vous dans Safari?

Edit : Voici un fichier SVG autonome: http://phrogz.net/SVG/chloropleth.svg
Pour cela, j'ai ajouté l'attribut xmlns au <svg> et aux liens externes:

<?xml-stylesheet href="http://mbostock.github.com/d3/ex/choropleth.css" type="text/css"?>
<?xml-stylesheet href="http://mbostock.github.com/d3/ex/colorbrewer.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg"><!-- 1MB of data --></svg>

_ {Encore une fois, vérifié pour fonctionner dans Chrome et Safari.} _

3
Phrogz

Il existe une extension appelée " svg-grabber " ( export svg est une autre option ) que vous pouvez essayer, cela fonctionne en cliquant simplement sur l’icône de l’extension, voici le résultat de la page stackoverflow:  enter image description here

0
Luis Limas