Exporter (0) Imprimer
Développer tout

Exemples d’utilisation de SVG et de l’élément canvas

HTML5 canvas et SVG (Scalable Vector Graphics) sont des outils très efficaces pour créer des graphiques interactifs sur le Web. Pour décider laquelle de ces deux technologies choisir, il est utile de comparer leurs techniques de programmation. Les exemples de code annotés et les commentaires techniques de ce didacticiel vous guideront.

Dans cette section

RubriqueDescription

Création d’éléments d’interface utilisateur avec Canvas ou SVG

Cette rubrique compare l’utilisation de l’élément canvas de zone de dessin et de SVG pour créer un bouton-poussoir interactif à utiliser sur une page Web.

Programmation de jeux simples avec Canvas ou SVG

Cette rubrique compare l’utilisation de Canvas et de SVG pour créer un jeu d’arcade simple, exécutable sur une page Web.

Création de cartes avec Canvas ou SVG

Cette rubrique compare l’utilisation de l’objet canvas (zone de dessin) et SVG pour créer des cartes interactives que vous pouvez afficher sur une page Web.

 

Windows Internet Explorer 9 offre les solutions de zone de dessin (élément canvas) et SVG pour créer rapidement des graphiques légers sur une page Web. Ce didacticiel compare trois fonctionnalités de programmation clés : les interfaces utilisateur, les jeux et l’élaboration de cartes. L’objectif de cette comparaison est de présenter les différentes techniques de programmation de ces fonctionnalités pour choisir le système graphique le plus adapté à vos besoins graphiques en ligne. Six exemples de code annotés autonomes ont été fournis pour illustrer en détail les similarités et les différences.

Les éléments canvas et SVG présentent des similarités particulièrement marquantes : ces deux technologies représentent des outils graphiques productifs qui permettent de créer des images rapides et légères destinées à des pages Web. Elles exploitent toutes deux JavaScript et HTML. Elles suivent en outre une norme du W3C (World Wide Web Consortium).

Ces deux technologies présentent cependant aussi des différences notables : l’élément canvas de zone de dessin s’appuie sur des pixels, le système graphique en mode immédiat donnant son plein potentiel sur une surface plus petite ou avec un nombre plus important d’objets. SVG s’appuie sur les formes, le système graphique en mode retenu offre de meilleures prestations avec une surface plus grande ou un nombre plus réduit d’objets. Les éléments canvas et SVG diffèrent aussi quant à leurs possibilités de modification. Une fois un objet canvas dessiné, il ne peut pas être modifié par script ou CSS. À l’inverse, comme les objets SVG font partie du modèle d’objet de document (DOM, Document Object Model), ils sont modifiables par script et CSS à tout moment.

Ce didacticiel est divisé en trois rubriques. Chaque rubrique contient deux exemples de code annotés autonomes, une version canvas et son équivalent SVG. La première rubrique explique les principes de base de création d’un bouton d’interface utilisateur. La deuxième rubrique présente le développement d’un programme de jeu d’arcade simple. La troisième explique quant à elle comment ces deux technologies créent des cartes interactives. Ces exemples de code sont suivis de commentaires techniques et de liens vers des informations complémentaires. Le code a été écrit le plus simplement possible, pour faciliter l’analyse des principes de base des éléments canvas et SVG et pour illustrer leurs similarités et leurs différences.

Pour plus d’informations sur l’élément HTML5 canvas, voir CANVAS Element | canvas Object. Pour plus d’informations sur SVG, voir SVG (Scalable Vector Graphics).

Rubriques connexes

Graphiques HTML5

 

 

Afficher:
© 2014 Microsoft