SVG Path एडिटर
एक इंटरैक्टिव SVG path एडिटर जो आपको विज़ुअली कंट्रोल पॉइंट्स ड्रैग करने, रंग-कोडेड कमांड ब्रेकडाउन (M, L, C, Q, A, Z) देखने, रियल टाइम में शेप प्रीव्यू करने, और एक क्लिक से SVG कोड कॉपी करने देता है। 8 उदाहरण paths और पूरी कमांड चीटशीट शामिल है। मुफ्त, साइन-अप नहीं, 100% ब्राउज़र-आधारित।
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"> <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
M 10 80 L 50 10 L 90 80 Z
कोई सुझाव है?
नया टूल अनुरोध करें या सुधार सुझाएं — हमारे Slack समुदाय में शामिल हों!
SVG Path एडिटर क्या है?
SVG Path एडिटर SVG <path> एलिमेंट्स के d एट्रिब्यूट को बनाने और एडिट करने का एक विज़ुअल टूल है। SVG paths कमांड्स की एक मिनी-भाषा का उपयोग करते हैं (M move के लिए, L line के लिए, C cubic Bezier के लिए, Q quadratic Bezier के लिए, A arc के लिए, Z close के लिए) जटिल आकार बनाने के लिए। यह एडिटर इंटरैक्टिव ड्रैग-एंड-ड्रॉप कंट्रोल पॉइंट्स, रियल-टाइम प्रीव्यू, रंग-कोडेड कमांड विज़ुअलाइज़ेशन, और वेक्टर ग्राफ़िक्स पर काम करने वाले डेवलपर्स और डिज़ाइनर्स के लिए तुरंत कोड एक्सपोर्ट प्रदान करता है।
SVG Path एडिटर का उपयोग कैसे करें
- एक उदाहरण path (Triangle, Heart, Star, आदि) चुनें या अपना SVG path d एट्रिब्यूट पेस्ट करें
- शेप को इंटरैक्टिव रूप से संशोधित करने के लिए प्रीव्यू में कंट्रोल पॉइंट्स ड्रैग करें
- स्टाइल कंट्रोल्स का उपयोग करके fill रंग, stroke रंग, और stroke चौड़ाई एडजस्ट करें
- सटीक एडिटिंग के लिए ग्रिड और कंट्रोल पॉइंट दृश्यता टॉगल करें
- प्रत्येक कमांड का रंग-कोडेड ब्रेकडाउन देखने के लिए विज़ुअलाइज़र टैब पर जाएँ
- एक क्लिक से जनरेट किया गया SVG कोड या path d एट्रिब्यूट कॉपी करें
अक्सर पूछे जाने वाले प्रश्न
यह एडिटर कौन से SVG path कमांड्स सपोर्ट करता है?
यह एडिटर सभी मानक SVG path कमांड्स सपोर्ट करता है: M (moveTo), L (lineTo), H (horizontal line), V (vertical line), C (cubic Bezier), S (smooth cubic), Q (quadratic Bezier), T (smooth quadratic), A (arc), और Z (close path)। एब्सोल्यूट (अपरकेस) और रिलेटिव (लोअरकेस) दोनों वेरिएंट सपोर्टेड हैं।
क्या मैं Bezier कंट्रोल पॉइंट्स को ड्रैग और एडिट कर सकता हूँ?
हाँ। एडिटर एंडपॉइंट्स (लाल) और कंट्रोल हैंडल्स (एम्बर) के लिए ड्रैग करने योग्य पॉइंट्स दिखाता है। आप किसी भी पॉइंट को क्लिक और ड्रैग करके path को इंटरैक्टिव रूप से रीशेप कर सकते हैं। जैसे-जैसे आप ड्रैग करते हैं, path डेटा रियल टाइम में अपडेट होता है।
जनरेट किए गए SVG कोड का उपयोग कैसे करें?
कॉपी बटन से SVG कोड कॉपी करें और इसे सीधे अपने HTML, React कंपोनेंट, या किसी SVG-संगत एप्लिकेशन में पेस्ट करें। आउटपुट में viewBox, fill, stroke, और path डेटा सहित पूरा <svg> एलिमेंट शामिल है।
एब्सोल्यूट और रिलेटिव SVG path कमांड्स में क्या अंतर है?
एब्सोल्यूट कमांड्स (अपरकेस: M, L, C) SVG कैनवस के मूल बिंदु (0,0) के सापेक्ष कोऑर्डिनेट्स का उपयोग करते हैं। रिलेटिव कमांड्स (लोअरकेस: m, l, c) वर्तमान पेन स्थिति के सापेक्ष कोऑर्डिनेट्स का उपयोग करते हैं। उदाहरण के लिए, 'L 50 50' एब्सोल्यूट बिंदु (50,50) तक लाइन खींचता है, जबकि 'l 50 50' वर्तमान स्थिति से 50 इकाई दाएँ और 50 इकाई नीचे लाइन खींचता है।
क्या मेरा SVG डेटा किसी सर्वर पर भेजा जाता है?
नहीं। सभी एडिटिंग और रेंडरिंग 100% आपके ब्राउज़र में होती है। कोई डेटा कभी किसी सर्वर पर ट्रांसमिट नहीं होता। आप अपने ब्राउज़र के DevTools के Network टैब में इसकी पुष्टि कर सकते हैं।