Valeur de cette activité : 5 points
Compétence :
Compétence :
Convertir un fichier SVG en code HTML5

A-Module 05 : SVG : 5 points - difficulté : 2

Convertir un fichier .svg en code html 5

Description

Les différentes technologies de traitement de l'information sont toujours liées entre elles.
Cette activité vous permettra d'illustrer comment vous pouvez convertir un fichier .svg en code html 5.
Une connaissance de base du langage SVG et de l'utilisation de la balise html5-canvas est requise pour réaliser cette activité.

Voici un exemple de réalisation de ce travail :
Your browser does not support the HTML5 canvas tag.
  1. Ajoutez une page à votre portfolio en affichant les assistants HTML et SVG ainsi que la directive 96856

  2. Inscrivez dans le champ titre : Convertir un fichier .svg en code html 5

  3. Sélectionnez la section : Module SVG

  4. Sélectionnez la matière : informatique

  5. Inscrivez dans le champ no de la directive : 96856

  6. Inscrivez dans votre page le titre de niveau 1 : Convertir un fichier .svg en code html 5

  7. Produisez un fichier .svg de votre choix en utilisant notre éditeur en ligne (bouton SVG), le logiciel inkscape ou Gimp (exportez un chemin en fichier .svg).

  8. Copiez le code SVG de ce fichier (ou votre code svg produit)

  9. Utilisez un des sites suivants:
    1. http://demo.qunee.com/svg2canvas/
    2. http://www.professorcloud.com/svg-to-canvas/
    3. http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE90.php


  10. Convertissez votre code SVG en code html5

  11. Copiez le code javascript produit et utilisez-le dans votre page afin d'afficher votre production dans une balise canvas. Utilisez au besoin ce site afin de vous remémorer comment utiliser la balise canvas ou ce site ou ce site ou ce site (suggéré) ou ce site
    Exemple de code utilisé:
    <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> function draw_b() { var b_canvas = document.getElementById("myCanvas"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 55, 55); } draw_b(); </script> </body> </html>

  12. Visualisez votre page et apportez des modifications au besoin.