Le document traite des graphiques vectoriels évolutifs (SVG) et des éléments de balisage HTML5 tels que le canvas, présentant des exemples simples et les fonctionnalités disponibles dans Internet Explorer 9 et 10. Il offre également des conseils pour choisir entre SVG et canvas, ainsi que des liens vers des ressources pour le développement de jeux avec ces technologies. Enfin, il mentionne l'utilisation d'outils pour faciliter le développement sans nécessité d'écriture directe en SVG ou JavaScript.

1. http://blogs.msdn.com/davrous
http://blogs.msdn.com/eternalcoding

4. Peu de slides et beaucoup de demos!

5. SVG

6. Scalable Vector Graphics

7. Jetons un œil à un exemple tout simple
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>

8. Fonctionnalité SVG IE9 IE10
SVG 1.1 2nd Edition Document Structure  
dans IE9 et IE10 Basic Shapes
Paths




Text  
Transforms  
Painting, Filling, Color  
Scripting  
Styling  
Gradients and Patterns  
Clipping and Masking  
Markers and Symbols  
Filter Effects 
Declarative Animation
SVG Fonts

10. Canvas

11. Une surface de pixels dynamique contrôlée par JS

12. Jetons un œil à un exemple tout simple
<canvas id="myCanvas" width="200" height="200">
Votre navigateur ne supporte pas l’élément canvas, désolé.
</canvas>
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>

14. Comment faire son choix ?

19. Les choix les plus simples

20. Des différences plus subtiles

21. L’outillage

22. Vous ne serez pas obligé de taper du SVG dans Notepad!

23. Vous ne serez pas obligé de taper les primitives JS non plus ;-)
http://visitmix.com/labs/ai2canvas/

25. Allez, maintenant, du fun !

26. 1ère étape : un jeu simple !

28. La dernière étape pour vous aider à choisir

30. Revue de jeux plus complexes

33. http://blogs.msdn.com/davrous/archive/2011/05/09/introduction-aux-apis-
graphiques-d-html5-svg-amp-canvas-1-4.aspx
http://blogs.msdn.com/davrous/archive/2011/09/09/html5-platformer-portage-
complet-du-jeu-xna-vers-lt-canvas-gt-gr-226-ce-224-easeljs.aspx
http://blogs.msdn.com/eternalcoding/archive/2011/07/13/retours-sur-un-d-233-
veloppement-html5-amp-javascript.aspx
http://blogs.msdn.com/b/eternalcoding/archive/2011/09/02/cahier-de-
vacances-html-5-d-233-velopper-son-propre-jeu-de-casse-briques-en-html-5-
avec-canvas-et-svg.aspx

34. questions?