scalable Vector Graphics

Dieses Thema im Forum "Webdesign" wurde erstellt von Hanskopf, 12. Mai 2011 .

Schlagworte:
  1. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    warum denn das? du kannst diese svg doch direkt in einem canvas zeichen lassen.

    beispiel:
    Code:
    var canvas = document.getElementById("dein-canvas-element");
    var ctx = canvas.getContext('2d');
    var img = new Image;
    img.onload = function(){ ctx.drawImage(img,0,0); };
    img.src = "dein-bild.svg";
    svg steht btw für "Scalable Vector Graphics"
     
  2. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    Bei mir tut sich irgendwie nichts....
    hier die svg: s-v-g.net - de beste bron van informatie over s-v-g.

    hier meine HTML File

    HTML:
    <html>
     <head>
     <title>Canvas drawImage example 1</title>
     <script type="application/x-javascript">
     function draw() {
     var canvas = document.getElementsById("canvas");
     var ctx = canvas.getContext('2d');
     var img = new Image;
     img.onload = function(){ ctx.drawImage(img,0,0); };
     img.src = "svgLogo01.svg";
     }
     </script>
    
     </head>
    
     <body onload="draw();">
     <div>
     <canvas id="canvas" width="180" height="130"></canvas>
    
     </div>
     </body>
    </html>
    
     
  3. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    a) Lad dir Firebug und mach die Konsole an
    b) Die Methode heißt getElementById, da ja ID einzigartig ist und somit kann es nur ein Element mit der ID geben

    MfG
     
  4. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas



    Hä ????

    Genau diese Methode haben wir doch auch verwendet ?
     
  5. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    document.getElementsById("canvas")

    das "s" muss weg, war n copy & paste fehler von mir.
     
  6. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    Hm ok jetzt hab ichs...

    Aber ehrlich gesagt war das jetzt nicht das was ich wollte

    Ich will wie gesagt SVG in JavaScript übersetzen und dann völlig unabhängig von SVG das JavaScript Zeilen auf ein Canvas zeichnen...
     
  7. 12. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    du willst also einen svg-interpreter schreiben.
    was hält dich davon ab?

    mach einen ajax-request zu deiner svg-datei (ist ja xml) und verarbeite die verschiedenen tags.

    es gibt auch leute die das schonmal gemacht haben:
    canvg -


    Javascript SVG parser and renderer on Canvas - Google Project Hosting


    da du dein startposting nun geändert hast:
    mittels <object type="text/svg+xml" data="dein-bild.svg"></object>
     
  8. 13. Mai 2011
    AW: svg (calable Vector Graphics) + JavaScript + HTML5 Canvas

    Bin kein großer Coder und dachte es gibt vielleicht hilfreiche Seiten zu dem Thema...

    Danke! Sowas habe ich unter anderem gesucht! Leider "erklärt" er auf der Seite nichts Kein Doku,API o.ä.......

    Falls du noch ähnliche Links hast immer her damit...und wie bist du drauf gestoßen ?
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.