SVG: OPTIMIZE & CLEAN FOR DEV
SVG
Scalable Vector Graphics
qu'est-ce que c'est ?
- Format d'image vectoriel basé sur XML
- Premier draft de la W3C en ... ?
- v1.1 - 2011
- v2 RC - Septembre 2016
puis-je l'utiliser ?
QUAND L'UTILISER ?
- Complexité d'image assez faible (pas une photo ou un dessin)
- Besoin d'animation
- Besoin de Scalabilité/Mise à l'échelle
- Image inline (mieux que du Base64)
- Accessibilité à tout ou partie de l'image
- SEO
contenu
- Balises et attributs (viewBox, g..)
- Path
- Shapes (Circle, Triangle, Rectangle, Polygon)
- Fill
- Clipping, Masking, Composition
- Filters
- Links
- Scripting
- Metadata
- (Animation - SMIL)
THE VIEWBOX
- Balises et attributs (viewBox, g..)
- Path
- Shapes (Circle, Triangle, Rectangle, Polygon)
- Fill
- Clipping, Masking, Composition
- Filters
- Links
- Scripting
- Metadata
- (Animation - SMIL)
path en detail
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- Z = closepath
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>
path en detail
C/c = Cubic Bézier Curve
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>path en detail
S/s = Smooth Curve To
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" />path en detail
Q,q = Quadratic Bézier Curve
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>path en detail
T,t = Smooth Quadratic Bézier Curve To
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>path en detail
A,a = Elliptical Arc
<path d="M230 230 A 45 45, 0, 1, 1, 275 275 Z" fill="blue"/>SKETCH
FONCTIONS Les PLUS INTEressantes pour le svg
STROKE VS FILL
Avantages et inconvénients
Questions à se poser avant de créer l'icône :
- Ai-je absolument besoin d'avoir une forme pleine ?
- Mon icône doit il pouvoir changer de couleur globalement ?
svg {
fill: $my-color;
// OR
path {
stroke: $my-color;
}
}
ORGANISATION DES FORMES
- Sketch génère l'ordre du XML selon l'organisation des différents groupes
- Les formes non unifiées créeront deux formes séparées en XML)
- Les masques, gradients, flous etc iront dans une balise <defs>...</defs> au début du XML
attention aux valeurs
Des valeurs approximatives donnent des résultats...
approximatifs !
IMAGE VS UTILISATION
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...)
OPTIMIZE
Pourquoi optimiser ?
- Le contexte: on est sur le web
- On veut un fichier le moins lourd possible
- On veut un fichier un peu plus lisible
- Contrôler la sortie des logiciels de dessin et de conception vectoriel (on ne fait pas encore confiance aux robots)
- Un sprite ? :)
QUELLES optimisations ?
- Supprimer les choses inutiles (balises générées par les navigateurs, commentaires, metadatas...)
- Arrondir/Tronquer les valeurs (longueur du SVG diminuées drastiquement)
- Fusionner certains paths (si pas de besoin de transformation ultérieur)
- Supprimer ou fusionner des groupes potentiellement inutiles
- Minifier le maximum de choses (les ids en particulier)
SVGO ET SVGOMG à la rescousse, mais pas que..
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...
CONCLUSION
& Questions
SVG: Optimize & Clean for Development
By malikba
