Tracer une étoile en SVG

Après plusieurs semaines de temps supplémentaire au travail, je retrouve un semblant de vie normale. J'ai pris du retard sur toutes mes obligations, j'ai des heures de sommeil à récupérer et malgré l'épuisement, je trouve le moyen de me réveiller à 4h30 du matin et ce même si je suis en vacances. Alors quoi de mieux que de profiter de l'insomnie pour dessiner des étoiles en SVG et en faire un petit article à la volée...

Dans un fichier texte vierge, insérez le code ci-dessous et enregistrez-le sous le nom etoile.svg.

<?xml version="1.0" standalone="yes"?>
<svg version="1.1"
viewBox="0.0 0.0 360.0 270.0"
stroke-miterlimit="10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
    d="M 120
       74 L 149
       74 L 158
       48 L 167
       74 L 196
       74 L 172.5
       90 L 181.5
       116 L 158
       100 L 134.5
       116 L 143.5
       90
       Z"
    fill="#FFD300"
    fill-opacity="0.4"
    stroke="#FFD300"
    stroke-width="3.0"
>
</path>
</svg>

Comme vous l'auriez fait pour une image PNG, JPG ou GIF, vous pouvez spécifier le chemin du fichier comme source de la balise IMG :

<img src="etoile.svg" />

Résultat + variante aux coins ronds


Définition SVG

• viewBox : le canvas défini par les coordonnées x, y, largeur et hauteur
• stroke-miterlimit : la distance du biseautage de l'angle de deux segments qui se rencontrent

Path

• d : les données du tracé où
• M = move to
• L = line to
• Z = fin du tracé
• fill : couleur de remplissage
• fill-opacity : opacité du remplissage (valeur entre 0 et 1)
• stroke : couleur du contour
• stroke-width : épaisseur du contour
• stroke-linejoin : la bordure des jointures de lignes
• Pour des coins arrondis, il suffira d'ajouter la propriété stroke-linejoin="round"