ऑनलाइन SVG एडिटर

एक प्रोफ़ेशनल SVG एडिटर जो पूरी तरह आपके ब्राउज़र में चलता है

Tools 4 All का SVG एडिटर एक पूरा वेक्टर ग्राफ़िक्स ऐप्लिकेशन है जो बिना डाउनलोड, खाते या अपलोड के तुरंत खुलता है। इससे लोगो, आइकन, चित्र, आरेख और UI एसेट बनाएं, या अपनी मौजूदा SVG फ़ाइलें साफ़ करें और बारीकी से सुधारें। यह खुद SVG फ़ॉर्मैट के इर्द-गिर्द बना है, इसलिए आप जो फ़ाइल एक्सपोर्ट करते हैं वह वही दस्तावेज़ है जिसे आपने एडिट किया: न कोई मालिकाना फ़ॉर्मैट, न कोई छिपा कन्वर्ज़न।

आप क्या कर सकते हैं

• सटीकता से बनाएं: Bézier कर्व वाला पेन टूल, स्मूदिंग वाली फ़्रीहैंड पेंसिल, अलग-अलग गोल, कटे या उलटे कोनों वाले आयत, दीर्घवृत्त, रेखाएं, ब्लॉब ब्रश, इरेज़र, चाकू और कैंची, और एडिट की जा सकने वाली आकृतियां: बहुभुज, तारे, त्रिभुज, क्रॉस, फ़्रेम, छल्ले, पाई, अर्धचंद्र, तीर, स्पीच बबल, गियर, दिल, बादल, फूल और सर्पिल, और टेक्स्ट।
• पाथ को नोड-दर-नोड एडिट करें: नोड और हैंडल खिसकाएं, कोने, स्मूद और सममित नोड के बीच बदलें, नोड जोड़ें और मिटाएं, पाथ जोड़ें और तोड़ें, सेगमेंट को सीधे मोड़ें, और हैंडल को स्पर्शरेखा पर स्नैप करें।
• आकृतियां जोड़ें: यूनियन, घटाना, इंटरसेक्ट, एक्सक्लूड और विभाजित करना, साथ ही आउटलाइन स्ट्रोक, ऑफ़सेट पाथ, सरल करना और उलटना — सब बैकग्राउंड worker में हमारे अपने कर्व-सुरक्षित ज्यामिति इंजन से।
• हर चीज़ को स्टाइल दें: ठोस रंग, कैनवास पर हैंडल वाले लीनियर और रेडियल ग्रेडिएंट, पैटर्न, हर फ़िल और हर स्ट्रोक की अपारदर्शिता, डैश, कैप, जॉइन, तीर के निशान, ब्लेंड मोड, ब्लर और ड्रॉप-शैडो इफ़ेक्ट, क्लिपिंग पाथ और मास्क।
• व्यवस्थित रहें: खींचकर क्रम बदलने, नाम बदलने और नेस्टिंग वाला लेयर पैनल, लॉक और छिपाना, ग्रुप बनाना और तोड़ना, चयन, आर्टबोर्ड या मुख्य ऑब्जेक्ट के अनुसार संरेखित और वितरित करना, दस्तावेज़ स्वॉच और दोबारा इस्तेमाल होने वाले सिंबल।
• प्रो की तरह काम करें: दूरी लेबल और बराबर अंतराल के संकेत वाले स्मार्ट गाइड, ग्रिड, पिक्सेल, रूलर गाइड, नोड और पाथ पर स्नैपिंग, X/Y/W/H/घुमाव के संख्यात्मक फ़ील्ड, असीमित अनडू और Figma व Illustrator जैसे शॉर्टकट।
• कोड और एक्सपोर्ट: दोतरफ़ा SVG कोड व्यू, आकार दिखाने वाला ऑप्टिमाइज़ SVG एक्सपोर्ट, किसी भी स्केल पर PNG/JPEG/WebP, और SVG, data URI, React (JSX या TSX), Tailwind SVG या CSS बैकग्राउंड के रूप में कॉपी।
• वेब प्रोडक्शन के लिए बना: एक क्लिक में बदलने और currentColor में कन्वर्ट करने वाले दस्तावेज़ रंग, टेक्स्ट से आउटलाइन, आउटलाइन स्ट्रोक, ट्रांसफ़ॉर्म समतल करना और ग्रुप तोड़ना, कैनवास को सामग्री के अनुसार फ़िट करना, और शोर वाले पाथ को सरल करना।
• एक असली कार्यक्षेत्र: टैब में कई ड्रॉइंग, हर एक का अपना अनडू इतिहास, सबमेन्यू वाले छोटे मेन्यू, समेटा जा सकने वाला साइड पैनल (Ctrl/⌘+B), और फ़ोन व डेस्कटॉप पर फ़ुल-स्क्रीन एडिटिंग।

SVG-नेटिव एडिटर क्यों मायने रखता है

कई डिज़ाइन टूल SVG को एक्सपोर्ट फ़ॉर्मैट मानते हैं: आप उनके अपने मॉडल में बनाते हैं, और अंत में SVG बनाया जाता है। सरल आइकन के लिए यह ठीक है। लेकिन जब आपको कोई मौजूदा फ़ाइल एडिट करनी हो, अपनी CSS या JavaScript जिन id पर निर्भर है उन्हें बनाए रखना हो, या समझना हो कि कोई फ़ाइल जितनी होनी चाहिए उससे दस गुना बड़ी क्यों है, तब यह टूट जाता है। यह एडिटर सीधे SVG दस्तावेज़ पर काम करता है। ग्रुप, ग्रुप ही रहते हैं, ग्रेडिएंट, ग्रेडिएंट ही रहते हैं, और पांच बार इस्तेमाल हुआ <symbol> एक ही सिंबल रहता है। जब आप किसी लेयर का नाम बदलते हैं, तो आप उस एलिमेंट का id सेट कर रहे होते हैं।

बड़ी फ़ाइलों के साथ भी तेज़

कोड की पहली पंक्ति से ही गति एक डिज़ाइन लक्ष्य थी। ड्रॉइंग को आपका ब्राउज़र एक अलग-थलग लेयर में नेटिव रूप से रेंडर करता है। चयन हैंडल, होवर आउटलाइन और गाइड एक अलग ओवरले पर बनते हैं, इसलिए माउस हिलाने से आपके दस्तावेज़ को कभी छुआ नहीं जाता। एक स्पेशियल इंडेक्स (R-tree) पॉइंटर के नीचे क्या है, यह माइक्रोसेकंड में ढूंढ लेता है, दसियों हज़ार आकृतियों के साथ भी। भारी दस्तावेज़ों पर पैन और ज़ूम GPU कंपोज़िटर को सौंपे जाते हैं और रुकने पर वेक्टर फिर से शार्प रेंडर होते हैं। बूलियन ऑपरेशन, पाथ ऑफ़सेट और SVG ऑप्टिमाइज़ेशन जैसे भारी काम Web Worker में चलते हैं, इसलिए इंटरफ़ेस फुर्तीला रहता है।

वेक्टर काम के लिए सटीक टूल

कोनों के लिए क्लिक करने और स्मूद कर्व खींचने के लिए पेन टूल इस्तेमाल करें। 45° कोण बनाए रखने के लिए Shift और हैंडल तोड़ने के लिए Alt दबाए रखें। नोड टूल से आप किसी सेगमेंट को मोड़ने के लिए खींच सकते हैं, नोड जोड़ने के लिए डबल-क्लिक कर सकते हैं, या कई नोड चुनकर उन्हें संरेखित कर सकते हैं। स्मार्ट गाइड दिखाते हैं कि कोई ऑब्जेक्ट कब अपने पड़ोसियों के किनारों या केंद्रों से मेल खाता है, और कब ऑब्जेक्ट के बीच का अंतर बराबर है। आप रूलर से गाइड भी खींच सकते हैं। सटीक मानों के लिए डिज़ाइन पैनल में X, Y, चौड़ाई, ऊंचाई और घुमाव टाइप करें। फ़ील्ड 120+16 या 200/3 जैसे गणित भी स्वीकार करते हैं।

साफ़, छोटे एक्सपोर्ट

एडिटर अक्सर सेव की गई फ़ाइलों में मेटाडेटा, बिना इस्तेमाल की परिभाषाएं, फ़ालतू ग्रुप और ज़रूरत से ज़्यादा सटीक संख्याएं छोड़ देते हैं। एक्सपोर्ट डायलॉग बैकग्राउंड में SVGO-शैली का ऑप्टिमाइज़र चलाता है। यह संख्याओं को आपकी चुनी सटीकता तक राउंड करता है, पाथ डेटा को उसके सबसे छोटे रूप में बदलता है, एडिटर मेटाडेटा और बिना इस्तेमाल की परिभाषाएं हटाता है, id और रंग छोटे करता है, और बेकार ग्रुप समेट देता है। हर ऑप्टिमाइज़ेशन बंद किया जा सकता है, और डायलॉग पहले और बाद का फ़ाइल आकार दिखाता है। रास्टर आउटपुट के लिए, 1×, 2×, 4× या सटीक पिक्सेल आकार में, पारदर्शी बैकग्राउंड के साथ या बिना, PNG, JPEG या WebP चुनें।

वेब प्रोडक्शन के लिए बना

वेबसाइटों और ऐप में जाने वाले SVG की ज़रूरतें प्रिंट आर्टवर्क से अलग होती हैं। दस्तावेज़ रंग सूची फ़ाइल में इस्तेमाल हर रंग दिखाती है: एक बदलें और उसे साझा करने वाली हर चीज़ बदल जाती है, या उसे currentColor में बदलें ताकि React या Tailwind आइकन अपना रंग CSS से ले। इम्पोर्ट की गई फ़ाइलों में अक्सर नेस्टेड ग्रुप और ट्रांसफ़ॉर्म होते हैं जिनसे पाथ एडिट करना मुश्किल हो जाता है: “ट्रांसफ़ॉर्म समतल करें और ग्रुप तोड़ें” उन्हें एक ही चरण में निर्देशांकों में मिला देता है, और “सामग्री के अनुसार फ़िट करें” viewBox को आर्टवर्क तक काट देता है, स्ट्रोक समेत। “टेक्स्ट से आउटलाइन” और “आउटलाइन स्ट्रोक” टाइप और लाइन की मोटाई को सादे पाथ में बदल देते हैं जो हर जगह एक जैसे दिखते हैं, और “सरल करें” ट्रेस की गई या फ़्रीहैंड आकृति से सैकड़ों बिंदु हटा देता है।

आपकी फ़ाइलें आपके डिवाइस पर ही रहती हैं

एडिटर के पीछे कोई सर्वर नहीं है। फ़ाइल खोलने पर वह आपकी डिस्क से पेज में पढ़ी जाती है, और एक्सपोर्ट करने पर फ़ाइल आपके डिवाइस पर बनती है। ऑटोसेव आपके ब्राउज़र के निजी IndexedDB स्टोरेज में लिखता है, जो आपकी हाल की फ़ाइलों की सूची भी रखता है। अगर आप गलती से टैब बंद कर दें, तो अगली बार आने पर आपका पिछला दस्तावेज़ वापस आ जाता है।

और इमेजिंग टूल देखें