Le SVG
Le dessin
La zone de dessin
En SVG, le point de coordonnée (0,0) n'est pas en bas à gauche, mais en haut à gauche. Du coup, l'axe des Y est inversé, il va de haut en bas.
Quelques attributs communs
Avant de voir l'ensemble de balises de dessins, il faut savoir que celles-ci partagent de nombreux attributs. Plutôt que les répéter à chaque nouvelle balise, voyont quels sont ces éléments communs.
- id, l'identifiant de l'élément ;
- class, la classe de l'élément (voir l'exposé sur le CSS) ;
- fill, la couleur de remplissage ;
- stroke, la couleur du contour ;
- stroke-width, l'epaisseur du contour ;
- style, le style CSS à appliquer.
Un autre élément à noter sur les attributs, c'est que la plus part d'entre eux sont seulement optionnels. Si vous souhaitez connaitre plus de détails concernant chacun des attributs que j'aborderai, voici un lien vers la spécification qui décris précisement l'ensemble des attributs existants.
Les formes simples
Les rectangles
En SVG, il est possible de créer un rectangle grâce à la balise <rect/>.
En plus des attributs communs, cette balise accepte 6 autres attributs :
- x et y, respectivement la position en x et y de la figure ;
- width et height, respectivement la largeur et la hauteur de la figure ;
- rx et ry, respectivement la largeur de l'arrondi des bords en x et y.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" fill="#ffcc00" stroke="#ffcc00" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les cercles
Un cercle est représenté par la balise <circle/>.
Ses attributs :
- cx et cy, la position du centre en x et y ;
- r, le rayon du cercle.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <circle cx="60px" cy="35px" r="30px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les ellipses
Une ellipse est représentée par la balise <ellipse/>.
Ses attributs :
- cx et cy, la position du centre en x et y ;
- rx et ry, le rayon du cercle en x et y.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <ellipse cx="60px" cy="35px" rx="60px" ry="30px" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les lignes
Une ligne est représentée par la balise <line/>.
Ses attributs :
- x1 et y1, les coordonnées (x,y) du premier point ;
- x2 et y2, les coordonnées (x,y) du second point.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <line x1="20px" y1="10px" x2="100px" y2="60px" stroke="#ff9900" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les formes complexes
Les polylignes
Un polyligne est un ensemble de lignes reliées entre elles, il est représenté par la balise <polyline/>.
Il n'a qu'un seul attribut (en plus des communs) :
- points, qui contient l'ensemble des points pour le dessiner.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <polyline points="0,0 40,70 80,0 120,70" fill="none" stroke="#ff9900" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les polygones
Un polygone est un polyline dont le dernier point est relié avec le premier. Il est représenté par la balise <polygon/>.
Il n'a qu'un seul attribut (en plus des communs) :
- points, qui contient l'ensemble des points pour le dessiner.
Exemple :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <polygon points="0,0 40,70 80,0 120,70" fill="#ffcc00" stroke="#ff9900" stroke-width="2px"/> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les tracés
Le tracé est de loin la figure la plus complexe, mais aussi la plus complète. Il permet de dessiner toutes les figures précédentes, et plus globalement, tout ce que l'on veut dessiner.
Il n'a lui aussi qu'un seul attribut, d, qui contient non seulement l'ensemble des points pour le dessiner, mais aussi la manière de lier ces points.
Les commandes disponible pour d :
- M (x,y)+ - (Move to) Se deplace au point (x,y) sans tracer ;
- L (x,y)+ - (Line to) Trace une ligne du point courant à (x,y) ;
- H x+ et V y+ - (Horizontal line to / Vertical line to) trace une ligne horizontale ou verticale jusqu'à atteindre la coordonnée donnée ;
- Z - (Close Path) Relie le dernier point au premier ;
- C (x1,y1 x2,y2 x,y)+ - (Curve to) Trace une courbe de Bézier du point courant au point (x,y) en se servant du point (x1,y1) en point de contrôle du debut de la courbe, et (x2,y2) en point de contrôle de fin de courbe ;
- S (x2,y2 x,y)+ - (Shorthand/smooth Curve to) Idem que C, sauf que le point (x1,y1) est le symetrique du deuxième point de controle par rapport à (x,y) si l'élément précédent etait un C ou un S. Sinon le premier point de controle est au même endroit que le point courant ;
- Q (x1,y1 x,y)+ - (Quadratic Bézier Curve to) Trace une courbe de Bézier quadratique du point courant au point (x,y) avec (x1,y1) en point de contrôle ;
- T (x,y)+ - (Shorthand/smooth Quadratic Bézier Curve to) C'est l'equivalent de la commande S par rapport à C.
- A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ - (Elliptical Arc) Trace un arc elliptique du point courant au point (x,y). La taille et l'orientation de l'ellipse sont définies par deux rayons (rx, ry) et une valeur de rotation sur l'axe-x rotation-axe-x, qui indique la rotation de l'ellipse dans son ensemble par rapport au système de coordonnées courant. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire aux contraintes imposées par les autres paramètres. Les valeurs drapeau-arc-large et drapeau-balayage contribuent à ce calcul automatique et aident à déterminer le dessin de l'arc.
Attention, toutes ces commandes ont deux modes de fonctionnement. Lorsque qu'on utilise la commande en majuscule (M, L...), les coordonnées sont absolues, en minuscule (m, l...) elles sont relatives à la position courante.
Les deux exemples SVG suivant devraient permettrent de mieux apréhender les courbes de Bézier.
Les groupes
Comme on peut s'en douter, les groupes ne sont pas des figures géométriques, mais permettent de grouper plusieurs figures au sein d'une même balise <g>.
Cela à pour avantage de pouvoir définir des attributs de groupes, qui seront alors partagés par tout les éléments du groupe.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g fill="#ffcc00"> <rect x="10px" y="10px" width="100px" height="50px" rx="10px" ry="10px" /> <circle cx="60px" cy="35px" r="35px" /> </g> </svg>
Si votre navigateur est compatible avec le SVG, vous devriez voir le rendu de ce code juste en dessous.
Les transformations
Il existe 4 types de transformation différentes:
La translation
La translation permet de deplacer l'axe du dessin sur x et y.
En appliquant cette transformation à un groupe, tout les éléments du groupe se positionneront par rapport à l'axe définit pour le groupe.
On la note tranform="translate(x,y)".
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g transform="translate(20, 20)"> [...] </g> </svg>
Si votre navigateur est compatible avec le SVG, l'image ci-dessous vous aidera à mieux comprendre la transformation. (cliquez sur l'axe)
La rotation
La rotation permet de faire tourner l'axe x,y, soit par rapport au point 0,0, soit par rapport à un point donné. L'angle fournit est en degré.
On la note tranform="rotate(angle[,cx,cy])".
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g transform="rotate(45)"> [...] </g> </svg>
Si votre navigateur est compatible avec le SVG, les images ci-dessous vous aideront à mieux comprendre la transformation. (cliquez sur l'axe)
La mise à l'echelle
La mise à l'echelle permet d'agrandir ou de retrecir les axes x,y.
Si les valeurs d'agrandissement sont supérieures à 1, l'axe grandit, sinon il rétrécit.
Une valeur négative inverse l'axe.
On la note tranform="scale(x, y)".
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g transform="scale(2, 2)"> [...] </g> </svg>
Si votre navigateur est compatible avec le SVG, l'image ci-dessous vous aidera à mieux comprendre la transformation. (cliquez sur l'axe)
Le cisaillement
Le cisaillement, ou inclinaison, permet d'inclier un axe par rapport à l'autre.
On le note tranform="skewX(val)" ou tranform="skewY(val)".
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g transform="skewX(2)"> [...] </g> </svg>
Si votre navigateur est compatible avec le SVG, les images ci-dessous vous aideront à mieux comprendre la transformation. (cliquez sur le rectangle)
Cumuler les transformations
Un dernier point à savoir, il est possible de cumuler les transformations. Pour cela, il suffit de toutes les mettre dans l'attribut transform, en les séparant par un espace.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="70px"> <g transform="translate(40, 20) rotate(60) scale(1, -1)"> [...] </g> </svg>
Si votre navigateur est compatible avec le SVG, l'image ci-dessous vous aidera à mieux comprendre la transformation. (cliquez sur l'axe)
Les filtres
SVG dispose de nombreuses primitives de filtre.
On appelle primitive de filtre chaque effet particulier (flou, déformation, effet de lumière...).
Chaque primitive dispose d'au moins deux attributs, in et result qui permettent de faire travailler ces primitives en cascade.
Un filtre est un ensemble de n primitives combinées.
Un exemple simple, le flou Gaussien
<svg width="400" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 160 160"> <defs> <filter id="MonFiltre" filterUnits="userSpaceOnUse" x="-10" y="-10" width="200" height="200"> <feGaussianBlur id="blur" in="SourceGraphic" stdDeviation="10" result="flou"/> </filter> </defs> <ellipse id="ell" cx="70" cy="45" rx="55" ry="30" fill="#fe850f" filter="url(#MonFiltre)"/> </svg>
Si votre navigateur est compatible avec le SVG, l'image ci-dessous vous aidera à mieux comprendre l'effet. (cliquez sur l'ellipse)
Un filtre plus complexe
<svg width="800" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 800 100"> <defs> <filter id="BoutonFiltre" filterUnits="userSpaceOnUse" x="-10" y="-10" width="800" height="200"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="flo"/> <feOffset in="flo" dx="4" dy="4" result="flou"/> <feSpecularLighting in="flo" surfaceScale="5" specularConstant=".75" specularExponent="30" lighting-color="#ffde0f" result="out"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="out" in2="SourceAlpha" operator="in" result="specout"/> <feComposite in="SourceGraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="peintureeclaire"/> <feMerge> <feMergeNode in="flou"/> <feMergeNode in="peintureeclaire"/> </feMerge> </filter> </defs> <g filter="url(#BoutonFiltre)"> <ellipse id="ell" cx="150" cy="45" rx="105" ry="30" fill="#de8500"/> <text x="150" y="45" text-anchor="middle" fill="black" font-size="12pt" dominant-baseline="middle">Trop bien l'Xposé !!!</text> </g> </svg>
Si votre navigateur est compatible avec le SVG, l'image ci-dessous vous montrera le résultat de ce filtre.
Pour en savoir plus sur l'ensemble des primitives existantes, cliquez ici.