SVG CSS मास्क: दृश्य आकृति रखें, रंग तय करें

SVG CSS मास्क नियंत्रित करता है कि एलिमेंट के कौन से हिस्से दिखाई रहें। एक-रंग आइकन के लिए SVG की दृश्य आकृति को मास्क के रूप में लें और एलिमेंट को background-color: currentColor से रंगें। तब आइकन SVG का मूल पैलेट दिखाने के बजाय CSS से दृश्य रंग लेता है।

स्रोत पारदर्शिता से शुरू करें। चित्र के पीछे अपारदर्शी आयत इच्छित आइकन को ठोस ब्लॉक बना सकता है। नीचे का पृष्ठ दिखना चाहिए तो पारदर्शी खुला भाग पारदर्शी ही रहना चाहिए।

MDN का mask-image संदर्भ बताता है कि स्रोत छवि और मास्किंग मोड दृश्यता कैसे तय करते हैं। व्यावहारिक काम उपयोगी दृश्य आकृति तैयार करना, उसकी व्याख्या चुनना और इंटरफ़ेस के आकार पर देखना है।

एक रंग से भरी दृश्य आकृति चाहिए तो मास्क लें

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

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

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

वास्तविक खुले भाग वाला छोटा स्रोत तैयार करें

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="#087f8c" fill-rule="evenodd"
    d="M5 3H19V21L12 17L5 21Z M12 6L15 9L12 12L9 9Z"/>
  <rect x="9" y="13" width="6" height="2" fill="#e76f51"/>
</svg>

पहले पाथ में बाहरी बुकमार्क और हीराकार खुला भाग है। पूरे आकार का पृष्ठभूमि आयत नहीं। छोटा दूसरा आयत मूँगा रंग की पट्टी है।

मास्क बनाने से पहले SVG विपरीत पृष्ठभूमि पर खोलें। देखें कि हीरे और बाहरी सीमा के आसपास से नीचे दिखता है। ठोस बुकमार्क पर रंगा सफ़ेद हीरा सफ़ेद पृष्ठ पर समान लग सकता है, लेकिन अल्फ़ा मास्क में अब भी अपारदर्शी होगा।

मौजूदा संसाधन में दृश्य रूपांकन के साथ पृष्ठभूमि आकार भी देखें। पारदर्शी SVG पृष्ठभूमि मार्गदर्शिका खाली जगह और सफ़ेद आयत का अंतर बताती है।

CSS से आइकन एलिमेंट रंगें

SVG के पास icon.css रखें और ये नियम लें:

.bookmark-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("./bookmark.svg");
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #175cd3;
}

बटन पर दृश्य लेबल लें:

<button class="save-button" type="button">
  <span class="bookmark-icon" aria-hidden="true"></span>
  Save article
</button>

यहाँ आइकन “Save article” के साथ है, इसलिए लेबल दोहराने के बजाय सुलभता ट्री से छिपा है। उदाहरण केवल प्रस्तुति दिखाता है; बटन को ऐप के सहेजने के ऐक्शन से अलग जोड़ें।

एलिमेंट को रंगने के लिए बॉक्स चाहिए, इसलिए CSS चौड़ाई, ऊँचाई और display देता है। currentColor उसका टेक्स्ट रंग लेता है। बटन का color बदलने से bookmark.svg दोबारा लिखे बिना आइकन रंग बदलता है।

mask-size संदर्भ contain को अनुपात रखते हुए पूरी मास्क छवि समाने के रूप में परिभाषित करता है। केंद्र में रखने और पुनरावृत्ति बंद करने के साथ स्रोत एक निश्चित आइकन बॉक्स में समाता है। web.dev मास्किंग मार्गदर्शिका आकार और पुनरावृत्ति नियंत्रण बताती है।

स्थानीय परीक्षण सहित उदाहरण HTTP पर सर्व करें। MDN का mask-image विवरण बताता है कि इस उपयोग में स्थानीय file:// छवि स्रोत स्वीकार नहीं होते। गायब या विफल मास्क छवि मास्क एलिमेंट अदृश्य छोड़ सकती है।

SVG छवि और SVG mask एलिमेंट अलग रखें

छवि के रूप में प्रयुक्त SVG फ़ाइल और SVG <mask> एलिमेंट का संदर्भ अलग इनपुट हैं। केवल नाम .svg पर समाप्त होने से मोड न चुनें।

mask-mode संदर्भ स्रोत पर निर्भर डिफ़ॉल्ट बताता है। अल्फ़ा में अपारदर्शी काला और सफ़ेद दोनों एलिमेंट दिखाते हैं। ल्यूमिनेंस में अपारदर्शी सफ़ेद दिखाता है और काला छिपाता है; बीच के मान आंशिक दृश्यता दे सकते हैं।

mask-type संदर्भ के अनुसार mask-type SVG <mask> एलिमेंट पर लागू है और डिफ़ॉल्ट ल्यूमिनेंस है। सामान्य आइकन span पर जोड़ने से छवि मास्क की व्याख्या नहीं बदलती। व्यवहार स्पष्ट करना हो तो मास्क किए जा रहे एलिमेंट पर mask-mode लें।

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

चौकोर, गायब आइकन या भरे खुले भाग का निदान करें

उपयोगी नकारात्मक परीक्षण है bookmark.svg की प्रति के पीछे पूरे आकार का अपारदर्शी सफ़ेद आयत रखना। अल्फ़ा में प्रति पूरा मास्क क्षेत्र दिखाती है। आयत सफ़ेद से काला करने से आकृति वापस नहीं आती क्योंकि दोनों रंग अपारदर्शी हैं।

एलिमेंट रंग बदलने के बजाय स्रोत से अनचाही पृष्ठभूमि हटाएँ। मूल फ़ाइल रखें ताकि सुधरी प्रति की उससे तुलना कर सकें।

ये परीक्षण अलग रखें। सफल छवि अनुरोध स्रोत की सही पारदर्शिता सिद्ध नहीं करता और सही पारदर्शिता एलिमेंट को गायब चौड़ाई या ऊँचाई नहीं देती।

कंपोनेंट आकार पर परिणाम परखें

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

दो विपरीत पृष्ठभूमि और दो आइकन रंग आज़माएँ। हर स्थिति में खुले भाग से पृष्ठ रंग दिखना चाहिए। सफ़ेद रहे तो स्रोत संरचना पर लौटें।

आइकन परिवार में समान CSS आकार पर पड़ोसी चिह्नों की तुलना करें। उनके viewBox में अलग खाली जगह होने से बराबर बॉक्स असमान लग सकते हैं। UI किट आइकन तैयारी मार्गदर्शिका वह एकरूपता काम बताती है।

स्रोत को ज़रूरत हो तभी रास्टर दृश्य आकृति पुनर्प्राप्त करें

पारदर्शी PNG पहले से CSS मास्क हो सकता है; मास्किंग में SVG रूपांतरण आवश्यक नहीं। मौजूदा साफ़ वेक्टर स्रोत हो तो रखें।

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

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

छवि वेक्टराइज़ेशन अवलोकन स्रोत पुनर्प्राप्ति व्यापक रूप से समझाता है। इस CSS कार्यप्रवाह के लिए वेक्टर फ़ाइल को अब भी उपयोगी आकार और उचित पारदर्शिता चाहिए।

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

क्या SVG मास्क मूल रंग रखता है? मास्क दृश्यता नियंत्रित करता है। एकसमान पृष्ठभूमि उदाहरण में एलिमेंट एक रंग देता है, इसलिए स्रोत के अलग रंग नहीं रहते।

आइकन ठोस वर्ग क्यों बनता है? मास्क स्रोत में पूरे आकार की अपारदर्शी पृष्ठभूमि देखें। अल्फ़ा में अपारदर्शी सफ़ेद और काला दोनों एलिमेंट दिखाते हैं।

क्या SVG मास्क हमेशा ल्यूमिनेंस मास्क हैं? नहीं। सामान्य SVG छवि match-source में सामान्यतः अल्फ़ा लेती है। SVG mask एलिमेंट डिफ़ॉल्ट ल्यूमिनेंस लेता है जब तक व्याख्या न बदलें।

क्या पारदर्शी PNG को SVG करना आवश्यक है? नहीं। PNG मास्क छवि दे सकता है। रास्टर स्रोत से उपयुक्त दृश्य आकृति पुनर्प्राप्त या संपादित करनी हो तो वेक्टराइज़ेशन वैकल्पिक है।

स्रोत

1. MDN — mask-image — छवि स्रोत, विफल लोडिंग, स्थानीय सर्वर आवश्यकताएँ और दृश्यता।
2. MDN — mask-mode — अल्फ़ा, ल्यूमिनेंस और स्रोत आधारित डिफ़ॉल्ट।
3. MDN — mask-type — SVG mask एलिमेंट की व्याख्या।
4. MDN — mask-size — contain आकार और छवि अनुपात।
5. web.dev — CSS mask-image से छवियों पर प्रभाव लगाएँ — छवि मास्क, आकार और पुनरावृत्ति।

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