.NET MAUI में SVG: SVG रखें, PNG संदर्भ दें

.NET MAUI के ऐप में शामिल छवि कार्यप्रवाह में SVG उपयोग करने के लिए SVG प्रोजेक्ट में रखें और XAML या C# से उसके बने PNG नाम का संदर्भ दें। MAUI बिल्ड के दौरान वेक्टर स्रोत संसाधित करता है। इसलिए compass.png को दिखाता Image सही हो सकता है, भले आपने compass.svg जोड़ा हो। Microsoft की प्रोजेक्ट छवि मार्गदर्शिका यह रूपांतरण बताती है।

इससे फ़ाइलनाम स्पष्ट होता है, लेकिन डिज़ाइन प्रश्न बाकी है: MAUI को कौन सा आकार बनाना चाहिए और उसके बाद क्या देखें? एक छोटे कम्पास चिह्न को स्रोत, प्रोजेक्ट मेटाडेटा और प्रदर्शन घोषणा तक देखें।

बिल्ड में स्रोत का क्रम समझें

संपादन योग्य SVG और पैकेज में शामिल छवि के अलग काम हैं। स्रोत रखें ताकि बाद में आकार, खाली जगह या रंग बदल सकें। उसे दिखाने वाले दृश्य में बने नाम का उपयोग करें।

Image कंट्रोल दस्तावेज़ ऐप पैकेज में आने वाली लक्ष्य घनत्व की छवियाँ और ऑपरेटिंग सिस्टम द्वारा उपयुक्त रिज़ॉल्यूशन का चयन बताता है। SVG मूल रखने का अर्थ यह नहीं कि यह विशेष कार्यप्रवाह दृश्य को जीवंत SVG दस्तावेज़ देता है।

स्पष्ट सीमाओं वाला छोटा SVG जोड़ें

यह मौलिक उदाहरण Resources/Images/compass.svg नाम से सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <circle cx="48" cy="48" r="34" fill="none" stroke="#173e52" stroke-width="8"/>
  <path d="M58 28L52 52L28 58Z" fill="#ed765e"/>
</svg>

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

प्रोजेक्ट में पुष्टि करें कि फ़ाइल का बिल्ड एक्शन MauiImage है। Microsoft सामान्य स्थान के रूप में Resources/Images फ़ोल्डर बताता है। XML जोड़ने से पहले मौजूदा प्रोजेक्ट आइटम देखें: प्रोजेक्ट उस फ़ोल्डर को वाइल्डकार्ड से पहले ही शामिल कर सकता है। प्रोजेक्ट छवि सेटअप स्थान और बिल्ड एक्शन बताता है।

मौजूदा आइटम एक बार अपडेट करें

मौजूदा MauiImage वाइल्डकार्ड में कम्पास फ़ाइल पहले से हो तो उस समावेशन के बाद यह मेटाडेटा अपडेट रखें:

<ItemGroup>
  <MauiImage Update="Resources\Images\compass.svg" BaseSize="48,48" />
</ItemGroup>

Update पहले से मौजूद आइटम का मेटाडेटा बदलता है। वह गायब फ़ाइल आइटम सूची में नहीं जोड़ता। प्रोजेक्ट में मेल खाता समावेशन न हो तो MauiImage बिल्ड एक्शन या स्पष्ट Include से फ़ाइल एक बार जोड़ें। Microsoft का MSBuild Item संदर्भ इन ऑपरेशन का अंतर बताता है।

इससे एक आकर्षक लेकिन गलत मरम्मत से बचते हैं: गायब छवि की समस्या खोजते समय बार-बार Include प्रविष्टियाँ जोड़ना। पहले तय करें कि फ़ाइल शामिल है या नहीं, फिर उसका मेटाडेटा बदलें।

PNG का संदर्भ दें और प्रदर्शन क्षेत्र तय करें

यह घोषणा मौजूदा MAUI पृष्ठ या लेआउट में रखें:

<Image Source="compass.png"
       WidthRequest="48"
       HeightRequest="48"
       Aspect="AspectFit"
       SemanticProperties.Description="Compass" />

.png एक्सटेंशन जानबूझकर है। चौड़ाई और ऊँचाई चौकोर प्रदर्शन क्षेत्र माँगती हैं; AspectFit उसके अंदर पूरी छवि दिखाता है। चित्र आयताकार हो तो चौकोर भरने के लिए खींचने के बजाय उसके अनुकूल प्रदर्शन क्षेत्र लें। Microsoft का Image आकार संदर्भ समाने, काटने और खींचने का अंतर बताता है।

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

BaseSize और लेआउट आकार अलग समस्याएँ हल करते हैं

BaseSize="48,48" आधार आयाम देता है जिनसे MAUI घनत्व विशेष छवियाँ बनाता है। स्पष्ट आधार आकार के बिना MAUI SVG के अपने आयाम लेता है। Microsoft दोनों नियम छवि का आकार बदलें में बताता है।

इस उदाहरण में स्रोत ड्रॉइंग 96 × 96 निर्देशांक क्षेत्र लेती है, जबकि माँगा आधार और दृश्य 48 × 48 हैं। ये जानबूझकर चुने अंक हैं, बिल्ड से मापे परिणाम आयाम नहीं। आकार बदलने पर छल्ले का अनुपात बना रहना चाहिए।

बाद में उसी चिह्न को कहीं बड़े दृश्य में लें तो बिल्ड आकार फिर देखें और उस उपयोग को भी जाँचें। WidthRequest बदलने से स्रोत चित्र या बिल्ड मेटाडेटा नहीं बदलता। इसी तरह BaseSize बदलने से SVG के खाली हाशिए नहीं हटते। सही आकार वाले दृश्य के अंदर चिह्न छोटा लगे तो स्रोत की ड्रॉइंग सीमाएँ कसें।

Resize="false" को तीक्ष्णता की सामान्य मरम्मत न बनाएँ। वह इस प्रक्रिया में वेक्टर छवि का आकार बदलना बंद करता है। केवल यही व्यवहार चाहिए तभी दस्तावेज़ में बताए आकार विकल्प के अनुसार चुनें।

गायब या अनपेक्षित छवि क्रम से जाँचें

1. फ़ाइलनाम और प्रोजेक्ट आइटम की पुष्टि करें। compass.svg जैसा छोटे अक्षरों वाला नाम लें और उसी नाम की दूसरी छवि देखें। Microsoft के नामकरण नियम अनूठे छवि नाम और Android संगत अक्षर माँगते हैं।
2. दृश्य का स्रोत जाँचें। ऐप में शामिल SVG कार्यप्रवाह के लिए XAML या C# में compass.png लें।
3. इच्छित प्रदर्शन क्षेत्र की आधार आकार से तुलना करें। दृश्य आकार और बिल्ड आकार का बदलाव अलग जगह होता है।
4. चित्र स्वयं देखें। क्या छल्ले का केंद्र अब भी खुला है? क्या मूँगा रंग की सुई अलग पहचान में आती है? क्या चिह्न केंद्र में है या अदृश्य स्रोत खाली जगह उसे किनारे करती है?

रंग बदलने वाला छवि मेटाडेटा भी देखें। प्रोजेक्ट छवि मार्गदर्शिका रंगत और पृष्ठभूमि रंग के लिए TintColor तथा Color बताती है। इस दो-रंग उदाहरण में दिखावट बदलने का इरादा न हो तो उन्हें सेट न करें। वास्तविक पृष्ठभूमि पर छवि देखें, जहाँ खोया पारदर्शी खुला भाग आसानी से दिखता है।

रनटाइम पर SVG व्यवहार चाहिए तो

डाउनलोड SVG सामग्री, इंटरैक्टिव पाथ या रनटाइम संपादन के लिए अलग कार्यान्वयन निर्णय चाहिए। ऊपर के ऐप में शामिल छवि निर्देश इन कामों के समर्थन को सिद्ध नहीं करते।

उदाहरण के लिए Vapolia SVG नमूना प्रोजेक्ट अपने SvgImage और SvgImageSource कंट्रोल तथा एम्बेडेड संसाधन सेटअप बताता है। यह अलग लोडिंग अनुबंध है। जोड़ने से पहले वास्तविक फ़ाइल से रेंडरर की समर्थित सुविधाएँ और लक्ष्य प्लेटफ़ॉर्म परखें; सामान्य Image घोषणा में फ़ाइल एक्सटेंशन बदलने से रेंडरर स्थापित नहीं होता।

उसी चित्र के लिए Flutter SVG छवि कार्यप्रवाह, SwiftUI संसाधन कैटलॉग और Android VectorDrawable आयात में अलग सेटअप चाहिए। स्रोत मूल दोबारा लें, फिर हर गंतव्य के नियम अपनाएँ।

केवल PNG बचे तो वेक्टर मूल तैयार करें

कम्पास या लोगो केवल PNG में हो तो MAUI प्रोजेक्ट में जोड़ने से पहले PerfectVector संपादन योग्य SVG चित्र बनाने में मदद कर सकता है। PNG को SVG में बदलें, फिर संपादक में छल्ले का खुला केंद्र, छोटे अलग हिस्से और दूरी देखें। बाद के आकार या रंग बदलाव के लिए साफ़ मूल रखें।

वेक्टराइज़ेशन MauiImage घोषणा की मरम्मत नहीं करता और ऐप में शामिल छवि प्रक्रिया को रनटाइम SVG पार्सर नहीं बनाता। स्रोत पहले से संपादन योग्य SVG हो तो प्रोजेक्ट विन्यास या ड्रॉइंग पर सीधे काम करें। फोटो और बनावट वाले चित्र रास्टर छवि के रूप में अधिक उपयोगी हो सकते हैं; केवल ऐप SVG स्रोत स्वीकार करता है इसलिए उन्हें ट्रेस करना अलग चित्र संबंधी निर्णय जोड़ता है।

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

SVG जोड़ने पर मैं PNG का संदर्भ क्यों देता हूँ? .NET MAUI बिल्ड के दौरान ऐप में शामिल SVG छवि स्रोतों को PNG बनाता है। SVG प्रोजेक्ट में रखें और XAML या C# से PNG फ़ाइलनाम का संदर्भ दें।

क्या BaseSize, Image कंट्रोल का आकार तय करता है? BaseSize घनत्व विशेष बिल्ड छवियाँ निकालने के आधार आयाम तय करता है। दृश्य का लेआउट और आकार अनुरोध उसका प्रदर्शन क्षेत्र नियंत्रित करते हैं।

क्या BaseSize बदलने के लिए मुझे दूसरा MauiImage Include जोड़ना चाहिए? वाइल्डकार्ड सहित जाँचें कि फ़ाइल पहले से शामिल है या नहीं। मौजूदा आइटम का मेटाडेटा बदलने के लिए Update लें; आइटम जोड़ना हो तभी Include लें।

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

स्रोत

1. Microsoft — .NET MAUI ऐप प्रोजेक्ट में छवियाँ जोड़ें — SVG से PNG बनाने की प्रक्रिया, छवि आइटम, फ़ाइलनाम, आधार आकार और बिल्ड मेटाडेटा।
2. Microsoft — Image — स्थानीय छवि संदर्भ, लक्ष्य घनत्व चयन, दृश्य आकार और आकार बदलने का व्यवहार।
3. Microsoft — Item एलिमेंट (MSBuild) — Include से आइटम जोड़ने और Update से मौजूदा मेटाडेटा बदलने का अंतर।
4. Vapolia — SVG नमूने — अलग रनटाइम SVG कंट्रोल और संसाधन लोडिंग कार्यप्रवाह।

केवल रास्टर ऐप चिह्न से शुरू कर रहे हैं? PNG को संपादन योग्य SVG में बदलें, उसके खुले भाग और दूरी जाँचें, फिर वह मूल MAUI में जोड़कर लक्ष्य ऐप में बनी छवि देखें।