Dessin vectoriel pour le web
SVG : Scalable Vector Graphics, affiche des éléments graphiques vectoriels.
Elaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Adobe, Microsoft, Xerox...
Pour répondre au besoin de produire des graphiques légers, dynamiques et interactifs.
Le SVG s'est très vite placé comme une alternative à Animate CC et à ce titre, Adobe a intégré ce langage dans Illustrator et Golive.
Il est basé sur le langage de balisage XML.
Les balises vont donc intégrer le DOM comme tout autre élément HTML.
L’interaction se fait donc de la même manière qu’avec les balises HTML :
Il peut être manipulé via JavaScript et stylé grâce au CSS.
Adaptation de l'affichage à différents medias et à des tailles différentes.
Indexation du texte faisant partie de l'illustration.
Un ensemble de primitives sont disponibles pour dessiner : rectangle, carré, cercle, ligne... ainsi que les Paths pour des dessins plus complexes.
SVG définit un certain nombre d'éléments graphiques de base. Voici la liste des éléments les plus importants :
- Texte : text.
- Rectangle : rect.
- Cercle circle et l'ellipse : ellipse.
- Lignes : line et poly-lignes : polyline.
- Polygones : polygon;
- Formes arbitraires : path.
Exemple simple utilisant la méthode de fragments SVG intégrés dans le code HTML5 ou SVG in-line :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre</title>
</head>
<body>
<svg height="120px" width="120px">
<rect id="myRect" x="10px" y="10px" height="100px" width="100px" fill="blue"
style="stroke:#333; stroke-width:10px; stroke-linejoin:round;" />
</svg>
</body>
</html>
Résultat
- La couleur de remplissage est définie par l'attribut fill
- L'apparence du trait est définie par les attributs de couleur stroke et de largeur stroke-width.
- L'opacité du contour : stroke-opacity(de 0 à 1)
- L'opacité du remplissage : fill-opacity(de 0 à 1)
- L'écriture avec l'attribut style est équivalente.
Remplissage et contour.