Flutter SVG छवियाँ: संसाधन शामिल करें, आकार दें और जाँचें

Flutter में SVG संसाधन दिखाने के लिए flutter_svg जोड़ें, pubspec.yaml में फ़ाइल घोषित करें और वही पाथ SvgPicture.asset से लोड करें। विजेट को आयाम या उपयुक्त लेआउट सीमाएँ दें, फिर ऐप में चित्र देखें। पैकेज का संसाधन कंस्ट्रक्टर लोडिंग विकल्प बताता है।

दो प्रश्न अलग रखें: क्या ऐप ने इच्छित फ़ाइल लोड की और क्या रेंडरर ने इच्छित चित्र बनाया? ड्रॉइंग फिर निर्यात करने से गलत संसाधन कुंजी नहीं सुधरेगी। कुंजी सुधारने से असमर्थित प्रभाव सरल नहीं होगा।

यह मार्गदर्शिका जाँचें सरल रखने के लिए पहाड़ियाँ और सूर्य का मौलिक चित्र लेती है। कोड दस्तावेज़ में दिए गए API का उपयोग करता है; यह किसी कंपाइल किए गए ऐप के परीक्षण की रिपोर्ट नहीं है।

छोटे स्रोत से शुरू करें जिसे देख सकें

Flutter प्रोजेक्ट में assets/illustrations/hills.svg बनाएँ:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48">
  <circle cx="49" cy="11" r="6" fill="#e99b30"/>
  <path d="M4 42L24 14L44 42Z" fill="#167d8d"/>
  <path d="M28 42L43 23L60 42Z" fill="#233b63"/>
</svg>

स्रोत में दो ओवरलैप त्रिकोणीय पहाड़ियाँ और अलग सुनहरा सूर्य है। स्पष्ट भरण हैं, टेक्स्ट या लिंक छवियाँ नहीं और सूर्य तथा पहाड़ियों के बीच दृश्य अंतराल है। ऐप जाँचते समय ये विवरण छोटी स्वीकार्यता सूची देते हैं।

बाद में अपना चित्र जोड़ते समय इस सरल फ़ाइल की प्रति रखें। छोटा स्रोत काम करे लेकिन बदला स्रोत विफल हो तो पूरा लोडिंग सेटअप बदलने से पहले संरचना मिलाएँ।

Flutter SVG संसाधन Android VectorDrawable XML से अलग वितरण विकल्प भी है। गंतव्य नेटिव Android drawable हो तो दोनों फ़ॉर्मेट को एक-दूसरे के स्थान पर लेने के बजाय Android VectorDrawable तैयारी मार्गदर्शिका अपनाएँ।

पैकेज जोड़ें और सटीक फ़ाइल घोषित करें

Flutter प्रोजेक्ट की रूट डायरेक्टरी से आधिकारिक स्थापना कमांड लें:

flutter pub add flutter_svg

फिर pubspec.yaml के मौजूदा flutter: खंड में संसाधन प्रविष्टि जोड़ें:

flutter:
  assets:
    - assets/illustrations/hills.svg

दूसरा flutter: खंड बनाने के बजाय प्रविष्टि वर्तमान विन्यास में मिलाएँ। दिखाया गया इंडेंट बनाए रखें। Flutter का संसाधन दस्तावेज़ ये पाथ pubspec.yaml के सापेक्ष परिभाषित करता है और सूचीबद्ध फ़ाइलें ऐप बंडल में कैसे आती हैं बताता है।

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

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

निर्धारित बॉक्स में चित्र लोड करें

विजेट वाली Dart फ़ाइल में ये आयात जोड़ें:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

स्क्रीन के उपयुक्त हिस्से में विजेट रखें:

SvgPicture.asset(
  'assets/illustrations/hills.svg',
  width: 128,
  height: 96,
  fit: BoxFit.contain,
  semanticsLabel: 'Sun above two hills',
  errorBuilder: (context, error, stackTrace) =>
      const Text('Illustration unavailable'),
)

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

कंस्ट्रक्टर दस्तावेज़ स्पष्ट आयाम या सख्त लेआउट सीमाएँ सुझाता है ताकि लोडिंग अनपेक्षित लेआउट बदलाव न करे। बॉक्स में चित्र छोटा लगे तो विजेट आयाम के साथ viewBox की खाली जगह देखें।

लेबल इस अकेली छवि का उद्देश्य बताता है। semanticsLabel API उसे छवि के अर्थ संबंधी लेबल से जोड़ता है। पहले से अर्थ बताने वाले टेक्स्ट के पास सजावटी छवि हो तो उसे semantics से बाहर रखने पर विचार करें। कंस्ट्रक्टर का excludeFromSemantics विकल्प लेबल से अधिक प्राथमिकता लेता है। हर आकार को अलग नाम देने के बजाय स्क्रीन रीडर पूरे कंपोनेंट का जो अर्थ बोलता है, उसकी समीक्षा करें।

लोडिंग प्लेसहोल्डर और त्रुटि अलग पहचानें

लोडिंग संकेत इस बात का प्रमाण नहीं है कि SVG स्वीकार कर लिया गया है। पैकेज सामग्री पाने या डिकोडिंग अवधि के लिए placeholderBuilder देता है, जबकि वर्तमान errorBuilder API छवि लोडिंग विफल होने पर विजेट देता है।

ऊपर दिए गए उदाहरण में विफलता की स्थिति में एक छोटा टेक्स्ट संदेश दिखाया जाता है। विकास में जानबूझकर Dart पाथ किसी गैर-मौजूद फ़ाइलनाम पर करें और देखें कि विफलता पहचान सकते हैं। आगे जाने से पहले सही पाथ वापस रखें। इससे ड्रॉइंग बदले बिना विफलता प्रस्तुति जाँची जाती है।

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

पैलेट रखने या रंगत लगाने का निर्णय करें

यदि पहाड़ियों को नीले-हरे और गहरे नीले रंग में तथा सूर्य को सुनहरे रंग में बनाए रखना है, तो colorFilter सेट न करें। जानबूझकर एक ही रंग का रूप देना हो, तो ऐसा फ़िल्टर जोड़ें:

colorFilter: const ColorFilter.mode(
  Color(0xFF175CD3),
  BlendMode.srcIn,
),

पैकेज यह रंगत तरीका बताता है। Flutter का BlendMode संदर्भ समझाता है कि srcIn गंतव्य की अपारदर्शिता लेता है लेकिन रंग चैनल अनदेखे करता है। एकसमान रंगत स्रोत पैलेट अंतर हटाती है; यह डिज़ाइन चुनाव है, मूल रंगों को सुरक्षित रखने की समस्या का समाधान नहीं है।

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

फ़ाइल लोड होने के बाद ही सुविधाएँ सरल करें

flutter_svg दस्तावेज़ Illustrator निर्यात में प्रस्तुति एट्रिब्यूट सुझाता है क्योंकि CSS समर्थन अधूरा है, और बाहरी लिंक के बजाय एम्बेडेड छवियाँ सुझाता है। वह कंपाइलर आधारित संगतता जाँच भी देता है। जटिल संसाधन की जाँच में अपने Flutter/Dart वातावरण में वह परीक्षण अपनाएँ।

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

स्रोत में अक्षर हों तो तय करें कि उन्हें ऐप के टेक्स्ट के रूप में रखना चाहिए या स्थिर चित्र के हिस्से के रूप में। SVG फ़ॉन्ट बदलाव मार्गदर्शिका बताती है कि रूप टेक्स्ट तथा फ़ॉन्ट प्रबंधन पर क्यों निर्भर हो सकता है। संसाधन पाथ समस्या हल करने के लिए लेबल ट्रेस न करें।

UI संसाधन परिवार में दृश्य आकार और दूरी साथ मिलाएँ। UI किट आइकन तैयारी मार्गदर्शिका एकरूपता जाँच में मदद करती है।

स्रोत पुनर्प्राप्ति चाहिए तो वेक्टराइज़ेशन लें

साफ़ मौजूदा SVG रखें। फोटो या बनावट वाली पृष्ठभूमि उचित रास्टर संसाधन के रूप में बेहतर हो सकती है; एक्सटेंशन बदलने से उपयोगी वेक्टर ज्यामिति नहीं बनती।

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

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

अनुकूलन रणनीति चुनने से पहले ऐप में संसाधन परखें। यह कार्यप्रवाह सामान्य वादा नहीं करता कि SVG, PNG से छोटा या तेज़ है।

चित्र .NET MAUI ऐप में पुनः लें तो MAUI स्रोत से PNG कार्यप्रवाह अपनाएँ। प्रोजेक्ट मूल SVG फ़ाइल रखता है, जबकि व्यू बिल्ड के दौरान तैयार किए गए PNG का संदर्भ देता है।

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

Flutter में SVG छवि कैसे जोड़ूँ? flutter_svg जोड़ें, pubspec.yaml में SVG संसाधन घोषित करें और मेल खाता पाथ SvgPicture.asset से लोड करें। आयाम या उपयुक्त सीमाएँ दें और परिणाम देखें।

स्थानीय SVG क्यों नहीं दिखता? पहले संसाधन घोषणा, सटीक पाथ, लोडिंग त्रुटि और लेआउट देखें। सरल स्रोत चले तो विफल चित्र की संरचना और समर्थित सुविधाएँ मिलाएँ।

सभी रंग समान क्यों हो गए? एकसमान srcIn रंग फ़िल्टर दृश्य पैलेट को अपनी रंगत से बदलता है। मूल रंग अलग रहने चाहिए तो फ़िल्टर हटाएँ।

क्या Flutter के लिए PNG को SVG बनाना आवश्यक है? नहीं। चित्र के अनुकूल हो तो उपयुक्त रास्टर संसाधन लें। सरल रास्टर स्रोत से संपादन योग्य आकार पुनर्प्राप्त करने में वेक्टराइज़ेशन वैकल्पिक है।

स्रोत

1. flutter_svg — स्थापना — पैकेज स्थापना और Dart आयात।
2. Flutter — संसाधन और छवियाँ जोड़ना — संसाधन घोषणा, पाथ और बंडल में शामिल करना।
3. flutter_svg — SvgPicture.asset — संसाधन लोडिंग, आयाम, fit और अर्थ नियंत्रण।
4. flutter_svg — errorBuilder — लोडिंग प्लेसहोल्डर से अलग विफलता प्रस्तुति।
5. flutter_svg — semanticsLabel — छवि का अर्थ संबंधी उद्देश्य।
6. Flutter — BlendMode — अपारदर्शिता आधारित srcIn रंग व्यवहार।
7. flutter_svg — पैकेज दस्तावेज़ — रंगत, चुनिंदा रंगों को बदलना, निर्यात मार्गदर्शन और संगतता जाँचें।

एक घोषित संसाधन से शुरू करें और ऐप में पाथ, पैलेट, आकार तथा अर्थ देखें। रास्टर चित्र पुनर्प्राप्त करना हो तो SVG उम्मीदवार तैयार करें, आकार देखें और संसाधन परिवार में जोड़ने से पहले वही जाँचें चलाएँ।