SVG feColorMatrix: फ़िल बदले बिना रंग बदलें

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

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

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

रंग बदलने का इच्छित परिणाम चुनें

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

जाँचा जा सकने वाला दो रंगों का उदाहरण

इसे filtered-leaves.svg नाम से सेव करें और ब्राउज़र में खोलें। पहला पत्ता नारंगी फ़िल #cc6633 से शुरू होता है; दूसरे में आधी अपारदर्शिता वाला हरा फ़िल #339966 है। मैट्रिक्स हरे और अल्फ़ा को रखते हुए लाल तथा नीले चैनल आपस में बदलता है।

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

हमने ब्राउज़र में इस मूल आकृति के चार संस्करण रेंडर किए: मूल रंग, फ़िल्टर वाला संस्करण, सीधा संपादन और फ़िल्टर हटाई हुई प्रति। सीधे संपादन में बिना फ़िल्टर पहला फ़िल #3366cc और दूसरा #669933 किया गया। दोनों रंग बदलने के तरीकों से नीली और जैतूनी आकृति बनी। फ़िल्टर वाले संस्करण के DOM को जाँचने पर अब भी मूल नारंगी तथा हरे फ़िल एट्रिब्यूट मिले। उसका फ़िल्टर हटाने पर मूल रंग-पट्टी वापस आई।

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

मूल जाँच दोहराने के लिए SVG को टेक्स्ट एडिटर में खोलें और fill= खोजें। फिर समूह से केवल filter="url(#swap-red-blue)" हटाएँ और ब्राउज़र रीफ़्रेश करें। तुलना के लिए बिना बदली फ़ाइल साथ रखें।

मैट्रिक्स याद किए बिना चार पंक्तियाँ पढ़ें

type="matrix" के लिए values एट्रिब्यूट में बीस संख्याएँ होती हैं: पाँच-पाँच की चार पंक्तियाँ। हर पंक्ति एक आउटपुट चैनल की गणना करती है। कॉलम इनपुट लाल, हरा, नीला, अल्फ़ा और स्थिर अतिरिक्त मान इस्तेमाल करते हैं। MDN का मैट्रिक्स संदर्भ समीकरण और अपरिवर्तित रखने वाला मैट्रिक्स दिखाता है।

हमारे उदाहरण में पहली पंक्ति नीले को नया लाल लेती है। दूसरी हरा रखती है। तीसरी लाल को नया नीला लेती है। चौथी अल्फ़ा रखती है:

0 0 0 1 0

आखिरी पंक्ति का मतलब है “मौजूदा अल्फ़ा इस्तेमाल करें, कोई अतिरिक्त मान न जोड़ें।” उसे सारे शून्य से बदलने पर परिणाम पारदर्शी हो जाता है। अंतिम कॉलम में स्थिर मान जोड़ने से वहाँ भी पारदर्शिता बदलती है जहाँ मूल पारदर्शी था, जिससे फ़िल्टर क्षेत्र में अनचाहा आयत बन सकता है।

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

RGB नमूने से संख्याएँ लेने पर sRGB सेट करें

SVG फ़िल्टर प्रिमिटिव डिफ़ॉल्ट में linearRGB इस्तेमाल करते हैं। rgb(128, 128, 128) जैसा रंग नमूना सामान्यतः sRGB में होता है, इसलिए डिफ़ॉल्ट फ़िल्टर कलर स्पेस में मैट्रिक्स का स्थिर मान 0.5 आधे स्केल वाले sRGB जैसा प्रदर्शित धूसर नहीं बताता। मैट्रिक्स को उन sRGB चैनल मानों पर काम करना हो तो color-interpolation-filters="sRGB" इस्तेमाल करें। यह color-interpolation से अलग है; उस दूसरे एट्रिब्यूट को बदलने से फ़िल्टर का कलर स्पेस नहीं चुना जाता। MDN डिफ़ॉल्ट और अंतर समझाता है।

ठोस #3366cc आकृति के लिए सामान्यीकृत RGB मान 51/255, 102/255 और 204/255, यानी 0.2, 0.4 और 0.8 हैं। यह फ़िल्टर इनपुट RGB मान छोड़कर वे स्थिर मान सेट करता है और इनपुट अल्फ़ा रखता है:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

ऑब्जेक्ट से इस फ़िल्टर का संदर्भ filter="url(#solid-blue)" द्वारा दें। वह जानबूझकर मूल अपारदर्शी रंगों के बीच अंतर हटाता है। वह बाहरी आकृति के लिए उपयुक्त है, फ़ोटो के टोन विवरण रखने के लिए नहीं। फ़िल्टर इफ़ेक्ट्स विनिर्देश चैनल रूपांतरण और पूर्वगुणित न किए गए रंग मानों का व्यवहार परिभाषित करता है।

sRGB सेट करना गणना के कलर स्पेस का चुनाव है, हर डिस्प्ले या प्रिंट में एक जैसे रंग की गारंटी नहीं। व्यापक वितरण अंतर के लिए SVG एक्सपोर्ट रंग चेकलिस्ट इस्तेमाल करें।

केवल पूर्वावलोकन के बजाय वितरण फ़ाइल जाँचें

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

वेक्टर देने से पहले वास्तविक गंतव्य जाँचें:

1. सेव किया SVG उसी इंपोर्ट या एक्सपोर्ट तरीके से खोलें जो प्राप्तकर्ता इस्तेमाल करेगा।
2. ब्राउज़र पूर्वावलोकन से रंग और अर्धपारदर्शी किनारे मिलाएँ।
3. आकृति चुनकर फ़िल जाँचें। उसमें इच्छित नया मान है या प्रभाव के नीचे मूल रंग?
4. एक बार सेव करके दोबारा खोलें। प्रभाव ज़रूरी हो तो फ़िल्टर परिभाषा और उसका संदर्भ सुरक्षित रहने की पुष्टि करें।
5. प्राप्तकर्ता को सामान्य संपादन योग्य सपाट रंग चाहिए तो सीधे फ़िल वाला संस्करण इस्तेमाल करें और वितरण प्रति से अब अनावश्यक फ़िल्टर हटाएँ।

ग्रेडिएंट, स्ट्रोक, अपारदर्शिता या मिश्रित ओवरलैप के लिए वैश्विक मैट्रिक्स सामान्य खोजकर बदलने वाला टूल नहीं। इच्छित रूप को मूल रंगों में बनाने के लिए दो हेक्स मानों से अधिक संपादन चाहिए हो सकता है। रास्टर वितरण स्वीकार्य हो तो जाँचे गए रूप को PNG में एक्सपोर्ट करना दूसरा विकल्प है। मूल वेक्टर अलग रखें।

इस प्रक्रिया में PerfectVector कब उपयोगी है

ये दोनों पाथ पहले से हों तो सीधे संपादित करें। रंग फ़िल्टर हटाने के लिए उन्हें रास्टर बनाकर फिर ट्रेस करने की वजह नहीं है।

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

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

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

क्या feColorMatrix मेरे SVG के fill मान बदलता है? नहीं। वह रेंडर किए रंग चैनल रूपांतरित करता है। अलग से संपादित न करने पर मूल fill एट्रिब्यूट अपरिवर्तित रहते हैं।

चुना हुआ धूसर अपेक्षा से हल्का क्यों है? फ़िल्टर की गणना का कलर स्पेस जाँचें। SVG फ़िल्टर प्रिमिटिव का डिफ़ॉल्ट linearRGB है। मैट्रिक्स स्थिर मान सामान्यीकृत sRGB रंग नमूने बताएँ तो color-interpolation-filters को sRGB सेट करें।

रंग बदलते समय पारदर्शिता कैसे रखें? अल्फ़ा पंक्ति 0 0 0 1 0 रखें। इससे इनपुट अल्फ़ा बना रहता है। अर्धपारदर्शी किनारे जाँचें और पारदर्शिता बदलनी न हो तो अल्फ़ा में अतिरिक्त मान न जोड़ें।

क्या फ़िल्टर लगा PNG संपादन योग्य वेक्टर बन सकता है? रंग फ़िल्टर रूप बदलता है, ज्यामिति नहीं। अलग वेक्टर आकृतियाँ संपादित करने के लिए वेक्टर मूल लें या रास्टर वेक्टराइज़ करके बने पाथ जाँचें।

स्रोत

1. MDN: feColorMatrix — मैट्रिक्स पंक्तियाँ, चैनल और उपलब्ध रूपांतरण प्रकार परिभाषित करता है।
2. MDN: color-interpolation-filters — linearRGB डिफ़ॉल्ट और स्पष्ट sRGB चयन समझाता है।
3. W3C: फ़िल्टर इफ़ेक्ट्स, feColorMatrix — रंग और अल्फ़ा रूपांतरण व्यवहार निर्दिष्ट करता है।
4. MDN: फ़िल और स्ट्रोक — SVG आकृतियों के मूल रंग बताता है।

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