SVG पाथ एडिटर
लाइव प्रीव्यू, संपादन योग्य कमांड टेबल और पाथ टूल्स के साथ SVG पाथ d-एट्रिब्यूट स्ट्रिंग्स को पार्स, विज़ुअलाइज़ और रूपांतरित करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
अपडेट किया गया
SVG Path Editor
Parse, visualize, and transform SVG path d-attribute strings with a live preview, editable command table, and powerful path tools.
Path d attribute
Live Preview
viewBox="-10 -5 120 110"
Stats
| # | Cmd | Description | Arguments | |
|---|---|---|---|---|
| 0 | M | Move to (absolute) | x: y: | |
| 1 | L | Line to (absolute) | x: y: | |
| 2 | L | Line to (absolute) | x: y: | |
| 3 | L | Line to (absolute) | x: y: | |
| 4 | L | Line to (absolute) | x: y: | |
| 5 | L | Line to (absolute) | x: y: | |
| 6 | L | Line to (absolute) | x: y: | |
| 7 | L | Line to (absolute) | x: y: | |
| 8 | L | Line to (absolute) | x: y: | |
| 9 | L | Line to (absolute) | x: y: | |
| 10 | Z | Close path |
अक्सर पूछे जाने वाले प्रश्न
SVG पाथ एडिटर क्या है?
SVG पाथ एडिटर एक मुफ़्त ऑनलाइन टूल है जो लाइव प्रीव्यू, संपादन योग्य कमांड टेबल और पाथ टूल्स के साथ SVG पाथ d-एट्रिब्यूट स्ट्रिंग्स को पार्स, विज़ुअलाइज़ और ट्रांसफ़ॉर्म करता है। यह पूरी तरह आपके ब्राउज़र में चलता है, बिना किसी इंस्टॉलेशन या साइन-अप के।
कौन-कौन से कमांड?
सभी SVG पाथ कमांड: M, L, H, V, C, S, Q, T, A, Z, निरपेक्ष और सापेक्ष दोनों।
क्या मैं कमांड संपादित कर सकता हूँ?
हाँ। Commands टैब प्रत्येक सेगमेंट को संपादन योग्य आर्गुमेंट इनपुट के साथ दिखाता है। परिवर्तन प्रीव्यू को रियल टाइम में अपडेट करते हैं।
क्या डेटा अपलोड किया जाता है?
नहीं। सारी पार्सिंग, रेंडरिंग और ट्रांसफ़ॉर्म आपके ब्राउज़र में चलते हैं।
क्या SVG पाथ एडिटर उपयोग करने के लिए मुफ़्त है?
हाँ, SVG पाथ एडिटर 100% मुफ़्त है, बिना किसी पंजीकरण, छिपे शुल्क या उपयोग सीमा के। सारी प्रोसेसिंग आपके ब्राउज़र में स्थानीय रूप से होती है, जिससे पूर्ण गोपनीयता सुनिश्चित होती है।
क्या SVG पाथ एडिटर मोबाइल डिवाइस पर काम करता है?
हाँ, SVG पाथ एडिटर पूरी तरह रिस्पॉन्सिव है और स्मार्टफोन तथा टैबलेट पर काम करता है। आप इसे किसी भी आधुनिक वेब ब्राउज़र वाले डिवाइस पर उपयोग कर सकते हैं, किसी ऐप डाउनलोड की आवश्यकता नहीं।
क्या इस टूल का उपयोग करने के लिए मुझे खाता बनाना होगा?
किसी खाते या पंजीकरण की आवश्यकता नहीं है। बस अपने ब्राउज़र में SVG पाथ एडिटर खोलें और तुरंत उपयोग शुरू करें। कोई साइन-अप बाधा या उपयोग प्रतिबंध नहीं है।
यह कौन-कौन सी प्रोग्रामिंग भाषाएँ या फ़ॉर्मेट समर्थित करता है?
SVG पाथ एडिटर लोकप्रिय फ़ॉर्मेट और भाषाओं की एक विस्तृत श्रृंखला का समर्थन करता है। समर्थित विकल्पों की पूरी सूची के लिए टूल इंटरफ़ेस देखें।
मैं SVG पाथ एडिटर का उपयोग कैसे करूँ?
बस दिए गए फ़ील्ड में अपना इनपुट दर्ज करें, अपनी पसंद के अनुसार सेटिंग्स समायोजित करें, और टूल उसे तुरंत प्रोसेस कर देगा। फिर आप परिणाम को क्लिपबोर्ड पर कॉपी कर सकते हैं या डाउनलोड कर सकते हैं।
कौन-कौन से ब्राउज़र समर्थित हैं?
SVG पाथ एडिटर Chrome, Firefox, Safari, Edge और Opera सहित सभी आधुनिक ब्राउज़रों में काम करता है। सर्वोत्तम अनुभव के लिए अपने पसंदीदा ब्राउज़र के नवीनतम संस्करण का उपयोग करें।
SVG path के absolute और relative कमांड में क्या फ़र्क़ है?
किसी SVG path में, अपरकेस कमांड लेटर absolute होता है और लोअरकेस वाला relative। Absolute कमांड पेन को SVG के origin से नापे गए सटीक कोऑर्डिनेट पर पोज़िशन करते हैं, इसलिए "L 90 90" हमेशा बिंदु 90,90 तक एक लाइन बनाएगा। इसके बजाय Relative कमांड मौजूदा पेन पोज़िशन से एक ऑफ़सेट के हिसाब से चलते हैं, इसलिए "l 90 90" पेन जहां भी हो वहां से 90 यूनिट दायें और 90 यूनिट नीचे एक लाइन बनाता है। Relative पाथ अक्सर छोटी फ़ाइलें बनाते हैं और उन्हें एक यूनिट के रूप में ट्रांसलेट करना आसान होता है, जबकि absolute पाथ पढ़ने और सटीक रूप से रीपोज़िशन करने में आसान होते हैं। यह एडिटर दोनों रूपों को पार्स करता है और इसमें एक क्लिक वाला Transform शामिल है जो रेंडर हुए शेप को बदले बिना हर कमांड को absolute और relative के बीच बदल देता है, ताकि आप स्टाइल बदलकर आउटपुट को साथ-साथ रखकर देख सकें।
एडिटर में दिखने वाला path length का आंकड़ा कितना सटीक है?
स्टैट्स पैनल में दिखने वाला path length एक अनुमान है, कोई सटीक arc length नहीं। L, H, और V जैसे सीधे सेगमेंट के लिए यह बिल्कुल सटीक होता है, लेकिन कर्व्स के लिए — क्यूबिक (C, S), क्वाड्रैटिक (Q, T), और आर्क (A) कमांड — यह टूल कर्व की ज्योमेट्री को गणितीय रूप से हल करने के बजाय कर्व के साथ-साथ बिंदुओं का सैंपल लेकर लंबाई का अनुमान लगाता है। नतीजा दो पाथ की तुलना करने या यह अंदाज़ा लगाने के लिए काफ़ी करीब होता है कि कोई शेप लगभग उतने साइज़ की है जितनी आप उम्मीद करते हैं, लेकिन इसे वहां इस्तेमाल नहीं करना चाहिए जहां सटीक माप ज़रूरी हो, जैसे किसी सटीक draw-on एनिमेशन के लिए stroke-dasharray सेट करना। उसके लिए, ब्राउज़र में रेंडर हुए एलिमेंट से getTotalLength() के ज़रिए वैल्यू वापस पढ़ें। बाउंडिंग बॉक्स और कमांड काउंट के साथ-साथ एक झटपट, उपयोगी लंबाई अनुमान पाने के लिए यहां एक path पेस्ट करें।
किसी भारी-भरकम SVG path स्ट्रिंग का फ़ाइल साइज़ कैसे कम करें?
ज़्यादातर बहुत बड़ी path स्ट्रिंग तब बनती हैं जब डिज़ाइन टूल कोऑर्डिनेट को बहुत सारे डेसिमल प्लेस के साथ एक्सपोर्ट करते हैं, जैसे "M 50.000123 4.998761"। सबसे बड़ी और झटपट जीत है इस प्रिसिज़न को राउंड करना: इस एडिटर का Transform टैब हर कोऑर्डिनेट को आपकी चुनी हुई डेसिमल प्लेस की संख्या तक राउंड करता है, जिससे सामान्य साइज़ पर शेप को विज़ुअली एक जैसा रखते हुए स्ट्रिंग की लंबाई में अक्सर भारी कमी आ जाती है। Absolute कमांड को relative में बदलने से भी कुछ और बाइट बच सकते हैं क्योंकि ऑफ़सेट आमतौर पर छोटी संख्याएं होती हैं, और minified आउटपुट विकल्प स्पेसिंग हटाकर सब कुछ एक कॉम्पैक्ट लाइन में समेट देता है। बेकार के कमांड हटाना और axis-aligned लाइनों के लिए H और V जैसे शॉर्टहैंड इस्तेमाल करना भी मदद करता है। जब path ठीक हो जाए, तो minified वर्ज़न को सीधे अपने मार्कअप में कॉपी कर लें। ऊपर एक path पेस्ट करें, इसे दो या तीन डेसिमल तक राउंड करें, और स्टैट्स पैनल में बाइट साइज़ को कम होते देखें।
SVG आर्क (A) कमांड में large-arc-flag और sweep-flag का क्या मतलब है?
एलिप्टिकल आर्क कमांड सात वैल्यू लेता है: "A rx ry x-axis-rotation large-arc-flag sweep-flag x y"। दो radii और rotation के बाद, दो सिंगल-डिजिट फ्लैग तय करते हैं कि शुरुआती और अंतिम बिंदु के बीच चार संभावित आर्क में से कौन-सा बनाया जाए। large-arc-flag छोटे आर्क (0) या 180 डिग्री से ज़्यादा कवर करने वाले लंबे आर्क (1) में से चुनता है। sweep-flag यह चुनता है कि आर्क किस दिशा में मुड़ेगा: 0 काउंटर-क्लॉकवाइज़ मुड़ता है, 1 क्लॉकवाइज़। अंतिम x और y आर्क का एंडपॉइंट होते हैं। चूंकि दोनों फ्लैग बूलियन होते हैं, इनमें से किसी एक को भी बदलने पर वही एंडपॉइंट रखते हुए कर्व पूरी तरह अलग path में बदल जाता है। यह एडिटर Commands टैब में हर A कमांड को हर वैल्यू के लिए लेबल किए गए, एडिटेबल इनपुट के साथ सूचीबद्ध करता है, ताकि आप कोई फ्लैग टॉगल करते ही तुरंत देख सकें कि वह कौन-सा आर्क बनाता है।
मेरा SVG path उल्टा क्यों दिखता है या दिखने वाले एरिया से बाहर क्यों चला जाता है?
SVG एक ऐसा कोऑर्डिनेट सिस्टम इस्तेमाल करता है जिसमें Y नीचे की ओर बढ़ता है, जो स्टैंडर्ड मैथ ग्राफ़ के उलट है, इसलिए नीचे-से-ऊपर सोचकर बनाए गए शेप अक्सर फ्लिप हुए दिखते हैं। कोई path सिर्फ इसलिए भी गायब हो सकता है क्योंकि उसके कोऑर्डिनेट viewBox के बाहर पड़ते हैं, जो कैनवस में दिखने वाली विंडो तय करता है। यह एडिटर दोनों मामलों में मदद करता है: स्टैट्स पैनल में बाउंडिंग बॉक्स और मिनिमम/मैक्सिमम X और Y वैल्यू आपको बताते हैं कि आपका शेप असल में कहां है, और यह टूल viewBox को अपने आप इस तरह फ़िट करता है कि path हमेशा प्रीव्यू में दिखे। मार्क किए गए origin वाला ऑप्शनल ग्रिड कोऑर्डिनेट की दिशाओं को एक नज़र में साफ़ कर देता है। अगर ओरिएंटेशन गलत है, तो Transform टैब एक क्लिक में path को वर्टिकल या होरिज़ॉन्टल फ्लिप कर सकता है। यह देखने के लिए कि आपका path वाकई कहां जाकर बैठता है और उसे ठीक करने के लिए, ऊपर अपना path पेस्ट करें।
संबंधित टूल
मुफ़्त API टेस्टर ऑनलाइन
GET, POST, PUT, DELETE अनुरोधों के साथ REST API का परीक्षण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त cURL से कोड कन्वर्टर
cURL कमांड को JavaScript, Python, PHP कोड में बदलें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON Schema जनरेटर
अपने JSON डेटा से स्वचालित रूप से JSON Schema बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त HTTP हेडर पार्सर
अनुरोधों और प्रतिक्रियाओं के HTTP हेडर पार्स और विश्लेषण करें। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
SVG Path Editor के बारे में
SVG Path Editor एक फ्री ऑनलाइन टूल है जो SVG <path> के d एट्रिब्यूट को पढ़ने, विज़ुअलाइज़ करने और नया आकार देने के लिए बनाया गया है। कोई भी path स्ट्रिंग पेस्ट करें, यह हर कमांड को पार्स करता है, नतीजे को लाइव प्रीव्यू में बनाता है, और आपको अलग-अलग कोऑर्डिनेट बदलने या पूरे path पर ट्रांसफ़ॉर्म लागू करने देता है — यह सब ब्राउज़र से बाहर गए बिना। यह फ्रंट-एंड डेवलपर्स, आइकन डिज़ाइनरों, और उन सभी के लिए बनाया गया है जिन्होंने कभी M 50 5 L 63 38 … जैसी संख्याओं की दीवार को घूरा हो और चाहा हो कि काश वे सिर्फ देख पाते कि यह क्या बनाता है।
सब कुछ आपकी डिवाइस पर ही लोकल चलता है। आपका path डेटा कभी किसी सर्वर पर अपलोड नहीं होता, कोई साइन-अप नहीं है, और कुछ भी स्टोर नहीं किया जाता — यह तब काम आता है जब मार्कअप किसी अनरिलीज़्ड प्रोडक्ट आइकन या किसी क्लाइंट के ब्रांड असेट से आया हो। बिना कुछ टाइप किए शुरू करने के लिए, पांच बिल्ट-इन सैंपल पाथ (Star, Heart, Arrow, Wave, और एक Bézier curve) एक क्लिक में एक तैयार शेप लोड कर देते हैं।
path के d एट्रिब्यूट को पढ़ना
d एट्रिब्यूट ड्रॉइंग कमांड्स की एक कॉम्पैक्ट स्ट्रिंग है। यह एडिटर इन सभी को पार्स करता है — M, L, H, V, C, S, Q, T, A, और Z — इनके एब्सोल्यूट (अपरकेस) और रिलेटिव (लोअरकेस) दोनों रूपों में। हर एक क्या करता है, इसके लिए एक क्विक रेफरेंस:
- M / m — बिना कुछ बनाए पेन को नए बिंदु पर ले जाना
- L / l — सीधी लाइन बनाना; H और V क्रमशः सिर्फ होरिज़ॉन्टल और वर्टिकल लाइनों के शॉर्टकट हैं
- C / S — क्यूबिक Bézier कर्व (S पिछले कंट्रोल पॉइंट को दोबारा इस्तेमाल करता है)
- Q / T — क्वाड्रैटिक Bézier कर्व (T एक स्मूद कंटीन्यूएशन है)
- A — एलिप्टिकल आर्क, जो radii, rotation, और large-arc/sweep फ्लैग लेता है
- Z — मौजूदा सबपाथ को उसकी शुरुआत तक वापस बंद करना
Commands टैब हर सेगमेंट को क्रम में एक आसान-भाषा में विवरण के साथ सूचीबद्ध करता है, और हर आर्गुमेंट के लिए एक एडिटेबल इनपुट देता है, जो उसकी भूमिका के हिसाब से लेबल किया गया है (x, y, x1, rx, वगैरह)। कोई संख्या बदलें और प्रीव्यू तुरंत अपडेट हो जाता है; आप किसी भी कमांड को पूरी तरह डिलीट भी कर सकते हैं।
path का निरीक्षण और उसे ट्रांसफ़ॉर्म करना
प्रीव्यू के साथ-साथ, एक स्टैट्स पैनल वे आंकड़े दिखाता है जिनकी वेक्टर ज्योमेट्री के साथ काम करते समय वाकई ज़रूरत पड़ती है: कमांड्स की संख्या, एक अनुमानित path length, बाउंडिंग बॉक्स (चौड़ाई × ऊंचाई), न्यूनतम और अधिकतम X/Y कोऑर्डिनेट, स्ट्रिंग का बाइट साइज़, और प्रति-कमांड ब्रेकडाउन। path-length का आंकड़ा एक अनुमान है जो कर्व्स को सटीक रूप से मापने के बजाय उनका अनुमान लगाता है, इसलिए इसे एक सटीक arc length के बजाय एक गाइड की तरह लें।
Transform टैब पूरे path पर एक साथ ऑपरेशन लागू करता है:
- Scale — स्वतंत्र X और Y फैक्टर के साथ
- Translate — X और Y में एक डेल्टा के साथ
- Round coordinates — चुने गए डेसिमल प्लेस की संख्या तक — भारी-भरकम, हाई-प्रिसिज़न आउटपुट को छोटा करने का एक आसान तरीका
- Quick transforms — path को उलटना, उसे होरिज़ॉन्टल या वर्टिकल फ्लिप करना, या हर कमांड को एब्सोल्यूट और रिलेटिव कोऑर्डिनेट के बीच बदलना
एक टॉगल किया जा सकने वाला ग्रिड (जिसमें ओरिजिन को दिखाने वाला एक लाल क्रॉस होता है) और एक draw-on एनिमेशन जो लगभग दो सेकंड में आउटलाइन को ट्रेस करता है, दिशा और संरचना को समझना आसान बनाते हैं।
साफ़, इस्तेमाल-योग्य आउटपुट एक्सपोर्ट करना
जब शेप सही दिखे, तो Output टैब आपको path दो तरीकों से देता है: प्रोडक्शन के लिए एक minified सिंगल-लाइन स्ट्रिंग, और पढ़ने में आसान बनाने के लिए एक prettified वर्ज़न जिसमें हर लाइन में एक कमांड होता है। आप या तो सीधा d वैल्यू कॉपी कर सकते हैं या एक पूरा, इस्तेमाल के लिए तैयार <svg> एलिमेंट जिसमें सही viewBox हो, या नतीजे को .svg फ़ाइल के रूप में डाउनलोड कर सकते हैं।
इससे SVG Path Editor डिबगिंग से कहीं आगे भी उपयोगी बन जाता है: फ़ाइल साइज़ घटाने के लिए कोऑर्डिनेट की प्रिसिज़न कम करना, किसी डिज़ाइनर के एक्सपोर्ट को एब्सोल्यूट कमांड्स में सामान्य बनाना, या किसी आइकन को इस तरह पोज़िशन करना कि उसका बाउंडिंग बॉक्स ओरिजिन पर साफ़-सुथरे ढंग से बैठे। ऊपर एक path पेस्ट करें, उसे रेंडर होते देखें, और उसे तब तक नया आकार दें जब तक मार्कअप बिल्कुल वैसा न हो जाए जैसा आपको चाहिए।