Script de conversion SVG - JSON

Transformer une image SVG en objet JavaScript à afficher ou animer dans Canvas.

Dans un précédent article, nous avons vu comment convertir une image SVG en fichier JavaScript à inclure dans une page Web, pour afficher - beaucoup plus rapidemment - l'image dans Canvas.

Ce nouveau script convertit le fichier SVG en fichier JSON que l'on peut charger avec Ajax, WebSocket, etc... Le runtime scriptol doit être installé.

node svgtojson.js image.svg

Cette commande convertit SVG en JavaScript et crée le fichier image.json.

Voici le code pour charger le fichier dans la page et l'afficher dans Canvas...

Affichage SVG:

<object id="carsvg" width="400" height="100" data="car-json.svg"></object>

Affichage dans Canvas, avec animation :

<canvas id="jsoncar" width="500" height="100"></canvas>
var car;
var x = 50;
var drawInter;

function redraw(ctx) {
  ctx.clearRect(0, 0, 500, 100);
  SVGtoCanvas(car, ctx, x++, 20);
  if(x > 300) clearInterval(drawInter);
}

function setJSON(content) {
  car = JSON.parse(content)
	
  var ctx = canvasInit("jsoncar")
  SVGtoCanvas(car, ctx, 50, 20);
	
  drawInter = setInterval(function() { redraw(ctx) }, 10);
}

AARead("car.json", setJSON, null);

Le fichier JSON est chargé en une seule instruction avec le framework Ajax minimaliste Anaa (sur ce site).

Le contenu est assigné à l'attribut responseText d'Ajax et passé en argument à la fonction setJSON,
la fonction JSON.parse convertit ce contenu textuel en objet JavaScript. Une petite animation est alors réalisée qui fait appel à SVGtoCanvas pour afficher l'objet dans Canvas.

Démonstration

SVG
CANVAS

Télécharger le script et la démo

L'archive contient: