SVG संपादक क्या है?

विज़ुअल कैनवास पर आकृतियाँ, पथ और टेक्स्ट बनाएँ, स्ट्रोक और फ़िल रंग समायोजित करें, और SVG कोड निर्यात करें। डेस्कटॉप सॉफ़्टवेयर की आवश्यकता नहीं।

औज़ारों में आयत, अंडाकार, रेखा, फ्रीहैंड पाथ, टेक्स्ट और एक आकृति लाइब्रेरी (त्रिकोण, षट्भुज, तारा, तीर) शामिल हैं। टेक्स्ट कैनवस पर सीधे संपादित होता है — टेक्स्ट टूल चुनें और टाइप करें, या किसी मौजूदा टेक्स्ट पर डबल-क्लिक करके उसे बदलें। हर तत्व का अपना भराव, बॉर्डर रंग, बॉर्डर चौड़ाई और पारदर्शिता रहती है, और गुण पैनल में आप सटीक X, Y, चौड़ाई और ऊँचाई टाइप कर सकते हैं। एक क्लिक से कोई मौजूदा SVG आयात करें, 10 पिक्सेल ग्रिड पर ड्राइंग स्नैप करें और पचास चरणों तक अनडू-रीडू करें। तैयार ग्राफ़िक को HTML व React JSX के लिए सादा SVG कोड के रूप में, या SVG स्वीकार न करने वाली जगहों के लिए रास्टर PNG के रूप में निर्यात करें।

उपयोग कैसे करें

1. ड्रॉइंग टूल चुनें (रेक्टैंगल, एलिप्स, लाइन, पाथ या टेक्स्ट) और कैनवास पर ड्रॉ करें।
2. एलिमेंट सेलेक्ट करें और उन्हें मूव, रीसाइज़, रोटेट करें, या उनकी फ़िल, स्ट्रोक और ओपेसिटी बदलें।
3. तैयार ग्राफ़िक को SVG फ़ाइल के रूप में एक्सपोर्ट करें, या रॉ SVG मार्कअप कॉपी करें।

कब उपयोग करें

• किसी लैंडिंग पेज के लिए वन-ऑफ़ लोगो, विभाजक या हीरो आकृति बनाना।
• भारी डेस्कटॉप ऐप खोले बिना मौजूदा SVG को हाथ से थोड़ा बदलना।
• कैनवस पर बनाते जाते वक्त कोड बदलता दिखाकर SVG की बुनियाद सिखाना।

परिणाम

एक वेब डेवलपर को एक सिंपल लोगो मार्क चाहिए — ग्रेडिएंट फ़िल वाले दो ओवरलैपिंग सर्कल। वे कैनवास पर शेप ड्रॉ करते हैं, रंग अप्लाई करते हैं, और SVG कोड सीधे अपने HTML में कॉपी करते हैं।

अक्सर पूछे जाने वाले प्रश्न

कॉपी किया गया SVG सीधे मेरे React JSX में चिपकाना सुरक्षित है?

हाँ, एक बात ध्यान रहे: stroke-width और stop-color जैसी विशेषताएँ JSX में strokeWidth, stopColor यानी कैमलकेस में आनी चाहिए। यहाँ कॉपी हुआ SVG kebab-case में है जो HTML के लिए सही है और एक बार खोजें-बदलें से बदला जा सकता है।

क्या मौजूदा SVG को आयात कर के संपादन जारी रखा जा सकता है?

हाँ — अपने डिवाइस से कोई भी .svg फ़ाइल लोड करने के लिए Import SVG बटन का इस्तेमाल करें। आयत, अंडाकार, वृत्त, रेखा, पाथ और टेक्स्ट कैनवस पर संपादन योग्य तत्व बन जाते हैं। ग्रेडिएंट, फ़िल्टर और नेस्टेड समूह छोड़ दिए जाते हैं क्योंकि एडिटर हर आकृति को एक प्रिमिटिव के रूप में रखता है।

Illustrator या Figma में मेरा SVG अलग क्यों दिखता है?

हर रेंडरर बॉर्डर संरेखण, ग्रेडिएंट और फ़िल्टरों को थोड़ी अलग तरह से दिखाता है। यहाँ का निर्गत हर आधुनिक ब्राउज़र से मेल खाता है और विनिर्देश के अनुरूप है, इसलिए अंतर आम तौर पर दूसरे प्रोग्राम की व्याख्या से आता है।

क्या पाथ टूल बेज़ियर कंट्रोल पॉइंट्स को समर्थन देता है?

फ्रीहैंड पाथ टूल आपके बनाए बिंदुओं को रिकॉर्ड कर पॉलीलाइन शैली में निकालता है। असली क्यूबिक बेज़ियर वक्र के लिए SVG निर्यात करें और d विशेषता को हाथ से बदलें, या परिणाम को हैंडल वाले वेक्टर टूल में चिपकाकर समायोजित करें।

कैनवस धीमा होने से पहले कितने तत्व जोड़े जा सकते हैं?

किसी भी आधुनिक डिवाइस पर कुछ सौ आकृतियाँ आराम से चलती हैं। हज़ारों तत्व (जैसे जटिल नक्शे या आइकन ग्रिड) पर खिंचाव दिखता है क्योंकि हर ड्रैग पूरा कैनवस फिर से बनाती है। उस सीमा पर पहुँचने पर कई पाथ को मिलाकर कम कंपाउंड पाथ बनाइए।

संबंधित उपकरण