draw.io में कस्टम SVG आकार: छवि या स्टेंसिल?

draw.io में कस्टम SVG आकार के लिए तय करें कि डालने के बाद क्या बदलना है। चित्र की दिखावट चाहिए तो एम्बेडेड SVG छवि उपयोगी है। आरेख ज्यामिति, शैली और विशेष कनेक्शन बिंदु तय करने के लिए नेटिव XML स्टेंसिल विकल्प है। कस्टम लाइब्रेरी पुनः उपयोग के लिए दोनों तरह के आइटम रख सकती है।

ये चुनाव अलग समस्याएँ हल करते हैं। SVG लाइब्रेरी में सहेजने से अपने आप उसके पाथ नेटिव आरेख आकार नहीं बनते। draw.io कस्टम आकार संदर्भ एम्बेडेड छवियों और उसके XML फ़ॉर्मेट में परिभाषित आकारों का अंतर बताता है।

आरेख Mermaid में लिखे हों तो कस्टम SVG आइकन पैक कार्यप्रवाह से चित्र पंजीकृत करें और लेबल तथा कनेक्टर आरेख स्रोत में रखें।

चित्र रूपांतरण से पहले व्यवहार चुनें

छोटा उपकरण चिह्न सोचें: एक गोल संकेतक वाला आयताकार शरीर। उसे कुछ प्रक्रिया आरेखों में पुनः उपयोग करना है।

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

दिखावट पर्याप्त हो तो SVG डालें

आधिकारिक SVG डालने की मार्गदर्शिका कंप्यूटर से SVG कैनवास पर खींचना बताती है। Arrange → Insert → Image भी ले सकते हैं। पूछे जाने पर Actual Size चुनें, फिर आवश्यकता अनुसार डाले चित्र का आकार बदलें।

उपकरण उदाहरण में कार्य प्रति लें और आकार बदलने के बाद छोटा गोल संकेतक देखें। पूरा आकार होने पर स्पष्ट दिखने वाला चिह्न छोटे आरेख में अपने उपयोगी विवरण खो सकता है।

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

पूरे आरेख की साधारण SVG ड्रॉइंग में भी सावधानी चाहिए। Draw.io की डालने की मार्गदर्शिका बताती है कि सामान्य SVG में संपादन योग्य आरेख पुनर्निर्माण के लिए आवश्यक कनेक्टर जानकारी नहीं होती। मूल आरेख फ़ाइल हो तो रखें।

एम्बेडेड SVG का रंग बदलने की अपनी आवश्यकताएँ हैं

Draw.io एम्बेडेड SVG चित्र और उसके रंग नियंत्रण में सीमित संबंध देता है। एम्बेडेड SVG रंग मार्गदर्शिका SVG के अंदर CSS नियम और डाले ऑब्जेक्ट की शैली में editableCssRules सेटिंग लेती है। सुविधा एम्बेडेड छवियों पर लागू है, लिंक से शामिल छवियों पर नहीं।

पहले से CSS नियम वाले SVG में डाली छवि चुनें, Edit Style लें और जोड़ें:

editableCssRules=.*;

बताया पैटर्न सभी पात्र नियम चुनता है। यह draw.io ऑब्जेक्ट शैली में जाता है, SVG ड्रॉइंग मार्कअप में चिपकाई पंक्ति की तरह नहीं।

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

केवल एक स्थायी रंग बदलाव चाहिए तो SVG स्रोत संपादित करना सरल हो सकता है। प्रति सहेजें और आयात दिखावट फिर सत्यापित करें।

जानबूझकर परिभाषित आकार के लिए नेटिव स्टेंसिल लें

नेटिव स्टेंसिल draw.io के अपने XML सिंटैक्स में आकार बताता है। यह केवल SVG फ़ाइल का नाम बदलकर .xml कर देने से नहीं बनता। कस्टम आकार ट्यूटोरियल आकार संपादक खोलने के लिए Arrange → Insert → Shape और परिभाषा देखने के लिए Preview लेता है।

उपकरण चिह्न के लिए छोटा मौलिक शुरुआती उदाहरण:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

बाहरी आयत और केंद्रीय वृत्त जानबूझकर सरल हैं। निर्देशांक इस चित्र का ड्रॉइंग क्षेत्र बताते हैं; ये उपकरण के भौतिक माप नहीं हैं।

XML संदर्भ सापेक्ष कनेक्शन निर्देशांक बताता है। perimeter="0" के साथ दो शर्तें बाएँ और दाएँ मध्य बिंदु रखती हैं। वह अग्रभूमि की शुरुआत में पृष्ठभूमि ज्यामिति का रंग ऑपरेशन भी माँगता है, इसलिए fillstroke वहाँ है।

आकार का पूर्वावलोकन करें, परीक्षण आरेख में जोड़ें और वास्तविक आवश्यक व्यवहार आज़माएँ:

1. भरण और लाइन रंग बदलें।
2. हर इच्छित मध्य बिंदु पर कनेक्टर जोड़ें।
3. उपकरण खिसकाएँ और दोनों जुड़ाव देखें।
4. आकार बदलें तथा वृत्त, आउटलाइन और कनेक्टर स्थान जाँचें।

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

आइटम जाँचें पास करने के बाद लाइब्रेरी सहेजें

लाइब्रेरी पुनः उपयोग का चरण है। कस्टम लाइब्रेरी मार्गदर्शिका File → New Library, संग्रह स्थान चुनना तथा छवियाँ जोड़ना या कैनवास से आकार खींचना बताती है। कस्टम लाइब्रेरी .xml एक्सटेंशन लेती हैं।

उपकरण ऐसा नाम देकर सहेजें जो सामग्री बताए, जैसे “उपकरण चित्र” या “दो पोर्ट वाला उपकरण”। दोनों उपयोगी हों तो अलग प्रविष्टियाँ रखें।

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

केवल .xml नाम नहीं बताता कि आइटम नेटिव ज्यामिति है या नहीं। लाइब्रेरी और स्टेंसिल परिभाषा दोनों XML लेते हैं, लेकिन लाइब्रेरी में छवियाँ, समूह, कस्टम आकार या पूरे आरेख हो सकते हैं। डाले आइटम का व्यवहार देखें।

वेक्टर मूल चाहिए तभी रास्टर चित्र पुनर्प्राप्त करें

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

इससे समीक्षा के लिए दिखावट केंद्रित स्रोत मिलता है। उपकरण के बाएँ-दाएँ पोर्ट, कनेक्टर अर्थ या नेटिव स्टेंसिल XML परिभाषित नहीं होते। आरेख में आवश्यक हों तो जानबूझकर बनाएँ।

बहुत सरल आयत और वृत्त चिह्न सीधे बनाना तेज़ हो सकता है। बची चित्रकृति में अलग पहचान वाले वक्र रखने हों तो ट्रेसिंग अधिक उपयोगी है। हाथ से बने रूपांकन के लिए नक्शा चित्र तैयारी मार्गदर्शिका ट्रेसिंग से पहले सफ़ाई बताती है।

बड़ा करने पर SVG में अब भी चौकोर पिक्सेल दिखते हों तो SVG रास्टर छवि निदान से एम्बेडेड बिटमैप देखें। छवि वेक्टराइज़ेशन अवलोकन पिक्सेल रखने और आकार पुनर्प्राप्त करने का व्यापक अंतर बताता है।

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

क्या SVG आयात करने से नेटिव draw.io स्टेंसिल बनता है? नहीं। छवि डालने का कार्यप्रवाह चित्र एम्बेड करता है। नेटिव कस्टम स्टेंसिल ज्यामिति, शैली और कनेक्शन बिंदु के लिए draw.io XML आकार परिभाषा लेता है।

क्या एम्बेडेड SVG में रंग बदल सकता हूँ? Draw.io उपयुक्त SVG CSS नियम और डाले ऑब्जेक्ट शैली की editableCssRules सेटिंग से रंग संपादन बताता है। स्रोत संरचना और डालने के बाद उपलब्ध नियंत्रण देखें।

क्या कस्टम लाइब्रेरी SVG पाथ नेटिव आकार बनाती है? लाइब्रेरी छवि और नेटिव कस्टम आकार सहित पुनः उपयोग योग्य आइटम रखती है। छवि लाइब्रेरी में सहेजने से अपने आप नेटिव ज्यामिति या कनेक्टर अर्थ नहीं जुड़ते।

क्या PNG वेक्टराइज़ करने से आरेख के कनेक्शन बिंदु बनेंगे? नहीं। वेक्टराइज़ेशन चित्र आउटलाइन पुनर्प्राप्त कर सकता है। आवश्यक हो तो कनेक्शन बिंदु और नेटिव आरेख व्यवहार अलग परिभाषित करें।

स्रोत

1. draw.io — आरेख में SVG छवियाँ डालें — छवि डालना, आकार और SVG से आरेख कनेक्टर पुनर्निर्माण की सीमा।
2. draw.io — जटिल कस्टम आकार बनाएँ और संपादित करें — नेटिव XML ज्यामिति, कनेक्शन शर्तें और ड्रॉइंग ऑपरेशन।
3. draw.io — एम्बेडेड SVG छवियों में रंग संपादित करें — CSS नियम संपादन और एम्बेडेड बनाम लिंक छवि आवश्यकताएँ।
4. draw.io — कस्टम आकार बनाएँ — स्टेंसिल संपादक, पूर्वावलोकन कार्यप्रवाह और डिफ़ॉल्ट शैली।
5. draw.io — कस्टम आकार लाइब्रेरी पर काम करें — मिश्रित लाइब्रेरी आइटम बनाना, सहेजना और पुनः उपयोग।

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