Formes SVG de base : `rect`, `circle`, `path`

SVG utilise un système de coordonnées dont le point (0,0) se trouve dans le coin supérieur gauche. X augmente vers la droite ; Y augmente vers le bas. La fenêtre d’affichage est définie par les attributs de largeur et de hauteur ; l’espace de coordonnées est défini par l’attribut viewBox.

Dessinez des rectangles avec <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. Les valeurs rx et ry arrondissent les coins. Le remplissage et le contour sont contrôlés par les attributs correspondants ou par CSS. Si x et y sont omis, leur valeur par défaut est 0,0.

Dessinez des cercles avec <circle cx="100" cy="100" r="50">. cx et cy indiquent les coordonnées du centre ; r indique le rayon. Les cercles SVG n’ont pas d’équivalent aux paramètres d’angle d’arc du canevas : ils sont toujours complets.

Dessinez des ellipses avec <ellipse cx="100" cy="100" rx="80" ry="40">. rx indique le rayon horizontal ; ry, le rayon vertical. Une ellipse dont rx et ry sont égaux équivaut à un cercle.

<line x1="0" y1="0" x2="100" y2="100"> trace un seul segment de droite. <polyline points="0,0 100,50 200,0"> trace des segments de droite reliés entre eux par une série de paires de coordonnées. Ni l’un ni l’autre n’est automatiquement fermé.

<polygon points="100,10 190,190 10,190"> fonctionne comme une ligne brisée, mais la forme est automatiquement fermée : un segment relie le dernier point au premier. Utilisez un polygone pour les formes fermées comme les triangles, les étoiles et les autres polygones réguliers.

Le tracé est la forme SVG la plus puissante : il peut représenter toute combinaison de lignes, d’arcs et de courbes. L’attribut d contient les commandes du tracé : M (moveTo), L (lineTo), A (arc), C (courbe de Bézier cubique), Q (courbe de Bézier quadratique), Z (closePath).

Les commandes en majuscules utilisent des coordonnées absolues ; celles en minuscules utilisent des coordonnées relatives. M 100 50 se déplace jusqu’à (100,50). L 200 150 trace une ligne jusqu’à (200,150). Z ferme le tracé. A rx ry rotation large-arc sweep x y trace un arc.

Les formes SVG acceptent les propriétés CSS suivantes : fill, stroke, stroke-width, opacity et stroke-dasharray. Utilisez des classes CSS sur les éléments SVG pour obtenir une mise en forme facile à maintenir. Les transitions CSS fonctionnent sur le remplissage, le contour et l’opacité, ce qui permet des changements d’état fluides.

L’élément <g> regroupe des éléments SVG. Appliquez une transformation, un remplissage ou un contour au groupe pour agir sur tous ses éléments enfants. Le regroupement permet de composer des formes complexes qui se déplacent ou se transforment ensemble, comme un cadran d’horloge avec tous ses composants.

Définissez des formes réutilisables dans <defs> : symboles, dégradés et chemins de découpe. Référencez-les avec <use href="#id">. Vous évitez ainsi de dupliquer des données de tracé complexes et pouvez appliquer des transformations et une mise en forme propres à chaque instance via l’élément use.

Quelle est la différence entre une ligne brisée et un polygone en SVG ?

SVG fournit des éléments de forme déclaratifs (rectangle, cercle, ellipse, ligne, ligne brisée, polygone) ainsi que l’élément de tracé polyvalent pour créer des formes complexes à l’aide des commandes M, L, A, C, Q et Z. La mise en forme CSS, le regroupement avec g et la réutilisation via defs/use permettent de créer des graphiques vectoriels faciles à maintenir et évolutifs, intégrés directement dans HTML.