Scalable Vector Graphics
M,L,H,V,Z - coordonnées absolues
m,l,h,v,z - coordonnées relatives
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>
C/c = Cubic Bézier Curve
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
S/s = Smooth Curve To
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" />
Q,q = Quadratic Bézier Curve
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
T,t = Smooth Quadratic Bézier Curve To
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
A,a = Elliptical Arc
<path d="M230 230 A 45 45, 0, 1, 1, 275 275 Z" fill="blue"/>
Avantages et inconvénients
Questions à se poser avant de créer l'icône :
svg {
fill: $my-color;
// OR
path {
stroke: $my-color;
}
}
Des valeurs approximatives donnent des résultats...
approximatifs !
Dernière question à se poser :
Le/Les Développeurs vont-ils se servir de ce SVG en tant qu'image (icône, illustration..)
ou
en tant qu'asset modifiable (animation, changements de couleurs, interactions utilisateurs...)
Rien n'empêche de vérifier le fichier à la main et d'apporter des modifications supplémentaires (à condition de savoir ce qu'on fait)
On peut vouloir faire une réorganisation ultérieure des éléments du fichier
Ajouter des classes sur certains éléments...
& Questions