Pointes SVG : corriger les angles sans les tronquer

Une pointe en forme d’aiguille sur un contour SVG provient généralement d’un raccord en onglet à un angle aigu. Si tu ne veux pas cette pointe, réduis stroke-miterlimit ou choisis un raccord biseauté ou arrondi. Si la pointe appartient au dessin mais que son extrémité disparaît, donne plus d’espace au contour peint dans le viewBox. Ce sont deux corrections différentes : l’une modifie la forme de l’angle, l’autre ce que le fichier peut afficher.

Conserve une copie du SVG original pendant les tests. Un logo avec une pointe volontaire peut nécessiter de conserver son onglet, tandis qu’une pointe parasite sur un contour importé peut demander un raccord plus plat. Détermine d’abord quel angle doit être préservé.

Pourquoi un angle étroit produit une pointe

Un tracé avec contour possède une largeur de part et d’autre de sa ligne centrale. Avec stroke-linejoin="miter", les bords extérieurs du contour se prolongent jusqu’à leur intersection. Plus l’angle est aigu, plus cette intersection peut être éloignée. SVG utilise miter comme style de raccord initial, et la valeur initiale de stroke-miterlimit est 4, selon la définition de peinture SVG 2.

La limite est un rapport, et non une distance en pixels ou en unités SVG. Si la longueur de l’onglet divisée par stroke-width dépasse la limite, un raccord miter ordinaire devient un biseau. Une limite plus élevée autorise une pointe plus longue ; une limite plus basse aplatit davantage d’angles aigus. La référence MDN de la limite d’onglet montre la relation avec l’angle et précise qu’une propriété CSS peut remplacer l’attribut de présentation SVG.

Un tracé, quatre résultats visibles

Pour ce test, nous avons dessiné un segment d’emblème ouvert et anguleux avec d="M130 520 L180 200 L230 520" et un contour de 26 unités. Les deux premiers panneaux utilisent une limite d’onglet de 10. Le second applique une limite visible serrée à y=170, qui coupe la pointe. Le troisième utilise une limite de 4 : cet angle devient donc un biseau. Le quatrième utilise round. C’est une illustration contrôlée de ce tracé et de ce moteur, et non la promesse que tous les SVG importés auront les mêmes angles.

Le tracé central rouge en pointillés reste inchangé dans les quatre panneaux. Cela compte : changer le raccord du contour peut réparer le contour peint sans reconstruire le tracé vectoriel sous-jacent.

S’agit-il d’une pointe, d’un biseau ou d’une pointe tronquée ?

Une pointe recadrée peut ressembler à un biseau volontaire au premier regard. Zoome et vérifie si son extrémité s’aligne avec la limite du fichier. Le diagnostic des contours SVG qui disparaissent couvre d’autres causes de peinture et de découpage ; ce test isole l’angle en onglet.

Corrige l’angle sans modifier le mauvais élément

1. Trouve le tracé et son raccord effectif

Sélectionne l’angle dans un éditeur vectoriel ou recherche dans le texte SVG stroke, stroke-width, stroke-linejoin et stroke-miterlimit. Vérifie les groupes parents et les règles CSS, ainsi que les attributs du tracé lui-même. Une propriété stroke-miterlimit en ligne ou dans une feuille de style peut être prioritaire sur le même attribut de présentation de l’élément, comme le documente MDN.

Si l’objet sélectionné est un contour converti en forme remplie plutôt qu’un contour actif, cesse d’ajuster les réglages d’onglet. Tu dois modifier le tracé de ce remplissage ou revenir à l’original dont le contour n’a pas été développé. Si tout l’import a la mauvaise taille, effectue le test d’importation SVG de taille connue avant de compenser par une modification de largeur du contour.

2. Change un réglage de raccord sur une copie

Essaie d’abord un biseau lorsqu’un angle plat et géométrique est acceptable. Essaie un arrondi lorsque le dessin permet d’adoucir le bord. Conserve l’onglet lorsque la pointe précise fait partie du symbole et choisis une limite qui préserve uniquement les pointes voulues. La référence SVG stroke-linejoin définit les différences entre les formes de raccord courantes.

Voici une petite copie de test du tracé utilisé ci-dessus :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 590">
  <path d="M130 520 L180 200 L230 520"
    fill="none" stroke="#0d7991" stroke-width="26"
    stroke-linejoin="miter" stroke-miterlimit="10" />
</svg>

Remplace stroke-miterlimit par 4 pour observer le biseau de remplacement à cet angle précis. Rétablis ensuite 10 et remplace stroke-linejoin par round ou bevel. La valeur stroke-miterlimit n’a aucune pertinence pour ces deux derniers styles. Ne la réduis pas dans tout un logo parce qu’un seul angle pose problème ; les autres pointes peuvent être volontaires.

3. Donne assez de canevas à une pointe voulue

Si l’onglet est correct mais disparaît au bord, agrandis ou repositionne le viewBox autour du résultat peint, pas seulement des coordonnées du tracé. La définition SVG 2 du système de coordonnées explique le rectangle visible ; le contour peut dépasser les coordonnées de sa ligne centrale. Vérifie aussi les fenêtres SVG imbriquées et les chemins de découpage. Un découpage parent peut continuer à couper la pointe même après l’agrandissement du viewBox racine.

Ne considère pas un canevas plus grand comme une correction d’une aiguille accidentelle. Il ne fait qu’en révéler davantage. Inversement, remplacer le raccord par un biseau pour l’adapter à un plan de travail serré peut supprimer un angle dessiné volontairement. Compare le fichier livré au symbole original à sa taille réelle d’affichage ou d’impression. Si un prestataire mesure la taille physique du SVG, préserve la largeur et la hauteur prévues en modifiant délibérément la correspondance du viewBox.

4. Rouvre le fichier livré

Inspecte le résultat dans un navigateur et dans l’éditeur ou l’application de production cible. Vérifie la pointe à 100 % et à la taille finale prévue. Si la livraison exige des contours remplis plutôt que des contours actifs modifiables, conserve ton original, convertis les contours d’une copie de livraison dans un éditeur et inspecte la nouvelle limite remplie. Cette conversion change la géométrie ; ce n’est pas un réglage d’onglet réversible. Pour un contrôle plus large des remplissages et contours, consulte le guide de l’ordre de peinture SVG.

Lorsqu’un logo matriciel nécessite d’abord un nouveau tracé

Les réglages d’onglet fonctionnent uniquement sur un contour vectoriel actif. Si ton seul logo restant est un PNG ou JPG, la méthode de vectorisation des logos PerfectVector peut créer un SVG candidat avant la modification de ses angles. Compare la silhouette reconstruite, les petits espaces et la structure des tracés à la source. Un traçage peut représenter une ligne matricielle épaisse comme un contour rempli, et non comme la ligne centrale originale modifiable : ne t’attends donc pas à ce que stroke-miterlimit corrige automatiquement ce résultat. Redessine une pointe géométrique essentielle lorsqu’elle doit correspondre exactement à l’original de marque.

Si le SVG original existe, répare ce fichier au lieu de vectoriser une capture d’écran. Le guide de vectorisation des logos aide lorsqu’il faut réellement reconstruire un dessin à partir de pixels ; cet article commence lorsqu’un contour actif adapté existe déjà.

Contrôle final de l’angle

1. Enregistre l’original vectoriel intact.
2. Confirme si l’angle appartient à un contour actif ou à une forme remplie.
3. Compare miter, bevel et round sur le seul tracé concerné.
4. Si tu conserves un onglet, teste sa limite et laisse suffisamment d’espace visible pour toute la pointe peinte.
5. Rouvre le SVG dans sa destination réelle et vérifie-le à la taille finale.

FAQ

Pourquoi mon SVG présente-t-il des pointes aux angles aigus ? Un raccord en onglet prolonge les bords extérieurs du contour jusqu’à leur rencontre. À un angle aigu, cette intersection peut être éloignée du tracé central. Réduis la limite d’onglet ou utilise un biseau ou un arrondi lorsque la pointe est indésirable.

Pourquoi réduire stroke-miterlimit aplatit-il un angle ? Lorsque le rapport entre longueur d’onglet et largeur de contour dépasse la limite, un raccord en onglet ordinaire devient biseauté. Des valeurs plus faibles déclenchent ce remplacement à davantage d’angles. Conserve une limite plus élevée si la pointe est volontaire, puis vérifie ses limites.

Pourquoi ma pointe SVG reste-t-elle coupée après l’augmentation de la limite d’onglet ? La limite plus élevée peut allonger la pointe tandis que le viewBox ou un découpage la coupe encore. Agrandis la zone visible autour du contour peint ou repositionne le symbole, puis rouvre le SVG livré dans sa destination.

Sources

1. W3C — Peinture SVG 2 — Définit les raccords de contour, leurs valeurs initiales et le remplacement des onglets.
2. MDN — stroke-miterlimit — Explique le rapport de limite et sa relation avec les angles aigus.
3. MDN — stroke-linejoin — Définit les formes d’angle courantes des tracés avec contour.
4. MDN — CSS stroke-miterlimit — Documente la priorité de la propriété CSS sur l’attribut de présentation SVG.
5. W3C — Systèmes de coordonnées SVG 2 — Définit la relation entre viewBox et fenêtre utilisée pour vérifier les limites.

Si un symbole uniquement matriciel a besoin de tracés utilisables avant cette correction, crée un SVG candidat à partir du logo, inspecte sa géométrie, puis ajuste ou redessine les angles importants.