Excalidraw SVG इंपोर्ट: क्या संपादन योग्य बनता है?

Excalidraw में SVG डालने से साफ़, आकार बदलने योग्य इमेज मिल सकती है, लेकिन उसके अलग पाथ संपादित करने के लिए नहीं मिलते। कोई हिस्सा रंगना या खिसकाना हो तो Excalidraw के अपने तत्वों से बना सीन चाहिए। SVG से Excalidraw कन्वर्टर वे तत्व बना सकता है, लेकिन परिणाम की दृश्य जाँच अब भी ज़रूरी है। SVG इंपोर्ट पर Excalidraw चर्चा यही एक ऑब्जेक्ट और संपादन योग्य हिस्सों का अंतर बताती है।

हमने पारदर्शी छेद वाला छोटा दो रंगों का आइकन परखा। तय संस्करण के कन्वर्टर ने तीन चयन योग्य Excalidraw तत्व बनाए, लेकिन SVG में खुला छेद भर दिया। यह उपयोगी याद दिलाता है: संपादन योग्य होना और मूल से मेल खाना अलग जाँच हैं।

“Excalidraw में SVG” के तीन अर्थ हो सकते हैं

तीसरा मामला उलटी दिशा में चलता है। टूल SVG एक्सपोर्ट में Excalidraw मूल डेटा रख सकता है, ताकि उसका अपना आरेख संपादन के लिए फिर खुले। मसलन, Excalidraw VS Code एक्सटेंशन एम्बेडेड सीन डेटा वाली .excalidraw.svg फ़ाइलें बताता है। इसका मतलब यह नहीं कि कोई भी SVG चित्र पहले से Excalidraw आकृतियाँ रखता है।

इंपोर्ट किया ग्राफ़िक समूह से अलग न हो तो पहले चुने ऑब्जेक्ट की संरचना पहचानें। हमारी SVG समूह अलग करने की मार्गदर्शिका इमेज ऑब्जेक्ट, संयुक्त पाथ और वास्तविक समूह अलग समझाती है; Excalidraw मूल फ़ाइल के उस सवाल के ऊपर अपना सीन फ़ॉर्मैट जोड़ता है।

केवल SVG पाथ संपादित करने हों तो Boxy SVG ट्रेस या इंपोर्ट जाँच अपनाएँ और मूल SVG रखें। Excalidraw के अपने सीन तत्व चाहिए तभी Excalidraw सीन में बदलें।

छोटा रूपांतरण परीक्षण: आकृतियाँ बचीं, छेद नहीं

हमारा मूल हाथ से बनाया SVG था: सम-विषम संयुक्त पाथ से बना नीला-हरा छल्ला और सुनहरा वृत्त। मूल में छल्ले का बीच सचमुच पारदर्शी था, सफ़ेद रंगा नहीं। हमने आधिकारिक svg-to-excalidraw रिपॉज़िटरी का npm पैकेज संस्करण 0.0.2 इस्तेमाल करके रूपांतरण किया, लौटे सीन को .excalidraw फ़ाइल में सेव किया, Excalidraw में खोला और तुलना के लिए पारदर्शी PNG एक्सपोर्ट किया।

मूल स्रोत और रूपांतरित सीन

रूपांतरण ने कोई त्रुटि नहीं बताई और Excalidraw के तीन अपने तत्व बनाए: दो नीले-हरे draw तत्व और एक सुनहरा ellipse। सुनहरा सजावटी हिस्सा अलग चयन योग्य था। लेकिन पारदर्शी बीच रूप की जाँच में विफल हुआ। मूल रेंडर में उसका बीच का पिक्सेल पारदर्शी था; Excalidraw के पारदर्शी PNG एक्सपोर्ट में संबंधित पिक्सेल अपारदर्शी नीला-हरा था। बिना त्रुटि के रूपांतरण जवाब ने समान चित्र की गारंटी नहीं दी।

यह जानबूझकर सीमित एक परीक्षण है, हर SVG या हर रूपांतरण तरीके का दावा नहीं। अलग SVG Chop प्रयोग भी जटिल SVG संरचनाओं को रूपांतरण चुनौती मानता है। ऑब्जेक्ट संख्या पर तेज़ नज़र पर्याप्त नहीं। डिज़ाइन में छेद, मास्क, क्लिपिंग, ग्रेडिएंट, टेक्स्ट या नेस्टेड समूह हों तो उनके अलग परीक्षण चाहिए।

अपना SVG कैसे जाँचें

1. मूल SVG रखें। इंपोर्ट या रूपांतरण से पहले प्रति सेव करें। जाँचें कि बदलने वाला क्षेत्र पहले से अलग पाथ या आकृति है या नहीं। एक संयुक्त पाथ में छेद हो सकता है, बिना अलग चयन योग्य हिस्सों के।
2. इस आरेख के लिए “संपादन योग्य” का अर्थ तय करें। केवल चित्र का आकार और स्थिति बदलनी हो तो इमेज पर्याप्त हो सकती है। हिस्सा खिसकाना या रंगना हो तो उस हिस्से का Excalidraw के अपने सीन तत्व होना ज़रूरी है।
3. प्रति पर रूपांतरण तरीका आज़माएँ। ओपन-सोर्स SVG से Excalidraw प्रोजेक्ट SVG ज्यामिति को Excalidraw सीन सामग्री में बदलता है। वर्तमान सेटअप जाँचें और इस्तेमाल पैकेज संस्करण दर्ज रखें। यह मानने के बजाय कि सामान्य इमेज रखने से पाथ खुलेंगे, बने सीन को इंपोर्ट करें या खोलें।
4. हिस्से गिनें और चुनें। क्या मुख्य भाग के बिना सजावटी हिस्सा चुन सकते हैं? क्या दूसरे रंग को स्थिर रखते हुए उसका रंग बदल सकते हैं? सेव सीन फिर खोलकर संपादन दोहराएँ।
5. केवल ऑब्जेक्ट नहीं, चित्र मिलाएँ। मूल और Excalidraw एक्सपोर्ट को विपरीत पृष्ठभूमियों पर रखें। छेद, ओवरलैप, किनारे, टेक्स्ट और ज़रूरी प्रभाव जाँचें। हमारा परीक्षण “तीन तत्व” जाँच में पास होता, लेकिन यहाँ विफल होता।

रूपांतरण एक इच्छित हिस्से को कई draw तत्व में बाँटे तो समूह बनाना खिसकाने में मदद करता है, लेकिन मूल पाथ संरचना वापस नहीं लाता। छेद गायब हो तो मूल बदलें या उस चित्र के लिए दूसरा एडिटर लें। Excalidraw ज़रूरी सुविधा सुरक्षित न रख पाए तो संपादन योग्य मूल वेक्टर एडिटर में रखें।

PerfectVector कहाँ उपयोगी है

PerfectVector पहले के चरण में केवल तब मदद करता है जब मूल रास्टर चित्र हो, जैसे सपाट PNG आइकन जिसमें अभी SVG पाथ नहीं। क्लिपआर्ट को SVG में बदलें, जाँचें कि रंगीन क्षेत्र और खाली जगह सुरक्षित हैं, फिर Excalidraw रूपांतरण से पहले ज्यामिति साफ़ करें। छोटे आइकन की तैयारी मार्गदर्शिका मूल की स्पष्टता और समानता बताती है। वेक्टराइज़ेशन अकेले Excalidraw में रखी इमेज को Excalidraw के अपने सीन तत्व नहीं बना सकता और नए ट्रेस SVG को भी ऊपर की गंतव्य ऐप जाँच चाहिए।

SVG में उपयुक्त वेक्टर आकृतियाँ पहले से हों तो फिर ट्रेस न करें। मूल को रूपांतरित सीन से मिलाएँ। संबंधित draw.io कस्टम SVG आकृति मार्गदर्शिका दूसरे आरेख एडिटर के लिए इमेज और एडिटर की अपनी आकृति का ऐसा ही अंतर समझाती है।

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

क्या रखी SVG इमेज को अलग Excalidraw आकृतियों में बाँट सकते हैं? इमेज स्तर का चयन मूल SVG हिस्सों को Excalidraw के अपने तत्वों के रूप में नहीं दिखाता। अलग सीन आकृतियाँ चाहिए तो रूपांतरण प्रक्रिया इस्तेमाल करें और परिणाम जाँचें।

क्या SVG से Excalidraw रूपांतरण हर छेद सुरक्षित रखता है? ऐसा न मानें। हमारे संस्करण 0.0.2 परीक्षण में सम-विषम छल्ला संपादन योग्य draw तत्व बना, लेकिन पारदर्शी बीच भर गया। अपने मूल और सेव सीन को मिलाएँ, खासकर जहाँ खाली जगह मायने रखती है।

क्या इंपोर्ट से पहले SVG वेक्टराइज़ करना चाहिए? नहीं। SVG में ज़रूरी आकृतियाँ पहले से हों तो संरचना और Excalidraw रूपांतरण जाँचें। वेक्टराइज़ेशन तब उपयोगी है जब शुरुआती इमेज PNG या JPG जैसा रास्टर चित्र हो।

स्रोत

1. Excalidraw चर्चा #6082 — संपादन योग्य हिस्सों के बजाय एक ब्लॉक जैसा व्यवहार करने वाले इंपोर्ट SVG पर उपयोगकर्ता का सवाल।
2. Excalidraw — svg-to-excalidraw — तय संस्करण वाले मूल आइकन परीक्षण में इस्तेमाल आधिकारिक ओपन-सोर्स रूपांतरण तरीका।
3. VS Code के लिए Excalidraw Editor एक्सटेंशन — Excalidraw सीन फ़ाइलें और एम्बेडेड सीन डेटा वाले SVG/PNG एक्सपोर्ट बताता है।
4. Minixcali — SVG Chop — ज्यामिति संबंधी सीमाओं के साथ SVG हिस्से Excalidraw तत्व में बदलने का स्वतंत्र प्रयोग।

शुरुआत PNG आइकन से हो तो PerfectVector से संभावित SVG बनाएँ, अलग क्षेत्र और छेद जाँचें, फिर आरेख में इस्तेमाल से पहले सेव किया Excalidraw सीन परखें।