SVG clipPath या मास्क: स्पष्ट किनारे या धीरे पारदर्शी होते किनारे चुनें

इमेज को तय सीमा पर रोकना हो तो SVG <clipPath> इस्तेमाल करें। इमेज आंशिक पारदर्शिता से धीरे गायब होनी हो तो SVG <mask> दें। मास्क कठोर कट भी बना सकता है, लेकिन स्पष्ट ज्यामितीय किनारे के लिए क्लिपिंग पाथ सरल इरादा बताता है। CSS Masking विनिर्देश इन्हें अलग दृश्यता क्रियाएँ परिभाषित करता है।

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

ज़रूरी किनारे के अनुसार चुनें

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

तीन दृश्यता नियमों में एक इमेज तुलना करें

परीक्षण के लिए मैंने छोटा भू-दृश्य बनाया, उसे 400 × 240 PNG में रास्टर किया और हर पैनल में वही पिक्सेल समान पत्ती जैसी सीमा के नीचे रखे। बायाँ पैनल सीमा तक क्लिप करता है। बीच में सफ़ेद से काला luminance मास्क और दाएँ अपारदर्शी से पारदर्शी alpha मास्क है। दोनों ग्रेडिएंट समान बाएँ से दाएँ गायब होना देने के लिए चुने गए। हर परिणाम हल्के और गहरे बैकग्राउंड पर है, ताकि गायब किनारा आसानी से जाँचा जाए।

दो मास्क कॉलम यहाँ समान दिखने का कारण है: सफ़ेद से काला luminance ग्रेडिएंट और सफ़ेद अपारदर्शिता ग्रेडिएंट तुलनीय मास्क मान देते हैं। वे एक-दूसरे की जगह इस्तेमाल होने वाले इनपुट नहीं हैं। अपारदर्शी काला luminance मास्क में छिपाता है, जबकि alpha में दिखाई रहता है। Alpha में पिक्सेल की अपारदर्शिता परिणाम तय करती है, काला या सफ़ेद रंग नहीं। CSS Masking मास्क प्रसंस्करण परिभाषा दोनों गणनाएँ बताती है।

एक सीमा से क्लिप और मास्क बनाएँ

इसे clip-or-mask.svg सेव करें, पास अपनी photo.png रखें और एक फ़ोल्डर से HTTP पर दोनों उपलब्ध करें। दोनों इमेज एक 400 × 240 निर्देशांक तंत्र इस्तेमाल करती हैं। केवल clip-path और mask में अंतर है।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

SVG में संदर्भ ID अलग होने चाहिए। क्लिप और मास्क दोनों userSpaceOnUse देते हैं, ताकि आकृति निर्देशांक हर इमेज के स्थानीय 400 × 240 क्षेत्र से मिलें। MDN <clipPath> संदर्भ क्लिपिंग को लक्ष्य की मूल ज्यामिति बदले बिना रंग सीमित करना बताता है। MDN <mask> संदर्भ मास्क क्षेत्र रखने वाले maskUnits और कलाकृति रखने वाले maskContentUnits अलग करता है।

Luminance आज़माने के लिए अलग ID से मास्क की नक़ल बनाएँ, mask-type="luminance" दें और ग्रेडिएंट स्टॉप शुरुआत पर अपारदर्शी सफ़ेद तथा अंत पर अपारदर्शी काले करें। mask संदर्भ नई ID से मिलाएँ। डिफ़ॉल्ट SVG <mask> luminance इस्तेमाल करता है; यह उदाहरण तरीका नाम देता है, ताकि भविष्य का संपादन चुपचाप काले का अर्थ न बदल दे। MDN mask-type संदर्भ देखें।

एक्सपोर्ट से पहले परिणाम जाँचें

1. हल्के और गहरे दोनों बैकग्राउंड पर SVG रेंडर करें। सफ़ेद पर नज़र न आने वाला धीरे पारदर्शी होता किनारा गहरे पर स्पष्ट हो सकता है।
2. पुष्टि करें कि इमेज और आकृति के निर्देशांक समान हैं। केवल इमेज का आकार बदलने से सीमा मेल नहीं खा सकती। अलग आकार के लक्ष्य पर फिर इस्तेमाल क्लिप के लिए clipPath इकाई मार्गदर्शिका निर्देशांक चुनाव समझाती है।
3. नरम किनारा अचानक खत्म हो तो ग्रेडिएंट के साथ मास्क के x, y, width और height देखें। मास्क क्षेत्र बाहर की कलाकृति काट सकता है; केवल ग्रेडिएंट फैलाने से संकरा क्षेत्र नहीं सुधरेगा। MDN मास्क क्षेत्र डिफ़ॉल्ट बताता है, लेकिन वितरण फ़ाइल में स्पष्ट सीमा जाँचना आसान है।
4. इस्तेमाल करने वाले ऐप में सेव SVG फिर खोलें। सही ब्राउज़र रेंडर यह नहीं बताता कि दूसरा इंपोर्टर ज़रूरी क्लिप, मास्क, लिंक इमेज या संपादन क्षमता बचाता है।
5. फ़ाइल संरचना देखें। <image> अब भी हो तो रास्टर पिक्सेल भी हैं, भले क्लिपिंग सीमा वेक्टर है। एम्बेडेड रास्टर जाँच अंतर पहचानना बताती है।

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

PerfectVector कहाँ काम आता है

ज़रूरी सीमा केवल PNG या JPG लोगो में बची हो तो PerfectVector की इमेज से वेक्टर प्रक्रिया संपादन योग्य संभावित SVG दे सकती है। <clipPath> या <mask> में सीमा कॉपी करने से पहले बाहरी पाथ, छोटी खाली जगहें और अवांछित बैकग्राउंड आकृतियाँ जाँचें। दृश्यता तरीका आप चुनते हैं और SVG संपादक में प्रभाव बनाते हैं। उपलब्ध साफ़ वेक्टर मूल रखें।

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

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

क्या SVG clipPath धीरे गायब होना बना सकता है? नहीं। सीमा की सामान्य एंटीएलियासिंग के अलावा क्लिपिंग पाथ तय करता है कि लक्ष्य के कौन-से हिस्से दिखते हैं। जानबूझकर धीरे पारदर्शी होते किनारे के लिए बीच की अपारदर्शिता या luminance मान वाला मास्क दें।

क्या हर SVG मास्क में काला इमेज छिपाता है? नहीं। अपारदर्शी काला luminance में छिपाता है, लेकिन alpha में दिखाता है, क्योंकि पिक्सेल अपारदर्शी है। पूरी पारदर्शी कलाकृति दोनों तरीके में छिपाती है।

क्या क्लिपिंग या मास्किंग PNG को वेक्टर कलाकृति बनाती है? नहीं। दोनों रेंडर समय दृश्यता बदलते हैं। SVG में रास्टर <image> रह सकती है और केवल वेक्टर वितरण के लिए अलग ट्रेस या पाथ संपादन चाहिए हो सकता है।

स्रोत

1. W3C — CSS Masking Module Level 1 — क्लिपिंग, मास्किंग तथा alpha और luminance मास्क मानों की परिभाषाएँ।
2. MDN — क्लिपिंग और मास्किंग — स्पष्ट क्लिपिंग और नरम मास्क उदाहरण।
3. MDN — <clipPath> — क्लिप व्यवहार, निर्देशांक चुनाव और अपरिवर्तित मूल ज्यामिति।
4. MDN — <mask> — मास्क क्षेत्र, सामग्री निर्देशांक तंत्र और संदर्भ व्यवहार।
5. MDN — mask-type — SVG मास्क कलाकृति की alpha और luminance व्याख्या।

रास्टर लोगो को पहले संपादन योग्य सीमाएँ चाहिए तो PerfectVector से संभावित SVG बनाएँ, प्राप्त पाथ जाँचें, फिर क्लिप या मास्क देकर गंतव्य में एक्सपोर्ट फ़ाइल खोलें।