Éditeur de chemin SVG
Visualisez et inspectez les données de chemin SVG. Analysez les commandes d'attribut (M, L, C, Q, A, Z), configurez viewBox, le trait et le remplissage.
Examples
Live Preview
8 commands parsed
Settings
Show grid lines
Parsed Commands(8 total)
| # | Cmd | Description | Parameters |
|---|---|---|---|
| 1 | M | Move to (absolute) | 50, 30 |
| 2 | C | Cubic Bézier (absolute) | 50, 20, 35, 10, 20, 20 |
| 3 | C | Cubic Bézier (absolute) | 5, 30, 5, 50, 20, 65 |
| 4 | L | Line to (absolute) | 50, 90 |
| 5 | L | Line to (absolute) | 80, 65 |
| 6 | C | Cubic Bézier (absolute) | 95, 50, 95, 30, 80, 20 |
| 7 | C | Cubic Bézier (absolute) | 65, 10, 50, 20, 50, 30 |
| 8 | Z | Close path | — |
Comment utiliser Éditeur de chemin SVG
- 1Collez ou tapez votre attribut d de chemin SVG.
- 2Voyez le chemin rendu dans l'aperçu en direct.
- 3Examinez les commandes analysées dans le tableau ci-dessous.
- 4Ajustez les paramètres viewBox, trait et remplissage selon vos besoins.
ZenovayAnalytics
Analytics pensé pour les fondateurs.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Formateur et Validateur JSON
Formatez, validez et embellissez les données JSON avec la coloration syntaxique et la détection d'erreurs.Décodeur JWT
Décodez et inspectez les jetons JWT. Consultez l'en-tête, la charge utile et vérifiez les signatures.Encodeur/Décodeur Base64
Encodez du texte en Base64 ou décodez Base64 en texte. Supporte UTF-8 et les données binaires.Encodage / Décodage URL
Encodez ou décodez les composants URL. Traitez les caractères spéciaux, les chaînes de requête et les URL complètes.Questions fréquemment posées
Qu'est-ce qu'un attribut d de chemin SVG ?▾
L'attribut d définit un chemin à tracer. Il contient une série de commandes comme M (se déplacer vers), L (tracer une ligne vers), C (courbe de Bézier cubique), Q (courbe de Bézier quadratique), A (arc) et Z (fermer le chemin).
Quelles sont toutes les commandes de chemin SVG ?▾
M/m (aller à), L/l (tracer une ligne vers), H/h (ligne horizontale), V/v (ligne verticale), C/c (courbe de Bézier cubique), S/s (cubique lisse), Q/q (courbe de Bézier quadratique), T/t (quad lisse), A/a (arc), Z/z (fermer).
Quelle est la différence entre les commandes de chemin SVG absolues et relatives ?▾
Les commandes en majuscules (M, L, C) utilisent des coordonnées absolues à partir de l'origine. Les commandes en minuscules (m, l, c) utilisent des coordonnées relatives à partir du point actuel.
Qu'est-ce que viewBox SVG ?▾
L'attribut viewBox définit le système de coordonnées du SVG. Il prend quatre valeurs : min-x, min-y, largeur et hauteur. Il contrôle comment le contenu SVG se met à l'échelle et se positionne dans son conteneur.
Comment optimiser les chemins SVG ?▾
Utilisez des commandes relatives pour réduire les tailles de coordonnées, supprimez la précision décimale inutile, combinez les segments de ligne consécutifs et utilisez les commandes abrégées (H, V, S, T) si possible.