Softonic

Constructeur de chemin SVG

Étape 1 / 2

Cliquez sur une zone vide pour ajouter des points. Faites glisser les points pour les déplacer. Supprimez le dernier avec le bouton.

Suivant

L’attribut d sur un SVG <path> est un petit langage spécifique au domaine : M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Chaque lettre est une commande (moveto, lineto, cubic Bézier, close-path), chaque nombre est une coordonnée ou un point de contrôle. Ce constructeur vous permet de cliquer sur le canevas pour placer des points d’ancrage et de les faire glisser pour remodeler, en voyant le chemin se dessiner en temps réel. Activez le lissage pour transformer les segments droits en courbes de Bézier cubiques, fermez la forme, puis copiez l’attribut d généré ou le SVG complet.

Comment construire un chemin

  1. 1

    Cliquez pour ajouter des points

    Chaque clic place un point d'ancrage sur le canevas ; le chemin les relie dans l'ordre, en commençant par un `M` (moveto).

  2. 2

    Faites glisser pour remodeler

    Faites glisser n'importe quel point pour le déplacer, et supprimez le plus récent avec le bouton. Le minimum est de deux points.

  3. 3

    Droit ou lisse

    Laissez les points reliés par des segments droits `L`, ou activez Lisser pour les transformer en courbes de Bézier cubiques `C`.

  4. 4

    Fermez ou laissez ouvert

    Activez Fermer le chemin pour ajouter un `Z` de retour au départ, ou laissez-le ouvert pour une polyligne/tracé.

  5. 5

    Copiez l'attribut d

    La chaîne `d` générée est propre et séparée par des espaces, prête à être collée dans n'importe quel SVG ; vous pouvez aussi copier ou télécharger le SVG complet.

Feuille de triche des commandes de chemin SVG

Le constructeur visuel ci-dessus produit les commandes M, L, C et Z (moveto, ligne droite, Bézier cubique et fermeture du chemin). Le reste du jeu de commandes ci-dessous sert de référence pour lire et modifier à la main toute chaîne d que vous collez ailleurs. Les lettres majuscules utilisent des coordonnées absolues ; les minuscules utilisent des décalages relatifs par rapport à la position actuelle du stylo.

Cmd Nom Syntaxe
M / m Moveto M x y
L / l Lineto L x y
H / h Lineto horizontal H x
V / v Lineto vertical V y
C / c Cubique Bézier C x1 y1 x2 y2 x y
S / s Cubique Bézier lisse S x2 y2 x y
Q / q Quadratique Bézier Q x1 y1 x y
T / t Quadratique Bézier lisse T x y
A / a Arc A rx ry x-axis-rot lg sweep x y
Z / z Fermer le chemin Z

Un exemple travaillé : une coche arrondie

M 4 12 L 10 18 L 20 6

Trois commandes : déplacer à (4, 12), ligne à (10, 18), ligne à (20, 6). Ajoutez stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" au chemin et vous avez un glyphe de coche propre.

La commande arc est la plus difficile

A rx ry x-axis-rotation large-arc-flag sweep-flag x y prend sept nombres :

  • rx, ry, rayons de l’ellipse
  • x-axis-rotation, rotation de l’ellipse en degrés
  • large-arc-flag, 0 pour l’arc court, 1 pour le long
  • sweep-flag, 0 pour le sens antihoraire, 1 pour le sens horaire
  • x, y, point final

Inversez les drapeaux un par un pour voir comment les mêmes deux points de terminaison peuvent se connecter de quatre manières différentes.

Conseils

  • Gardez les nombres petits et ronds. Snap les coordonnées à la grille de pixels ou demi-pixel ; évitez 17 décimales.
  • Préférez les commandes majuscules lorsque votre chemin est autonome. Les minuscules (relatives) sont pratiques lorsque vous allez traduire le chemin plus tard.
  • Fermez uniquement lorsque vous remplissez. Si un chemin est strictement tracé, Z n’ajoute aucun changement visuel et économise un octet.
  • Passez par SVGO. Les zéros à la fin, les espaces en double et les commandes répétées se compressent bien.

Questions fréquentes

Les coordonnées dans d sont dans les mêmes unités que le viewBox. Un chemin conçu pour viewBox="0 0 24 24" placé sur viewBox="0 0 100 100" apparaîtra dans le quart supérieur gauche. Soit vous redimensionnez les coordonnées, soit vous redimensionnez le viewBox.

Lorsque vous prévoyez de traduire ou de répéter le chemin. Les commandes relatives gardent la forme portable, vous pouvez ajouter un nouveau M n’importe où et tout ce qui suit se déplace avec.

Oui. <polyline points="0,0 10,10 20,0"> devient <path d="M 0 0 L 10 10 L 20 0" />. Un polygone ajoute un Z final. La plupart des optimiseurs le font automatiquement car les chemins se compressent mieux.

Pour des effets de dessin, utilisez CSS stroke-dasharray + stroke-dashoffset. Pour déplacer un élément le long du chemin, utilisez SMIL <animateMotion> avec href pointant vers l’ID du chemin.

Non. Les commandes de chemin sont calculées dans le navigateur et ne sont jamais envoyées nulle part.

Outils similaires

Sélecteur de couleurs Material Design

Parcourez la palette de couleurs Material Design. Copiez n'importe quelle teinte (50 à A700) en HEX, RGB ou HSL d'un simple clic.

Générateur de papier ligné

Créez gratuitement du papier ligné imprimable. Choisissez une réglure standard, large ou étroite, définissez l'interligne en mm, le format de page et une ligne de marge, puis imprimez ou téléchargez le SVG.

Filtre Pop Art d'image

Transformez n'importe quelle photo en une composition pop art inspirée de Warhol avec des couleurs vives, des tons posterisés et un contraste élevé.

Créateur de planches-contact

Disposez vos photos sur des planches-contact A4 ou Letter avec légendes, recadrage et aperçu, puis téléchargez les pages en JPEG ou en PDF.

Générateur de papier millimétré

Créez du papier quadrillé imprimable en ligne : choisissez une grille ou des points, réglez l'espacement en mm, sélectionnez A4 ou Letter et une couleur de trait, puis imprimez ou téléchargez un SVG net.

Convertisseur d'images en niveaux de gris

Convertissez des images couleur en niveaux de gris dans votre navigateur. Gratuit et privé, rien n'est envoyé.

Outil disponible dans d’autres langues