Comment créer des illustrations personnalisées en SVG
Envie de réaliser tes propres illustrations sur mesure pour ton site ou ton appli sans passer par un logiciel de graphisme ? Le SVG (Scalable Vector Graphics) est parfait pour ça : léger, lisible et entièrement personnalisable via code. Je te montre comment t’y prendre pas à pas.
1. Les bases d’un fichier SVG
Un SVG est un fichier XML qui décrit des formes géométriques (cercles, rectangles, lignes…) et leurs attributs. Voici la structure minimale :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- formes ici -->
</svg>
2. Dessiner des formes simples
Voici quelques formes basiques que tu peux combiner pour créer une illustration :
<circle cx="50" cy="50" r="40" fill="#ff6600" />
<rect x="10" y="10" width="80" height="50" fill="#33cc99" />
<line x1="0" y1="0" x2="100" y2="100" stroke="#333" stroke-width="2" />
3. Personnaliser les couleurs et les contours
Chaque forme peut recevoir un fill (couleur de remplissage), un stroke (contour) et un stroke-width (épaisseur). Exemple :
<circle cx="60" cy="60" r="50" fill="#fff" stroke="#333" stroke-width="4" />
4. Grouper et organiser avec <g>
Pour organiser tes éléments et leur appliquer des styles communs ou des transformations, tu peux les grouper :
<g fill="#ffcc00">
<circle cx="50" cy="50" r="30" />
<rect x="40" y="40" width="20" height="20" />
</g>
5. Ajouter du texte dans tes illustrations
Tu peux intégrer du texte vectoriel dans ton SVG :
<text x="20" y="100" font-size="20" fill="#333">Hello SVG</text>
6. Animer tes illustrations
Pour dynamiser ton illustration, ajoute des animations en CSS ou directement dans le SVG :
circle {
transition: fill 0.3s;
}
circle:hover {
fill: #33cc99;
}
Essaie d’ajouter ça dans ton CSS et survole ce cercle :
7. Créer des formes complexes avec le path
La balise <path> permet de dessiner des formes libres avec des commandes de tracé. Exemple :
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="transparent" stroke="#333" stroke-width="2" />
Conclusion
Voilà de quoi démarrer sereinement tes propres illustrations en SVG ! Tu peux assembler ces éléments pour dessiner des icônes, des avatars, des formes décoratives et bien plus. L’avantage : c’est du code léger, adaptable et ultra-personnalisable. N’hésite pas à expérimenter ✨
🎨 Pack d'icônes SVG dessinées à la main
Ajoute une touche unique et créative à ton site grâce à ma collection d'icônes vectorielles personnalisables.
✨ Découvre la collection
Commentaires
Aucun commentaire pour cet article.
Veuillez vous connecter pour laisser un commentaire.