Existe-t-il un moyen de convertir les fichiers SVG en commandes compatibles HTML5 de canvas?

Le titre reprend tout. 😛

source d'informationauteur Gabriel A. Zorrilla

  1. 5

    Il n'y a pas 100% de la solution, mais il y a des bibliothèques de script qui permet de convertir un sous-ensemble de svg à la toile, de l'e.g http://code.google.com/p/canvas-svg/. Il y a aussi le expérimentales Path2D API qui permettent de dresser un svg chemin de chaîne de données sur la toile, pas sûr de la façon dont il est pris en charge dans les navigateurs.

  2. 18

    canvg semble être une meilleure solution. Il s'agit d'un projet à partir de janvier 2012.

    toile-svg n'a pas été mis à jour depuis qu'il a été publié en juin 2009.

  3. 4

    Je recommande le projet Java SVGToCanvas si vous voulez juste de manière statique à générer de la Toile javascript à partir d'un fichier SVG.

  4. 3

    Version actuelle de Inkscape "enregistrer sous: HTML5 canvas".

    https://inkscape.org/en/

    Il produit un code comme ceci:

    <!DOCTYPE html>
<html>
<head>
    <title>Inkscape Output</title>
</head>
<body>
    <canvas id='canvas' width='200' height='200'></canvas>
    <script>
    var ctx = document.getElementById("canvas").getContext("2d");

//#layer1

//#rect3336
    ctx.beginPath();
    ctx.lineJoin = 'miter';
    ctx.lineCap = 'butt';
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgb(30, 144, 255)';
    ctx.rect(0.000000, 88, 64.000000, 64.000000);
    ctx.fill();

//#path4138
    ctx.beginPath();
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.lineWidth = 1.494353;
    ctx.arc(32.000000, 120, 29.252823, 0.000000, 6.28318531, 1);
    ctx.stroke();

    </script>
</body>
  7. 0

    Si vous souhaitez manipuler des objets, après la conversion, je recommande http://www.kineticjs.com/ il supporte également le format SVG chemin de format de données.
    Par exemple: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/.

    Il est assez facile de faire une boucle par le svg et le changement des rectangles, des chemins, lignes, etc.. pour correspondate kineticJS (toile) des objets.

  8. 0

    Avait même exigence pour un couple projets internes. Pensé qu'il pourrait aider les autres, de sorte qu'il est disponible comme SVG2Canvas expérience.

  9. -13

    Pas. SVG est un (pour la plupart) statique format vectoriel et de la toile est une API pour une image bitmap dynamique. Tournant SVG en toile de sens autant que de tourner SVG dans MathML: aucun.