Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Ces deux outils ont chacun leurs avantages et leurs inconvénients. C'est pour cette raison que ces deux technologies sont recommandées par le W3C.
Comparons maintenant les deux API !
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.
Sur le plan de la rapidité, Canvas l'emportera toujours car le SVG doit faire appel au DOM, ce qui le ralentit.
Les deux API font partie de la norme HTML 5 et sont implémentées par les navigateurs récents ; il ne faut procéder à un aucun téléchargement.
Les balises doubles canvas & svg sont des éléments HTML et peuvent donc être stylées par toutes les propriétés CSS relatives aux boites.
Les canevas et les zones SVG peuvent être "responsives" mais avec des syntaxes différentes ; pour une zone canvas vous utilisez la propriété CSS width.
Pour une zone SVG vous exprimez l'attribut width en pourcentage.
Les deux technologies évoluent. Chrome commence à implémenter SVG version 2 qui permettra d'animer les objets SVG via le CSS et donc de se passer du SMIL.
Notez la porosité entre ces deux technologies et la place croissante du CSS pour chacune d'elles.
Ci-desous un document HTML dans un Iframe. Ce document contient une zone de dessin Canvas et une sone de dessin SVG.
Vue sur la chaine des Aravis à partir d'un balcon (d'où la balustrade) : un ciel sans nuages et un avion qui entamme son ascension.
Les deux zones de dessin doivent se superposer parfaitement d'où la règle de style pour qu'elles aient leur coin supérieur gauche au même implacement
dans la page web (10%, 50px).
Il faut dessiner le soleil et la balustrade.
Notez l'emploi d'un filtre avec la syntaxe CSS3.
Il faut dessiner l'avion qui se déplace selon une trajectoire.
La zone de dessin SVG est "responsive" : width ="80%".
J'ai utilisé la balise animateMotion pour déplacer l'avion le long d'un chemin.
Canvas & SVG
Comme vous savez il y a désormais (depuis HTML 5) deux façons de dessiner directement dans une page web:
Comparaison entre Canvas & SVG
Différences
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.
Points communs
Quant à l'API Canvas, les innovations sont notables : méthodes roundrect(), ellipse(), le constructeur Path2D() (qui peut être argumenté avec une notation
SVG du chemin), propriété filter donc la valeur reprend la syntaxe CSS des filtres.
Une animation reposant sur CSS, Canvas & SVG
Ces deux zones se superposent parfaitement grâce au positionnement en absolu.
Donc plutôt que de considérer ces deux technologies comme concurrentes, elles sont ici complémentaires.
Voyons maintenant comment j'ai réalisé cette animation. Vous allez voir que c'est en fait très simple, à la porté d'un développeur moyen.
Le code CSS et HTML du document HTML
Les deux zones de dessin s'afficheront dans le document avec une largeur de 80% (de BODY).
Le canevas a pour arrière plan une photo avec une haute définition qui sera le décor de notre animation.
Le canevas est "responsive" ; valeur de la propriété width : 80%.
Le script pour remplir le canevas
Emploi du constructeur Path2D pour définir un modèle d'objet qui sera dupliqué 8 fois. Chemin exprimé en relatif.
Le code SVG inline
On définit (sans dessiner) un modèle d'objet avec le conteneur symbol qu'on identifie "jet".
On définit une trajectoire avec la balise path.
On clone ce modèle mais avec réduction de moitié, on le dessine et on le fait déplacer le long de cette trajectoire.
Pour comprendre ce code :
SVG - déplacer un objet le long d'un chemin