Formes SVG – bases, code SVG et exemples

Les formes vectorielles simples sont les briques des logos, diagrammes, icônes, graphiques et nombreuses illustrations SVG. Chaque forme de base est représentée par un élément dont les attributs définissent position, taille et style visuel. Vous pouvez modifier couleur de remplissage, opacité, arrondis, épaisseur de contour et plus encore.

Dans cet article, vous apprendrez à :

Créer rectangles, cercles, ellipses, lignes, polylignes et polygones SVG.
Lire les attributs de coordonnées de chaque forme.
Appliquer fill, stroke, opacité et coins arrondis.
Combiner plusieurs formes dans une image SVG.

SVG `<rect>` – élément rectangle

<rect> crée des rectangles et des rectangles à coins arrondis. Il est positionné par son angle supérieur gauche, puis dimensionné avec width et height.

Attributs de rectangle

Attribut	Description	Défaut
`x`	Coordonnée X de l’angle supérieur gauche	`0`
`y`	Coordonnée Y de l’angle supérieur gauche	`0`
`width`	Largeur du rectangle	–
`height`	Hauteur du rectangle	–
`rx`	Rayon horizontal des coins arrondis	`0`
`ry`	Rayon vertical des coins arrondis	`0`

1<svg width="500" height="550" xmlns="http://www.w3.org/2000/svg">
2    <rect x="60" y="100" width="70" height="40" rx="10" ry="10" style="fill:#778899; stroke:#FF4500; stroke-width:5; fill-opacity:0.7; stroke-opacity:0.6" />
3</svg>

Le rectangle commence en (60, 100), mesure 70 unités par 40, possède des coins arrondis et un contour orange. Un second rectangle sans rx/ry montre la différence avec des coins nets.

Deux rectangles SVG gris illustrant une forme de base et des coins arrondis

SVG `<circle>` – élément cercle

<circle> dessine un cercle. Sa position est définie par le centre cx, cy, et sa taille par le rayon r.

Attribut	Description	Défaut
`cx`	Coordonnée X du centre	`0`
`cy`	Coordonnée Y du centre	`0`
`r`	Rayon	–

1<svg width="300" height="550" xmlns="http://www.w3.org/2000/svg">
2    <circle cx="250" cy="100" r="60" style="fill:red; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7" />
3</svg>

Deux cercles SVG rouges montrant fill, stroke et opacité

Le cercle dépasse le viewport de 300 px; une largeur d’au moins cx + r est nécessaire pour l’afficher entièrement.

SVG `<ellipse>` – élément ellipse

<ellipse> crée une forme ovale. Elle utilise un centre (cx, cy) et deux rayons : rx horizontal et ry vertical.

Deux ellipses SVG

Les ellipses sont rendues dans l’ordre du document; une ellipse écrite plus tard apparaît au-dessus.

SVG `<line>` – élément ligne

<line> dessine un segment entre deux points. Il n’a pas de zone intérieure, donc il doit généralement utiliser stroke et stroke-width.

Attribut	Description
`x1`, `y1`	Point de départ
`x2`, `y2`	Point d’arrivée
`stroke`, `stroke-width`	Couleur et épaisseur visibles

Trois lignes SVG avec différentes couleurs et épaisseurs

SVG `<polyline>` – élément polyligne

<polyline> dessine une chaîne ouverte de segments droits. Elle est utile pour lignes brisées, courbes de graphique et contours simples.

Attribut	Description
`points`	Liste de paires x,y définissant les sommets
`fill`, `stroke`, `stroke-width`	Style visuel

Polyligne rouge en zigzag et triangle gris rempli

Utilisez fill="none" lorsqu’une polyligne doit se comporter comme une ligne plutôt qu’une forme remplie.

SVG `<polygon>` – élément polygone

<polygon> définit une forme fermée à partir d’une série de points. SVG relie automatiquement le dernier point au premier.

Polygone orange avec bordure violette illustrant une forme à quatre points

Comment créer des formes SVG

Créez l’élément <svg> extérieur avec width, height et xmlns.
Choisissez <rect>, <circle>, <ellipse>, <line>, <polyline> ou <polygon>.
Définissez les attributs de coordonnées et de taille requis.
Ajoutez fill, stroke, stroke-width ou opacité.
Prévisualisez le SVG et ajustez coordonnées, taille ou viewport si la forme est coupée.

Formes SVG de base – exemple combiné

Une image SVG peut combiner toutes les formes de base pour créer diagrammes, badges, icônes ou graphiques générés.

Illustration SVG composite montrant tous les éléments de forme de base

Erreurs courantes et corrections

Problème	Cause probable	Correction
La forme n’est pas visible	Viewport trop petit	Augmentez `width` / `height` ou ajustez `viewBox`
La forme est coupée	Coordonnées hors limites	Recalculez les coordonnées ou agrandissez le canvas
Le remplissage n’apparaît pas	`fill="none"` ou `fill-opacity="0"`	Définissez un `fill` valide
Le contour est invisible	`stroke-width="0"` ou `stroke` absent	Définissez `stroke` et un `stroke-width` positif
Les coins arrondis ne changent rien	`rx` / `ry` absents ou nuls	Définissez `rx` et `ry`
Les éléments se chevauchent	SVG rend dans l’ordre du document	Réordonnez les éléments ou utilisez des groupes

FAQ – formes SVG

Comment choisir le bon élément de forme SVG ?

Utilisez <rect> pour les rectangles, <circle> pour les formes rondes, <ellipse> pour les ovales, <line> pour un segment, <polyline> pour une chaîne ouverte et <polygon> pour une forme fermée.

Quelle est la différence entre polyline et polygon ?

<polyline> relie des points mais reste ouverte. <polygon> ferme automatiquement la forme en reliant le dernier point au premier.

Les formes SVG peuvent-elles utiliser fill et stroke ensemble ?

Oui. La plupart des formes peuvent combiner fill pour l’intérieur et stroke / stroke-width pour le contour.

Les formes de base peuvent-elles remplacer path data ?

Oui pour les rectangles, cercles, ellipses, lignes, polylignes et polygones simples. Utilisez Données de path SVG pour courbes, arcs et contours personnalisés.

Spécification et ressources associées

La section basic shapes définit <rect>, <circle>, <ellipse>, <line>, <polyline> et <polygon>.
Systèmes de coordonnées et unités SVG explique comment les coordonnées affectent le placement.
Remplissages et contours en SVG couvre stroke, line caps, joins et opacity.
Dessiner des formes SVG en Python montre comment créer ces formes avec Aspose.SVG for Python via .NET.

SVG viewBox SVG Path Data