SwiftUI में SVG: संसाधन जोड़ें और रंग नियंत्रित करें

SwiftUI ऐप में शामिल स्थिर SVG के लिए चित्र Xcode संसाधन कैटलॉग में रखें और संसाधन नाम से छवि लोड करें। फिर तय करें कि मूल रंग रहें या वह एक रंग से भरी आकृति बने। Apple ने Xcode 12 में SVG छवि संसाधन जोड़े; उसके रिलीज़ नोट iOS 13, iPadOS 13 और macOS 10.15 या बाद के डिप्लॉयमेंट लक्ष्यों के लिए वेक्टर संरक्षण बताते हैं।

यह कैटलॉग कार्यप्रवाह ऐप चलते समय SVG फ़ाइल डाउनलोड करने से अलग है। यह कस्टम SF Symbol बनाने से भी अलग है। चित्र बदलने या रेंडरर पैकेज जोड़ने से पहले वितरण विकल्प चुनें।

इस विशेष छवि का विकल्प चुनें

SVG स्रोत फ़ाइल है। ऐप उसे कैसे प्राप्त और उपयोग करता है, इससे अगला चरण तय होता है।

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

UI किट तैयारी मार्गदर्शिका पूरे सेट की एकरूपता का व्यापक काम बताती है। यहाँ प्रश्न है कि एक स्वीकृत SVG, SwiftUI Image तक कैसे पहुँचता है।

दृश्य जाँचों वाला छोटा स्रोत तैयार करें

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

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

अपने चित्र में आयात से पहले स्रोत देखें। अत्यधिक खाली कैनवास सही दृश्य आयाम पर भी आइकन छोटा दिखाता है। सफ़ेद पृष्ठभूमि आयत टेम्पलेट की एकरंगी आकृति का हिस्सा बनता है। एम्बेडेड फोटो आसपास के पाथ से अलग सामग्री रहती है; एम्बेडेड रास्टर जाँच अंतर पहचानने में मदद करती है।

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

सामान्य छवि सेट के रूप में जोड़ें

ऐप का संसाधन कैटलॉग खोलें, सामान्यतः Assets.xcassets। नया छवि सेट जोड़ें और CupMark नाम दें। SVG उपयुक्त छवि स्थान में खींचें। Apple की संसाधन कैटलॉग मार्गदर्शिका सेट बनाना, संसाधन आयात और Attributes inspector से रूपांतर देना बताती है।

इस उदाहरण में छवि सेट लें। केवल स्रोत .svg पर समाप्त होता है इसलिए चिह्न छवि कार्यप्रवाह न चुनें।

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

CupMark नीचे उपयोग किया छवि संसाधन नाम है। यह डाउनलोड URL या डिज़ाइन फ़ोल्डर के मूल SVG का पाथ नहीं। Apple का Image प्रारंभकर्ता बंडल में नाम से संसाधन ढूँढ़ता है; डिफ़ॉल्ट मुख्य बंडल है। छवि दूसरे संसाधन बंडल की हो तो जानबूझकर वह बंडल दें।

हस्तांतरण नोट में फ़ाइलनाम और संसाधन नाम का अंतर रखें। साथी मूल डिज़ाइन फ़ाइलनाम बदले बिना संसाधन सेट नाम बदल सकता है और कोड को वही संसाधन नाम अपनाना होगा जो वास्तव में लोड करता है।

मूल और टेम्पलेट रेंडरिंग की तुलना करें

CupMark छवि सेट जोड़ने के बाद यह दृश्य लें:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

बायाँ संस्करण स्पष्ट रूप से मूल रेंडरिंग माँगता है। दायाँ टेम्पलेट रेंडरिंग माँगकर अग्रभूमि शैली में नीला देता है। Apple का टेम्पलेट रेंडरिंग दस्तावेज़ टेम्पलेट मोड को गैर-पारदर्शी पिक्सेल के अग्रभूमि रंग लेने के रूप में परिभाषित करता है। यह पूरी दृश्य आकृति को एक रंग देने का तरीका है, केवल एक SVG पाथ का रंग बदलने का कमांड नहीं।

कप में इसका अर्थ है कि दाएँ संस्करण में नीली भाप और नीला कप होना चाहिए। मूँगा/नीले-हरे रंग का अंतर जानबूझकर हटता है। हैंडल का खुला भाग खाली रहना चाहिए। ऐप को कप से स्वतंत्र भाप बदलनी हो तो एक टेम्पलेट छवि से प्रति-पाथ शैली की अपेक्षा करने के बजाय ऐसी वितरण संरचना चुनें जो वे हिस्से अलग उपलब्ध कराए।

मॉडिफ़ायर आकार निर्णय भी स्पष्ट करते हैं। resizable() छवि का आकार बदलने का व्यवहार सक्षम करता है और scaledToFit() 48-पॉइंट फ़्रेम के अंदर अनुपात सुरक्षित रखता है। दृश्य फ़्रेम और चित्र का अपना कैनवास अलग सीमाएँ हैं: SVG के अंदर अतिरिक्त खाली जगह अब भी स्रोत का हिस्सा है।

यह अपने प्रोजेक्ट में आज़माने के लिए दस्तावेज़ आधारित उदाहरण है, वास्तविक Apple ऐप में किए गए रेंडरिंग परीक्षण की रिपोर्ट नहीं। वास्तविक बिल्ड ऐप जाँचें, जिसमें चिह्न का सबसे छोटा नियोजित उपयोग आकार भी हो। साफ़ 48-पॉइंट पूर्वावलोकन नहीं सिद्ध करता कि दोनों भाप स्ट्रोक 16 पॉइंट पर उपयोगी रहेंगे।

फ़ाइल बदलने से पहले दृश्य परिणाम का निदान करें

गायब छवि, बदला रंग और छोटे आकार पर खराब दिखती आकृति के लिए अलग मरम्मत चाहिए।

एक बार में एक परत बदलें। स्रोत में सही खुला भाग पहले से हो तो ट्रेस फिर बनाने से गलत संसाधन नाम ठीक नहीं होगा। खोज काम करती हो लेकिन टेम्पलेट मोड रंग अंतर हटाए तो SVG में और रंग जोड़ने से चुना रेंडरिंग मोड नहीं बदलेगा।

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

रनटाइम SVG और SF Symbols अलग निर्णय रखें

नाम वाली कैटलॉग छवि मनमाने SVG XML पाने और पार्स करने का API नहीं है। फ़ाइल ऐप बिल्ड होने के बाद आए तो स्पष्ट रूप से उस इनपुट को संभालने वाला रेंडरर चुनें। उदाहरण के लिए SVGView प्रोजेक्ट README SwiftUI में लिखा SVG पार्सर और रेंडरर बताता है। फ़ाइलों की वास्तविक SVG सुविधाएँ परखें; पैकेज का व्यापक समर्थन लक्ष्य पूरे इनपुट सेट की सही रेंडरिंग का प्रमाण नहीं।

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

कस्टम SF Symbols का स्रोत अनुबंध अलग है। Apple टेम्पलेट आधारित निर्माण और सत्यापन कार्यप्रवाह बताता है, जिसमें चिह्न रूपांतर और संरेखण जानकारी है। सामान्य कप SVG छवि सेट में रखने से वे गुण नहीं पाता। ऐप को चिह्न व्यवहार चाहिए तो वह कार्यप्रवाह लें और उसकी आवश्यक टेम्पलेट संरचना रखें।

प्लेटफ़ॉर्म वितरण फ़ॉर्मेट स्वतंत्र जाँचने योग्य हैं। वही चित्र Android भी जा रहा हो तो VectorDrawable हस्तांतरण मार्गदर्शिका अपनाएँ; एक प्लेटफ़ॉर्म आयातक की स्वीकृति दूसरे की स्वीकृति नहीं सिद्ध करती।

आइकन केवल PNG में हो तो

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

मूल वेक्टर मौजूद हो तो वही लें। फोटो और प्रभाव प्रधान छवियों की दिखावट बेहतर सुरक्षित रहे तो रास्टर रखें। वेक्टराइज़ेशन ज्यामिति तैयार करता है; वह Xcode कैटलॉग कंपाइल नहीं करता, संसाधन बंडल नहीं चुनता और आवश्यक रूपांतर वाला SF Symbols टेम्पलेट नहीं बनाता।

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

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

क्या SwiftUI संसाधन कैटलॉग का SVG उपयोग कर सकता है? हाँ। Xcode SVG छवि संसाधन समर्थित करता है। फ़ाइल सामान्य छवि सेट में जोड़ें और Image से नाम वाला संसाधन लोड करें। इसे मनमानी रनटाइम SVG फ़ाइल समर्थन मानने के बजाय डिप्लॉयमेंट लक्ष्य और वास्तविक कैटलॉग बिल्ड सत्यापित करें।

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

क्या Image वेब URL से SVG लोड कर सकता है? नाम वाला Image प्रारंभकर्ता संसाधन खोज है, URL आधारित SVG पार्सर नहीं। रनटाइम SVG फ़ाइलों के लिए उपयुक्त रेंडरिंग और लोडिंग कार्यप्रवाह चाहिए जिसे वास्तविक इनपुट से सत्यापित करें।

क्या SVG छवि सेट और कस्टम SF Symbol एक ही हैं? नहीं। कस्टम चिह्न आवश्यक संरचना, रूपांतर, संरेखण जानकारी और सत्यापन वाला टेम्पलेट लेते हैं। सामान्य SVG छवि सेट अपने आप वे चिह्न गुण नहीं देता।

स्रोत

1. Apple — Xcode 12 रिलीज़ नोट — SVG छवि संसाधन समर्थन और वेक्टर संरक्षण के बताए डिप्लॉयमेंट लक्ष्य।
2. Apple — संसाधन कैटलॉग से संसाधन प्रबंधन — संसाधन सेट, आयात स्थान और रूपांतर।
3. Apple — Image init(_:bundle:) — नाम वाला संसाधन और बंडल खोज।
4. Apple — Image.TemplateRenderingMode — मूल और टेम्पलेट रेंडरिंग मोड।
5. Apple — resizable(capInsets:resizingMode:) — स्पष्ट छवि आकार बदलाव व्यवहार।
6. Apple — scaledToFit() — अनुपात सुरक्षित रखते हुए समाना।
7. Apple — ऐप के लिए कस्टम चिह्न छवियाँ बनाना — कस्टम चिह्न टेम्पलेट, रूपांतर और सत्यापन।
8. Exyte — SVGView — SwiftUI के लिए अलग SVG पार्सिंग और रेंडरिंग समाधान।

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