> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Arrondir les coins SVG en modifiant la forme remplie > Arrondis un coin SVG rempli avec un arc tangent, vérifie si le rayon tient sur ses bords et comprends pourquoi une jointure de contour ronde laisse le fond d’origine inchangé. Source: https://perfectvector.com/fr/blog/round-svg-path-corners Language: fr Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Pour arrondir le coin rempli d’un chemin SVG, change sa géométrie. Arrête chaque segment droit adjacent avant le sommet, puis relie ces nouvelles extrémités par une courbe. `stroke-linejoin="round"` change la peinture du contour à une jointure ; cela laisse en place la forme remplie d’origine. Ce tutoriel arrondit un coin à angle droit d’un emblème rempli original. Il te faut un éditeur de texte brut et un navigateur. À la fin, tu disposeras d’un SVG complet avec un raccord circulaire de 20 unités, d’un contrôle de rayon adapté et du fichier anguleux original à comparer ou à rétablir. Un raccord arrondi remplace un angle vif par une courbe qui rejoint tangentiellement ses bords adjacents. L’exemple utilise un quart d’arc circulaire entre des bords droits horizontal et vertical. Il n’arrondit pas automatiquement des chemins de Bézier vectorisés quelconques. ## Choisis le changement nécessaire à ton illustration La [référence de stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) définit la manière de dessiner le contour aux coins d’un chemin. Utilise une jointure ronde si c’est cette bordure peinte que tu souhaites changer. Pour modifier une silhouette remplie, modifie son véritable chemin. | Ton objet ou ton besoin | Point de départ adapté | Ce qui change | | -------------------------------------- | ----------------------------------------- | ------------------------------------- | | Rectangle SVG simple | Définir `rx` ou `ry` sur le rectangle | La géométrie des coins du rectangle | | Chemin anguleux avec contour | Définir une jointure de contour ronde | La peinture autour du chemin existant | | Polygone ou emblème rempli | Remplacer un coin choisi par une courbe | La silhouette remplie | | Chemin vectorisé complexe avec courbes | Inspecter et modifier la jonction choisie | Dépend des véritables segments | Pour un rectangle simple, la [référence SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) documente `rx` et `ry`. Notre emblème possède aussi un bord diagonal ; le convertir en rectangle arrondi changerait donc plus que le coin choisi. Si le seul problème est une longue pointe sur un contour, commence par le [diagnostic des pointes de jointure en onglet](https://perfectvector.com/fr/blog/svg-miter-spikes). Cet article modifie plutôt la géométrie remplie. ## Enregistre l’original anguleux Copie ce fichier complet dans `emblem-original.svg` et ouvre-le dans un navigateur. Le sommet supérieur droit est (170, 30). Son bord entrant est horizontal ; son bord sortant descend jusqu’à (170, 100). ```xml ``` Garde ce fichier comme maître de comparaison. Ajouter `stroke="#df9d34"`, `stroke-width="8"` et `stroke-linejoin="round"` à ce chemin lui donne une bordure peinte arrondie, tandis que son fond foncé atteint toujours le coin vif d’origine. ## Remplace ce coin par un arc de 20 unités Déplace la fin de la ligne entrante de 20 unités à gauche du sommet, à (150, 30). Déplace le début de la ligne sortante de 20 unités vers le bas, à (170, 50). Un cercle centré à (150, 50) de rayon 20 relie ces points par un quart d’arc. Enregistre ce second fichier complet sous `emblem-rounded.svg` : ```xml ``` `A20 20 0 0 1 170 50` désigne un arc circulaire de rayons horizontal et vertical de 20, de rotation nulle, prenant le petit arc avec l’indicateur de balayage 1 et se terminant à (170, 50). La [spécification des chemins SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) définit ces paramètres. Pour ce coin parcouru dans le sens horaire, ils choisissent le quart de cercle voulu. Le [guide des indicateurs d’arc](https://perfectvector.com/fr/blog/svg-arc-flags) aide à diagnostiquer un arc qui suit le mauvais trajet. Le rayon du cercle est vertical à la première extrémité et horizontal à la seconde. Sa tangente suit donc la ligne entrante horizontale et la ligne sortante verticale. Une courbe peut sembler arrondie tout en créant une cassure à la jointure ; cette construction donne à ces bords précis des directions tangentes correspondantes. ![Un emblème rempli anguleux avec contour peint rond, le même emblème avec raccord de chemin de vingt unités et une construction au rayon trop grand dépassant le sommet suivant](https://perfectvector.com/blog/round-svg-path-corners/fillet-comparison.webp) *Le premier exemple change la peinture du contour. Le second change la limite du fond foncé. Le troisième montre le résultat invalide lorsque le bord adjacent plus court est ignoré ; la vérification du rayon rejette ce cas.* ## Vérifie que le rayon tient sur les bords disponibles À ce coin de 90 degrés, un raccord circulaire consomme sur chaque bord adjacent une distance égale à son rayon. Le trajet entrant mesure 140 unités, mais le sortant seulement 70. Pour cette construction d’un seul coin, un rayon positif doit donc être inférieur ou égal à 70 ; choisis un rayon plus petit si tu veux conserver une portion droite sur le bord sortant. La fonction suivante est volontairement limitée à cet emblème et à ce coin précis. Exécute-la dans une console JavaScript ou dans Node.js pour générer la valeur `d` de remplacement. ```javascript function roundEmblemCorner(radius) { const incomingLength = 170 - 30; const outgoingLength = 100 - 30; if (!Number.isFinite(radius) || radius <= 0 || radius > Math.min(incomingLength, outgoingLength)) { throw new Error('Radius must be positive and fit both adjacent edges.'); } return `M30 30H${170 - radius}` + `A${radius} ${radius} 0 0 1 170 ${30 + radius}` + 'V100L110 160H30Z'; } roundEmblemCorner(20); // M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z ``` Avec un rayon de 80, une construction naïve terminerait l’arc à (170, 110), au-delà du sommet suivant (170, 100). Le `V100` suivant inverserait la direction. Rejette ce rayon au lieu d’accepter ce que le navigateur dessine. Pour d’autres angles à bords droits, la distance tangente dépend de l’angle. Pour un coin convexe ordinaire d’angle intérieur θ, cette distance vaut `r / tan(θ / 2)`. Si tu arrondis les deux extrémités d’un bord commun, les deux distances consommées doivent tenir ensemble sur ce bord. Les coins concaves, courbes existantes et formes composées demandent d’autres décisions géométriques ; cette fonction ne les gère pas. ## Vérifie la silhouette modifiée, puis garde la source 1. Ouvre les deux SVG complets à la même taille et sur le même fond. 2. Retire temporairement le contour de la version à jointure peinte. Son fond doit correspondre à l’original anguleux. 3. Compare la limite supérieure droite de la version arrondie. Les autres côtés, le bord diagonal et le placement global doivent correspondre à l’original. 4. Exécute la vérification de rayon avec 20, puis 80. Le premier produit le chemin montré ; le second déclenche l’erreur de rayon. 5. Inspecte le SVG enregistré dans sa véritable destination. Rétablis l’original si l’arrondi supprime une caractéristique délibérée ou si la destination change son apparence. Note de méthode : nous avons rendu dans Chromium le chemin original, celui à contour rond et celui à raccord arrondi. Un point de contrôle de fond à (169, 31) était dans les deux premières formes et hors de la forme arrondie. La fonction exacte ci-dessus acceptait 20 et rejetait 80. Nous avons aussi vérifié les deux extrémités de l’arc selon le rayon et les directions tangentes adjacentes. Cela vérifie l’exemple à bords droits fourni, pas un algorithme général de raccord ni la sortie d’une machine de découpe. Si la courbe gonfle vers l’extérieur, inspecte son extrémité et l’indicateur de balayage. Si une cassure reste, vérifie que la tangente correspond au segment voisin ; le [guide des jointures lisses de Bézier](https://perfectvector.com/fr/blog/svg-bezier-smooth-joins) explique cette réparation distincte. Le [guide d’édition SVG](https://perfectvector.com/fr/blog/how-to-edit-an-svg) couvre l’ouverture, l’inspection et la conservation d’un maître exploitable. ## Où intervient PerfectVector avant l’édition des coins PerfectVector peut récupérer des chemins vectoriels lorsque l’illustration n’existe que comme image matricielle. Inspecte d’abord le contour récupéré, puis décide quels coins modifier dans une copie. Le [processus image vers vecteur](https://perfectvector.com/fr/image-to-vector) fournit l’étape de récupération ; il n’applique pas automatiquement cette construction de raccord. Utilise le fichier vectoriel original lorsqu’il est disponible. Un contour vectorisé peut contenir des segments de Bézier et de petites irrégularités qui ne correspondent pas à cet exemple à bords droits. Redessiner un emblème simple peut être plus facile qu’arrondir chaque jonction vectorisée. Garde la forme approuvée avant tout nouveau dessin volontaire et utilise les [guides de processus du blog](https://perfectvector.com/fr/blog) pour le prochain contrôle de livraison. ## Questions fréquentes ### Pourquoi une jointure de contour ronde laisse-t-elle mon coin de fond vif ? La jointure contrôle le contour peint autour du chemin. Le fond suit la géométrie existante ; il garde donc le coin d’origine jusqu’à ce que tu remplaces cette géométrie par une courbe. ### Puis-je utiliser la fonction sur n’importe quel chemin SVG ? Non. Elle traite un coin à angle droit précis de l’emblème à bords droits montré. Les autres angles, coins concaves, courbes existantes et contraintes de bords communs demandent leur propre construction. ### Cela rend-il un fichier prêt pour la découpe ? Cela change une forme remplie dans l’exemple. Inspecte la géométrie enregistrée et réalise les contrôles requis par ta véritable machine ou ton procédé de production ; ce test navigateur ne prouve pas un résultat physique de découpe. ## Sources 1. [MDN — SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) — définit le réglage de peinture du contour distingué de la géométrie remplie dans la comparaison. 2. [MDN — SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) — documente les réglages de rayon plus simples des rectangles ordinaires. 3. [W3C — Commandes d’arc elliptique SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — définit rayons, indicateurs et extrémité de l’arc utilisé dans le chemin arrondi complet. *** Si les chemins d’origine manquent, [récupère ton illustration avec PerfectVector](https://perfectvector.com/fr/image-to-vector). Compare son contour à la référence, enregistre le maître récupéré et teste les modifications volontaires de coins dans une copie distincte à la taille prévue. ## Explore - [Read the HTML article](https://perfectvector.com/fr/blog/round-svg-path-corners) - [Commandes SVG relatives : suivre le point courant](https://perfectvector.com/fr/blog/svg-relative-path-commands.md) - [SVG importé à la mauvaise taille : diagnostic et correction](https://perfectvector.com/fr/blog/svg-imports-wrong-size.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)