Éditeur de tracés SVG

L'Éditeur de Tracés SVG est un outil en ligne gratuit qui analyse, visualise et transforme les chaînes de l'attribut d des tracés SVG avec un aperçu en direct, un tableau de commandes modifiable et des outils de tracé. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.

Toutes les commandes de tracé SVG : M, L, H, V, C, S, Q, T, A, Z, à la fois absolues et relatives.

Oui. L'onglet Commandes affiche chaque segment avec des champs d'arguments modifiables. Les modifications mettent à jour l'aperçu en temps réel.

Non. Toute l'analyse, le rendu et les transformations s'exécutent dans votre navigateur.

Oui, l'Éditeur de Tracés SVG est 100 % gratuit, sans inscription, sans frais cachés et sans limite d'utilisation. Tout le traitement se fait localement dans votre navigateur, garantissant une confidentialité totale.

Oui, l'Éditeur de Tracés SVG est entièrement adaptatif et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur tout appareil doté d'un navigateur web moderne, sans aucune application à télécharger.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement l'Éditeur de Tracés SVG dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'usage.

L'Éditeur de Tracés SVG prend en charge un large éventail de formats et de langages populaires. Consultez l'interface de l'outil pour la liste complète des options prises en charge.

Saisissez simplement votre entrée dans le champ prévu, ajustez les options à votre convenance et l'outil la traitera instantanément. Vous pouvez ensuite copier le résultat dans le presse-papiers ou le télécharger.

L'Éditeur de Tracés SVG fonctionne dans tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Dans un tracé SVG, une lettre de commande en majuscule est absolue, et en minuscule elle est relative. Les commandes absolues positionnent le stylo à des coordonnées exactes mesurées depuis l'origine du SVG, donc « L 90 90 » dessine toujours une ligne jusqu'au point 90,90. Les commandes relatives se déplacent quant à elles d'un décalage par rapport à la position actuelle du stylo, donc « l 90 90 » trace 90 unités vers la droite et 90 vers le bas depuis l'endroit où se trouve le stylo. Les tracés relatifs produisent souvent des fichiers plus légers et se translatent facilement en bloc, tandis que les tracés absolus sont plus faciles à lire et à repositionner avec précision. Cet éditeur analyse les deux formes et inclut une transformation en un clic qui convertit toutes les commandes entre absolu et relatif sans modifier la forme rendue, afin de comparer les deux styles de sortie côte à côte.

La longueur de tracé indiquée dans le panneau de statistiques est une approximation, pas une longueur d'arc exacte. Pour les segments droits comme L, H et V, elle est précise, mais pour les courbes — cubiques (C, S), quadratiques (Q, T) et arcs (A) — l'outil estime la longueur en échantillonnant des points le long de la courbe plutôt qu'en résolvant sa géométrie de manière analytique. Le résultat est suffisamment proche pour comparer deux tracés ou juger si une forme a globalement la taille attendue, mais il ne doit pas être utilisé lorsqu'une mesure exacte est nécessaire, par exemple pour définir un stroke-dasharray dans une animation de tracé précise. Dans ce cas, récupérez la valeur directement depuis l'élément rendu avec getTotalLength() dans le navigateur. Collez un tracé ici pour obtenir rapidement une estimation utile de la longueur, accompagnée de la boîte englobante et du nombre de commandes.

La plupart des chaînes de tracé surdimensionnées proviennent d'outils de conception qui exportent des coordonnées avec un grand nombre de décimales, comme « M 50.000123 4.998761 ». Le gain rapide le plus important consiste à arrondir cette précision : l'onglet Transformer de cet éditeur arrondit chaque coordonnée à un nombre de décimales de votre choix, ce qui réduit souvent considérablement la longueur de la chaîne tout en conservant une forme visuellement identique aux tailles normales. Convertir les commandes absolues en relatives permet de gagner encore quelques octets, car les décalages sont généralement des nombres plus courts, et l'option de sortie minifiée compresse l'espacement en une seule ligne compacte. Supprimer les commandes redondantes et utiliser les raccourcis H et V pour les lignes alignées sur un axe aide également. Une fois le tracé optimisé, copiez directement la version minifiée dans votre balisage. Collez un tracé ci-dessus, arrondissez à deux ou trois décimales, et observez la taille en octets diminuer dans le panneau de statistiques.

La commande d'arc elliptique prend sept valeurs : « A rx ry x-axis-rotation large-arc-flag sweep-flag x y ». Après les deux rayons et la rotation, les deux indicateurs à un chiffre déterminent lequel des quatre arcs possibles est tracé entre le point de départ et le point d'arrivée. Le large-arc-flag choisit l'arc le plus court (0) ou le plus long (1), celui qui couvre plus de 180 degrés. Le sweep-flag détermine le sens dans lequel l'arc courbe : 0 balaie dans le sens antihoraire, 1 balaie dans le sens horaire. Les valeurs finales x et y sont le point d'arrivée de l'arc. Comme les deux indicateurs sont des booléens, inverser l'un ou l'autre transforme la courbe en un tracé complètement différent tout en conservant les mêmes points de départ et d'arrivée. Cet éditeur liste chaque commande A dans l'onglet Commandes avec un champ étiqueté et modifiable pour chaque valeur, afin de basculer un indicateur et voir instantanément quel arc il produit dans l'aperçu en direct.

SVG utilise un système de coordonnées où Y augmente vers le bas, à l'opposé des graphiques mathématiques classiques, ce qui fait que les formes conçues avec une logique ascendante apparaissent souvent inversées. Un tracé peut aussi disparaître simplement parce que ses coordonnées se situent en dehors du viewBox, qui définit la fenêtre visible sur le canevas. Cet éditeur aide sur ces deux points : la boîte englobante et les valeurs min/max X et Y dans le panneau de statistiques indiquent précisément où se situe votre forme, et l'outil ajuste automatiquement le viewBox pour que le tracé soit toujours visible dans l'aperçu. La grille optionnelle, avec une origine marquée, rend les directions des coordonnées évidentes en un coup d'œil. Si l'orientation est incorrecte, l'onglet Transformer permet de retourner le tracé verticalement ou horizontalement en un clic. Collez votre tracé ci-dessus pour voir précisément où il se situe et le corriger.