WPF में SVG: रेंडरर या XAML ड्रॉइंग चुनें

SVG आपके ब्राउज़र में खुल जाता है, लेकिन उसका फ़ाइलनाम WPF Image में डालने से वही रेंडरिंग प्रक्रिया नहीं मिलती। पहले चुनें कि अनुप्रयोग को वास्तव में क्या मिलेगा: लाइब्रेरी से संसाधित SVG, WPF के अंतर्निहित ड्रॉइंग ऑब्जेक्ट या रास्टर निर्यात।

WPF के अंतर्निहित छवि कोडेक में PNG और JPEG हैं, लेकिन SVG सूचीबद्ध नहीं है। उसका Image कंट्रोल DrawingImage भी दिखा सकता है, इसलिए वेक्टर प्रदर्शन के लिए SVG फ़ाइल सीधे लोड करना आवश्यक नहीं। Microsoft इन्हें अलग छवि और ड्रॉइंग स्रोत विकल्पों के रूप में बताता है।

यह मार्गदर्शिका विकल्प स्पष्ट करने के लिए मौलिक बुकमार्क आइकन लेती है। नीचे के SVG और XAML हाथ से लिखे गए हैं; ये कन्वर्टर के प्रदर्शन की तुलना या Windows अनुप्रयोग के कैप्चर नहीं हैं।

फ़ाइल बदलने से पहले प्रस्तुति का रूप चुनें

ये विकल्प उस ऑब्जेक्ट से जुड़े हैं जिसे अनुप्रयोग दिखाता है। इनसे यह तय नहीं होता कि डिज़ाइनर को संपादन योग्य SVG मूल रखना चाहिए या नहीं। ऐप को PNG मिलने पर भी वह मूल रखें।

पहले WPF का छोटा अंतर्निहित DrawingImage आज़माएँ

सरल आइकन के लिए हाथ से लिखी ड्रॉइंग SVG पार्सर जोड़े बिना उपयोगी आधार देती है। Microsoft संरचना दिखाता है: Image.Source को DrawingImage पर सेट करें, फिर उसकी Drawing प्रॉपर्टी में ड्रॉइंग दें। निम्न मौलिक उदाहरण उसी दस्तावेज़ में बताए तरीके का अनुसरण करता है।

यह SVG डिज़ाइन है: नीले-हरे रंग का बुकमार्क और अलग मूँगा रंग का वृत्त। संपादक में तुलना के लिए स्रोत चाहिए तो इसे bookmark.svg नाम से सहेजें।

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80"
     viewBox="0 0 120 80">
  <path fill="#176B64" d="M20 12 H64 V68 L42 54 L20 68 Z"/>
  <circle fill="#EC785E" cx="92" cy="24" r="10"/>
</svg>

यह Image किसी मौजूदा WPF विंडो के लेआउट कंटेनर, जैसे Grid, में रखें:

<Image xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       Width="120" Height="80" Stretch="Uniform">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>
          <GeometryDrawing Brush="Transparent"
                           Geometry="M0,0 H120 V80 H0 Z"/>
          <GeometryDrawing Brush="#176B64"
                           Geometry="M20,12 H64 V68 L42,54 L20,68 Z"/>
          <GeometryDrawing Brush="#EC785E">
            <GeometryDrawing.Geometry>
              <EllipseGeometry Center="92,24" RadiusX="10" RadiusY="10"/>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

दो दिखाई देने वाले ड्रॉइंग ऑब्जेक्ट बुकमार्क और वृत्त को अलग वर्णित करते हैं। पारदर्शी आयत उदाहरण की पूरी 120 × 80 ड्रॉइंग सीमा तय करता है, जिसमें चित्र के चारों ओर खाली जगह भी है। वह बाद की ज्यामिति को क्लिप नहीं करता और XAML को SVG दस्तावेज़ नहीं बनाता।

निर्देशांक जानबूझकर चुने गए हैं। दोनों अंशों की तुलना करें: बुकमार्क वही बिंदु और वृत्त वही केंद्र तथा त्रिज्या लेता है। यह छोटा मैन्युअल रूपांतरण है जिसे आप जाँच सकते हैं; हर SVG सुविधा को XAML में बदलने की विधि नहीं।

स्रोत फ़ाइलों को XML के रूप में जाँचा गया है, लेकिन उदाहरण किसी Windows WPF अनुप्रयोग में बिल्ड या रेंडर नहीं हुआ। अपनाने से पहले अपने प्रोजेक्ट में परीक्षण करें।

दोबारा उपयोग योग्य बनाने से पहले सीमाएँ और ब्रश जाँचें

दिए आकार से शुरू करें। पुष्टि करें कि बुकमार्क का निचला कटाव दिखता रहे और वृत्त अलग रहे। फिर अधिक चौड़ा या ऊँचा लेआउट स्थान आज़माएँ। Stretch="Uniform" उपलब्ध क्षेत्र में समाते हुए अनुपात सुरक्षित रखता है, जैसा Microsoft के छवि खींचने के मार्गदर्शन में बताया है।

मूँगा रंग के Brush मान को दूसरे रंग में बदलें। यह WPF के अंतर्निहित ड्रॉइंग ऑब्जेक्ट का जानबूझकर किया संपादन है; इससे यह सिद्ध नहीं होता कि मनमाने आयातित SVG हिस्से भी वही सुविधाजनक नियंत्रण देंगे।

ड्रॉइंग केंद्र से हटी लगे तो उसकी सीमाओं को SVG के viewBox और खाली हाशियों से मिलाएँ। सही बाहरी आकृति भी लेआउट स्थान का अलग अनुपात घेर सकती है। अंतिम चित्र जोड़ते समय यह सरल आधार बनाए रखें।

SVG ही इनपुट रहे तो रेंडरर लें

WPF की अंतर्निहित ज्यामिति हाथ से बनाए रखना अव्यावहारिक हो तो ऐसी लाइब्रेरी परखें जो स्पष्ट रूप से WPF के लिए SVG पढ़ती हो। SharpVectors.Wpf पैकेज SVG पार्सिंग, रूपांतरण और प्रदर्शन कंपोनेंट देता है। प्रोजेक्ट में जोड़ने से पहले वर्तमान संस्करण, लक्षित फ़्रेमवर्क और निर्भरताएँ जाँचने के लिए उसका पैकेज पृष्ठ उपयुक्त है।

SharpVectors का आरंभिक दस्तावेज़ WPF ड्रॉइंग ऑब्जेक्ट में रूपांतरण और छवि आधारित प्रदर्शन के उदाहरण बताता है। इसलिए यह सामान्य बिटमैप प्रक्रिया से SVG फ़ाइलनाम डिकोड करवाने से अलग विकल्प है।

मौलिक बुकमार्क को पहला लाइब्रेरी इनपुट लें, फिर अपना वास्तविक चित्र रखें। ये जाँचें अलग रखें:

1. लोड करना: क्या चुना उदाहरण आपके प्रोजेक्ट में फ़ाइल या अनुप्रयोग संसाधन ढूँढ़ता है?
2. रूप: क्या API आपके उपयोग के लिए ड्रॉइंग ऑब्जेक्ट लौटाता है, XAML बनाता है या बिटमैप रेंडर करता है?
3. दिखावट: क्या चल रहे अनुप्रयोग में कटाव, अलग वृत्त, रंग और खाली हाशिए सही हैं?
4. तैनाती: क्या लक्ष्य मशीन पर परिणाम के लिए लाइब्रेरी की रनटाइम असेंबली या अन्य संसाधन चाहिए?

अपने स्थापित संस्करण से मेल खाते उदाहरण अपनाएँ। SharpVectors IncludeRuntime सेटिंग बताता है, TextAsGeometry को अप्रचलित बताता है और संस्करण 2.0 में नामस्थान बदलाव चिन्हित करता है। इसलिए पुराने अंशों की सेटिंग कॉपी करने से पहले जाँचें; यह न मानें कि एक रूपांतरण विन्यास हमेशा उपयुक्त रहेगा। SharpVectors दस्तावेज़

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

गलत XAML फ़्रेमवर्क से SvgImageSource न लें

इस समस्या की खोज आपको Microsoft के SvgImageSource संदर्भ तक ले जा सकती है। UWP क्लास दस्तावेज़ उस प्रकार को Windows.UI.Xaml.Media.Imaging में रखता है। यह WPF के System.Windows कंट्रोल और मीडिया क्लास से अलग API है।

नामस्थान या पैकेज जोड़ने से पहले उदाहरण में बताया फ़्रेमवर्क जाँचें। मिलता-जुलता XAML मार्कअप UWP या WinUI छवि स्रोत को अंतर्निहित WPF सुविधा नहीं बनाता। दूसरे फ़्रेमवर्क का समाधान वहाँ सही होते हुए भी आपके डेस्कटॉप प्रोजेक्ट के लिए गलत हो सकता है।

तय करें कि PNG पर्याप्त है या नहीं

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

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

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

विस्तृत छवि वेक्टराइज़ेशन मार्गदर्शिका उस स्रोत पुनर्प्राप्ति चरण को समझाती है। स्रोत तैयार होने पर अनुप्रयोग की जाँचें अब भी WPF में करनी हैं।

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

क्या WPF Image सीधे SVG फ़ाइल लोड कर सकता है? WPF के दस्तावेज़ में बताए अंतर्निहित छवि कोडेक में SVG नहीं है। SVG समर्थित लाइब्रेरी लें, DrawingImage से WPF के अंतर्निहित ड्रॉइंग ऑब्जेक्ट दें या PNG जैसा समर्थित रास्टर फ़ॉर्मेट दें।

क्या DrawingImage और SVG फ़ाइल एक ही चीज़ हैं? नहीं। DrawingImage WPF ड्रॉइंग ऑब्जेक्ट दिखाता है। SVG लाइब्रेरी वे ऑब्जेक्ट बना सकती है या आप सीधे लिख सकते हैं, जैसा यहाँ छोटे उदाहरण में किया है।

क्या मैं WPF में UWP SvgImageSource उदाहरण उपयोग कर सकता हूँ? उसे अंतर्निहित WPF API न मानें। UWP संदर्भ दूसरे नामस्थान और फ़्रेमवर्क का है; अपने वास्तविक अनुप्रयोग के लिए कोड और निर्भरताएँ चुनें।

क्या SVG को XAML में बदलने से हर प्रभाव सुरक्षित रहेगा? ऐसा न मानें। कन्वर्टर की दस्तावेज़ में बताई क्षमताएँ जाँचें और लक्ष्य अनुप्रयोग में टेक्स्ट, सीमाओं, अलग आकारों तथा प्रभावों सहित चित्र देखें।

स्रोत

1. Microsoft — WPF छवि अवलोकन — अंतर्निहित बिटमैप फ़ॉर्मेट और छवि खींचने का व्यवहार।
2. Microsoft — छवि स्रोत के रूप में ड्रॉइंग उपयोग करें — WPF का अंतर्निहित DrawingImage और ड्रॉइंग ऑब्जेक्ट संरचना।
3. SharpVectors — शुरुआत करें — WPF ड्रॉइंग रूपांतरण, रनटाइम सेटिंग और दस्तावेज़ में बताई माइग्रेशन सावधानियाँ।
4. NuGet — SharpVectors.Wpf — वर्तमान पैकेज पहचान और संगतता जानकारी।
5. Microsoft — UWP SvgImageSource क्लास — अक्सर भ्रमित किए जाने वाले API की फ़्रेमवर्क और नामस्थान सीमा।

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