Éditeur de tracé SVG
SVG Path Editor
Convertit les données d’un tracé entre commandes absolues et relatives, le déplace, l’échelonne, le fait pivoter et l’inverse, et montre sa boîte englobante avec un aperçu en direct.
Lit un attribut `d` et vous en rend un transformé : en absolu ou en relatif, déplacé, mis à l’échelle, tourné autour du centre de la boîte englobante, inversé, et arrondi au nombre de décimales que vous choisissez. Il dessine le résultat via Path2D pour que le navigateur fasse le calcul des arcs comme le ferait un moteur de rendu SVG, et il rapporte la boîte englobante et un viewBox à coller.
L’attribut d d’un path
Aperçu
Le rectangle en pointillés est la boîte englobante et le point rouge le point de départ. Le remplissage suit la règle nonzero.
Résultat
Commandes
18
Sous-tracés
3
Nombres
32
Octets
113 → 97
Boîte englobante
x 2,00 y 2,00 w 20,00 h 20,00
viewBox
2.00 2.00 20.00 20.00
Ce qu’il fait
- · La lecture se fait avec le même analyseur que l’optimiseur SVG, si bien qu’une notation compressée comme
1.5.5et les drapeaux d’un arc sont lus correctement. Il convertit entre absolu et relatif, arrondit les décimales, déplace, met à l’échelle et fait tourner autour du centre de la boîte englobante, inverse le sens et calcule la boîte englobante. - · Sous rotation,
HetVdeviennentL, et les rayons d’un arc, sa rotation autour de l’axe x et son drapeau de balayage sont recalculés avec les formules de l’annexe F.6 de SVG 1.1. La boîte englobante vient des extrema réels de chaque courbe, pas de ses points de contrôle. - · Il ne simplifie pas les courbes. Cela change la forme, et choisir la tolérance est une décision humaine.
Pour alléger un fichier entier, l’optimiseur SVG ; pour régler la façon dont une courbe accélère, l’éditeur de courbe d’accélération.
Comment s’en servir
Collez l’attribut d
La valeur seule, sans le `<path>` autour. La notation compacte convient — `1.5.5` pour deux nombres, des drapeaux d’arc sans séparateur — parce que l’analyseur est celui de l’optimiseur SVG et gère ces cas.
Appliquez la transformation voulue
Le déplacement, la mise à l’échelle et la rotation sont appliqués à la géométrie elle-même, donc ce qui sort n’a besoin d’aucun attribut `transform`. La rotation se fait autour du centre de la boîte englobante, ce qui est ce que vous voulez pour une icône et n’est pas ce que fait un `rotate()` brut.
Choisissez absolu ou relatif, et la précision
Les commandes relatives sont d’ordinaire plus courtes, ce qui compte pour une icône en ligne. La précision est le vrai levier de taille : trois décimales suffisent largement pour une grille d’icône de 24 unités, et passer de six à deux réduit souvent la chaîne de moitié. Surveillez le compteur d’octets pendant que vous la déplacez.
Inversez le sens si un remplissage paraît faux
Le point rouge marque le point de départ, donc l’effet d’une inversion se voit. Le sens est ce qui décide si un sous-tracé intérieur est un trou sous la règle nonzero, et c’est aussi ce que suit une animation de tirets.
Prenez le tracé, ou le viewBox
La zone de sortie contient la valeur `d` et un élément `<path>` prêt. Le panneau de statistiques contient la boîte englobante sous forme de chaîne viewBox, ce qui est le moyen le plus rapide de faire remplir exactement son cadre à une icône.
Questions fréquentes
Pourquoi ne simplifie-t-il pas la courbe ?
Parce que la simplification change la forme, et que le montant de changement acceptable est un jugement sur ce dessin précis qu’un outil ne peut pas porter. Tout algorithme de réduction de points prend une tolérance, et la place honnête de cette décision est dans un éditeur vectoriel où vous voyez ce qu’elle coûte. Arrondir les décimales est le levier de taille sans risque, et il est ici.
Qu’arrive-t-il aux arcs quand je tourne ou que je mets à l’échelle ?
Ils restent des arcs. Les rayons, la rotation de l’axe x et le drapeau de balayage sont recalculés avec les formules de l’annexe F.6 de SVG 1.1, ce qui garde les axes d’une ellipse corrects sous une mise à l’échelle non uniforme. `H` et `V` deviennent `L` sous rotation, parce qu’une ligne horizontale ne reste pas horizontale.
La boîte englobante vient-elle des points de contrôle ?
Non, des extrema réels de chaque courbe. Un point de contrôle de cubique se situe d’ordinaire hors de la courbe, donc une boîte prise sur les points de contrôle est trop grande — souvent de façon visible, c’est-à-dire précisément quand cela compte, puisque la boîte est ce que vous collez en viewBox.
Il ne gère qu’un seul tracé. Et un fichier entier ?
Ceci travaille sur une seule valeur `d` par conception : c’est le niveau auquel les transformations et l’inversion ont un sens. Pour un document entier, l’optimiseur SVG réécrit chacun de ses tracés, et l’éditeur SVG lit la structure autour d’eux.
À alimenter depuis
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
Image vers SVG
Image to SVG
Vectorise un bitmap en tracés SVG, réglé pour les logos et le dessin au trait plutôt que pour la photographie.
Éditeur de courbe d’accélération
Easing Curve Editor
Ajuste une courbe cubic-bezier ou de ressort face à un aperçu animé et rend la fonction de temporisation CSS.
Éditeur et explicateur SVG
SVG Editor and Explainer
Modifie un SVG à côté de son rendu et explique le fichier : le viewBox et la mise à l’échelle, les transformations, chaque commande de tracé, la peinture héritée, les octets inutiles, et ce qui casse dans une balise img, dans un data URI ou en inline.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Éditeur de courbe d’accélération
Easing Curve Editor
Ajuste une courbe cubic-bezier ou de ressort face à un aperçu animé et rend la fonction de temporisation CSS.
Image vers SVG
Image to SVG
Vectorise un bitmap en tracés SVG, réglé pour les logos et le dessin au trait plutôt que pour la photographie.
Optimiseur SVG
SVG Optimiser
Retire les restes d’éditeur, aplatit les transformations et arrondit la précision des tracés, en montrant le rendu avant et après.
SVG vers PNG
SVG to PNG
Rend un SVG en PNG, en JPEG ou en WebP au facteur d’échelle voulu, sur fond transparent ou plein.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.