Dessiner avec SVG - sommaire

SVG et Canvas : comparaison

Points communs et différences

Pour dessiner (voire créer une animation graphique) directement dans une page web vous avez le choix entre deux technologies : SVG ou Canvas. Laquellle retenir ?

La première différence entre ces deux technologies tient aux types de données manipulées. SVG est un format vectoriel tandis que Canvas est un format matriciel (bitmap). On a donc d’un côté, des formes définies à l’aide de points et de courbes, et de l’autre un "bouillon" de pixels anonymes.
Une image produite par SVG ne perdra pas en qualité si elle est agrandie alors qu'une image créée par Canvas et agrandie deviendra disgracieuse en particulier au niveau des courbes.

Une autre différence de fond entre ces deux technologies tient à la façon de les utiliser. SVG est un langage qui repose sur une syntaxe  XML, il est dit déclaratif. Vous dites explicitement au navigateur ce qu’il doit dessiner.
Canvas lui, repose sur une API (du JavaScript) : vous allez devoir programmer la façon dont le navigateur va devoir dessiner.

SVG reposant sur une syntaxe XML, son interprétation par un navigateur conduit à la construction d’un arbre DOM qui comprendra l’ensemble des objets constitutifs de l'image. De son côté un dessin produit par Canvas n'est pas repris dans l'arbre DOM.
Pour parler plus simple chaque objet SVG pourra être manipulé avec JavaScript (ou CSS) en tant qu'élément du DOM alors qu'un dessin Canvas ne se traduit par aucun élément nouveau dans le DOM.

Dessin produit avec SVG

Dessin produit avec Canvas

Zoomez la page (zoom +) vous verrez alors que la première image qui est produite en SVG (image vectorielle) reste parfaitement nette alors que la deuxième image qui est produite avec Canvas (image matricielle) devient floue.

C'est aussi l'occasion de comparer les deux langages. Vous pouvez ainsi vérifier (en regardant le code ci-dessous) que les méthodes de programmation sont totalement différentes.

Le code de la solution SVG

On crée un modèle sous forme d'un groupe de formes basiques ; groupe identifié "maison".
On clone N fois ce modèle.

Le code de la solution Canvas

On crée une boucle et à chaque passage dans la boucle on dessine la maison et on translate vers la droite.

Comparaison du code

Points communs

Les balises svg & canvas sont des éléments HTML que l'on peut formater via CSS et en particulier on peut utiliser les raccourcis background, border, etc.

Que ce soit avec SVG ou avec Canvas le canevas peut être "responsive" mais la mise en oeuvre est différente :
• pour l'élément SVG on affecte à l'attribut "width" un pourcentage et à l'attribut "viewBox" des entiers.
• pour l'élément CANVAS on affecte aux attributs "width & height" des entiers mais à la propriété "width" on attribue un pourcentage.

Différences

Les techniques de programmation sont radicalement différentes. SVG est déclaratif alors que Canvas est procédural.

En SVG on définit un modèle ; on identifie ce modèle "maison". On crée donc un noeud du DOM.
Ensuite, grâce à la balise use on crée huit clones de l'élément "maison".

En Canvas on crée une boucle qui est exécutée 8 fois et à chaque passage dans la boucle on effectue un changement d'origine grâce à la méthode translate.
Dans chaque passage dans la boucle, on dessine une maison.
Aucune des formes crées ne sont des éléments du DOM !

Remarque

Rien n'interdit dans une page web de superposer (via "position : absolute) une zone de dessin Canvas et une zone de dessin SVG.
Utilisation combinée de SVG & Canvas