SVG अल्फ़ा थ्रेशोल्ड: पारदर्शिता की स्पष्ट सीमा बनाएँ

0.5 पर अल्फ़ा कटऑफ़ के लिए feComponentTransfer के साथ <feFuncA type="discrete" tableValues="0 1"/> इस्तेमाल करें। 0.5 से कम इनपुट अल्फ़ा पारदर्शी हो जाता है; उसके बराबर या उससे अधिक अल्फ़ा अपारदर्शी हो जाता है। अगर RGB की ट्रांसफ़र मैपिंग अपरिवर्तित रखनी हो, तो उनके फ़ंक्शन छोड़ दें।

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

थ्रेशोल्ड चुनने से पहले ज्ञात मूल पिक्सेल की तुलना करें

हमने धीरे-धीरे बदलते अल्फ़ा, पारदर्शी चौकोर छेद, अपारदर्शी सफ़ेद हिस्से और छह नियंत्रित रंग नमूनों वाला छोटा 8-बिट RGBA PNG बनाया। इस परीक्षण का हर SVG एक image तत्व में वही PNG बाइट एम्बेड करता है। बिना फ़िल्टर, discrete और इंटरपोलेट किए गए table संस्करणों में केवल फ़िल्टर सेटअप अलग है।

नीचे का चेकर्ड बैकग्राउंड SVG के बाहर, आसपास के पेज का हिस्सा है। वह पारदर्शिता दिखाता है; इमेज के अल्फ़ा चैनल का हिस्सा होने का आभास नहीं देता।

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

सामान्यीकृत अल्फ़ा मान इन बाइट को 255 से भाग देने पर मिलते हैं। इसलिए 127/255, 0.5 से थोड़ा कम है, जबकि 128/255 थोड़ा अधिक है। ये नमूने गणितीय कटऑफ़ के दोनों ओर हैं; 8-बिट PNG बाइट ठीक 0.5 को व्यक्त नहीं करता।

मूल छेद का अल्फ़ा हर संस्करण में 0 मापा गया। सफ़ेद हिस्से का हर संस्करण में 255 था। ये इस नियंत्रित परीक्षण चित्र के परिणाम हैं, यह दावा नहीं कि थ्रेशोल्ड लगाने के बाद कोई भी चित्र हर इच्छित विवरण सुरक्षित रखेगा।

अल्फ़ा पर ट्रांसफ़र लागू करें

मुख्य फ़िल्टर छोटा है:

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

इमेज पर इसे filter="url(#alpha)" से लागू करें। इस नमूने का फ़िल्टर क्षेत्र उसके पूरे 320 गुणा 240 मूल चित्र और व्यूपोर्ट को ढकता है। असंबंधित फ़ाइल में ये आयाम कॉपी करने के बजाय अपने चित्र के लिए उपयुक्त सीमाएँ रखें।

MDN का feFuncA संदर्भ इसे feComponentTransfer के अंदर का अल्फ़ा ट्रांसफ़र फ़ंक्शन बताता है। कंपोनेंट-ट्रांसफ़र संदर्भ हर चैनल की रीमैपिंग और पूर्वगुणित न किए गए रंग मानों पर गणना समझाता है।

वर्तमान फ़िल्टर इफ़ेक्ट्स विनिर्देश जिन चैनलों के फ़ंक्शन निर्दिष्ट नहीं हैं, उन्हें अपरिवर्तित मैपिंग देता है। हमारे मार्कअप में feFuncR, feFuncG और feFuncB नहीं हैं; वह केवल अल्फ़ा ट्रांसफ़र फ़ंक्शन बदलता है। इसका मतलब यह नहीं कि पृष्ठभूमि पर दिखाई देने वाले रंग एक जैसे लगेंगे: अल्फ़ा बदलने से कंपोज़िट किया गया रूप बदलता है।

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

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

स्पष्ट चरण और इंटरपोलेट किए गए table का अंतर समझें

दोनों ट्रांसफ़र प्रकार tableValues इस्तेमाल करते हैं, लेकिन प्रविष्टियों का अर्थ अलग लेते हैं। type संदर्भ उपलब्ध ट्रांसफ़र फ़ंक्शन की सूची देता है; tableValues संदर्भ लुकअप सूची समझाता है।

discrete में हर प्रविष्टि बराबर इनपुट अंतराल घेरती है। दो प्रविष्टियों 0 1 के साथ पहला अंतराल 0 ≤ A < 0.5 और दूसरा 0.5 ≤ A ≤ 1 है। आउटपुट सीधे दो मानों के बीच बदलता है।

table में प्रविष्टियाँ रैखिक इंटरपोलेशन क्षेत्रों के अंतिम बिंदु हैं। 0 1 के साथ इंटरपोलेशन हर इनपुट अल्फ़ा को उसी मान पर वापस मैप करता है। यह अपरिवर्तित ट्रांसफ़र है, इसलिए हमारी मापी गई table कॉलम बिना फ़िल्टर वाली कॉलम से मेल खाती है।

विनिर्देश के अंतराल सूत्र इन दस्तावेज़ीकृत विकल्पों को भी समझाते हैं:

हमारा स्क्रीनशॉट दो प्रविष्टियों वाले discrete और table मामलों की जाँच करता है। चार प्रविष्टियों वाली पंक्तियाँ विनिर्देश की मैपिंग बताती हैं; वे चित्र के अतिरिक्त मापे गए संस्करण नहीं हैं। यह मानने के बजाय कि केवल शून्य और एक वाली सूची हमेशा द्विआधारी थ्रेशोल्ड बनाएगी, type सोच-समझकर चुनें।

इनपुट अल्फ़ा को बाद में लागू होने वाली अपारदर्शिता से अलग रखें

फ़िल्टर को वास्तविक मूल अल्फ़ा दें। हमारे परीक्षण चित्र में वह PNG पिक्सेल में संग्रहित है। वेक्टर परीक्षण के लिए फ़िल्टर लगाने से पहले फ़िल का अल्फ़ा या fill-opacity इस्तेमाल करें।

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

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

अगर अर्धपारदर्शिता डिज़ाइन का हिस्सा है, तो उसे रखें या कटऑफ़ थोपने के बजाय क्रमिक ट्रांसफ़र इस्तेमाल करें। जानबूझकर एकरंगी दृश्यता मास्क बनाने के लिए SVG CSS मास्क मार्गदर्शिका एक अलग प्रस्तुति प्रक्रिया बताती है।

अपारदर्शी सफ़ेद के लिए अलग जाँच चाहिए

सफ़ेद हिस्सा बचा रहता है क्योंकि उसका अल्फ़ा पूरी तरह अपारदर्शी है। यह क्रिया अल्फ़ा से चयन करती है, पिक्सेल सफ़ेद दिखता है या नहीं इससे नहीं। पूरी तरह अपारदर्शी पृष्ठभूमि के पिक्सेल इस 0 1 discrete मैपिंग में पारदर्शी नहीं बनते।

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

रंग के आधार पर पृष्ठभूमि हटाने से पहले विषय के वास्तव में सफ़ेद हिस्सों का ध्यान रखें। यह अल्फ़ा फ़िल्टर नहीं पहचान सकता कि कौन-सा सफ़ेद क्षेत्र पृष्ठभूमि है और कौन-सा चित्र का हिस्सा, न ही वह मूल को समतल करने के दौरान खोई रंग जानकारी वापस ला सकता है।

वेक्टर पुनर्निर्माण से पहले पारदर्शी रास्टर तैयार करें

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

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

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

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

discrete tableValues 0 1 किस अल्फ़ा कटऑफ़ का इस्तेमाल करता है? 0.5 से कम इनपुट अल्फ़ा 0 पर मैप होता है; 0.5 या उससे अधिक अल्फ़ा 1 पर मैप होता है। परीक्षण के 8-बिट PNG रंग नमूनों में बाइट 127 पारदर्शी और बाइट 128 अपारदर्शी हो जाता है।

tableValues 0 1 मेरी पारदर्शिता क्यों नहीं बदलता? type table के साथ वे प्रविष्टियाँ 0 से 1 तक रैखिक इंटरपोलेशन परिभाषित करती हैं, जो मान अपरिवर्तित रखता है। यहाँ दिखाए गए दो चरणों वाली मैपिंग के लिए type discrete इस्तेमाल करें।

क्या इससे सफ़ेद हटेगा या PNG वेक्टर पाथ में बदलेगा? नहीं। पूरी तरह अपारदर्शी सफ़ेद इस अल्फ़ा कटऑफ़ से गुजरता है। हमारे SVG संस्करणों में अब भी वही PNG एक image तत्व में है और पाथ शून्य हैं; पृष्ठभूमि साफ़ करना और वेक्टर पुनर्निर्माण अलग काम हैं।

स्रोत

1. W3C — फ़िल्टर इफ़ेक्ट्स स्तर 1 — अपरिवर्तित डिफ़ॉल्ट मैपिंग, पूर्वगुणित न किए गए चैनल ट्रांसफ़र और table/discrete अंतराल सूत्र परिभाषित करता है।
2. MDN — feComponentTransfer — फ़िल्टर प्रिमिटिव द्वारा की जाने वाली चैनल रीमैपिंग समझाता है।
3. MDN — feFuncA — अल्फ़ा चैनल ट्रांसफ़र फ़ंक्शन की पहचान करता है।
4. MDN — type — कंपोनेंट-ट्रांसफ़र फ़ंक्शन के प्रकार और उनका एट्रिब्यूट संदर्भ बताता है।
5. MDN — tableValues — table और discrete ट्रांसफ़र की लुकअप प्रविष्टियाँ समझाता है।

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