SVG विस्थापन मैप: लोगो का प्रीव्यू विकृत करें

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

पहला उदाहरण अनुमान योग्य रखने के लिए in="SourceGraphic" सेट करें, in2 के लिए नामित मैप चुनें, क्षैतिज और लंबवत चैनल बताएँ और color-interpolation-filters="sRGB" सेट करें। MDN का विस्थापन संदर्भ दो इनपुट और सैंपलिंग सूत्र समझाता है। स्क्रीन पर मुड़ी दिखने वाली आकृति अपने-आप नई संपादन योग्य बाहरी रेखा नहीं बनती।

तय करें कि कौन-सी फ़ाइल चाहिए

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

प्रीव्यू और स्रोत अलग हैं

केवल रंग का प्रीव्यू बदलना हो तो feColorMatrix से रंग बदलना देखें। विस्थापन स्थान संबंधी प्रश्न हल करता है: रेंडर किए गए चित्र का सैंपल कहाँ लिया जाए।

नियंत्रित, स्थिर SVG उदाहरण कॉपी करें

यह कोड SVG के रूप में सहेजकर ब्राउज़र में खोलें। इसमें एक पाथ, एक निश्चित नॉइज़ स्रोत, क्षैतिज चैनल को परिवर्तनशील व लंबवत चैनल को तटस्थ रखने वाला मैट्रिक्स और 36 का विस्थापन स्केल है।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence प्रक्रियात्मक बदलाव देता है। MDN का नॉइज़ संदर्भ उसके फ़्रीक्वेंसी, ऑक्टेव, सीड और प्रकार नियंत्रण बताता है। यहाँ वे मान स्थिर हैं ताकि scale बदलने पर उसी मैप के साथ प्रभाव की ताकत की तुलना हो।

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

ताकत की तुलना के लिए केवल scale="36" को scale="12" और फिर scale="0" करें। पाथ, सीड, मैप मैट्रिक्स, रंग स्थान और viewBox वैसे ही रखें। इससे आपका निर्णय अलग करके जाँचा जाता है।

स्केल को सैंपलिंग ऑफ़सेट समझें

मैप के चुने गए चैनलों के लिए स्रोत सैंपलिंग स्थान हैं:

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

W3C विस्थापन विनिर्देश यह उलटा मैपिंग परिभाषित करता है: हर आउटपुट स्थान पूछता है कि स्रोत का सैंपल कहाँ लेना है। सकारात्मक सैंपलिंग ऑफ़सेट पाथ नोड को उसी दिशा में खिसकाने का निर्देश नहीं है।

36 स्केल पर क्षैतिज चैनल ये सैंपल ऑफ़सेट देता है:

उदाहरण में primitiveUnits="userSpaceOnUse" है, इसलिए ये मान SVG के उपयोगकर्ता निर्देशांक तंत्र के हैं। viewBox स्केल होने के बाद इन्हें निश्चित CSS पिक्सेल दूरी नहीं मान सकते। विनिर्देश स्केल 0 को बिना विस्थापन प्रभाव के भी परिभाषित करता है।

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

तटस्थ धूसर के लिए रंग स्थान स्पष्ट रखें

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

फ़िल्टर का सामान्य कार्यशील रंग स्थान linearRGB है, जबकि यह उदाहरण स्पष्ट रूप से sRGB इस्तेमाल करता है। rgb(50%,50%,50%) के रूप में लिखा रंग linear RGB में बदलने के बाद संख्यात्मक रूप से 0.5 नहीं होता। MDN का color-interpolation-filters संदर्भ सामान्य और स्पष्ट विकल्प बताता है।

निदान के लिए स्थिर मैप बनाने हेतु नॉइज़ प्रिमिटिव और मैट्रिक्स को इससे बदलें:

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

विस्थापन प्रिमिटिव, सेलेक्टर और फ़िल्टर पर स्पष्ट sRGB बनाए रखें। MDN का feFlood संदर्भ यहाँ प्रयुक्त स्थिर रंग चित्र बताता है। यह नियंत्रण मैप के बदलाव को रंग स्थान से आए खिसकाव से अलग करने में मदद करता है।

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

वही बैज दो आकारों में जाँचें

हमने Chrome में मूल बैज 120 × 120 और 300 × 300 CSS पिक्सेल पर रेंडर किया। हर आकार में वही निश्चित मैप 0, 12 और 36 स्केल पर था और viewBox वही 0 0 200 200 था।

दोनों आकारों पर प्रभाव दिखा; बड़े प्रीव्यू में छेद और किनारे जाँचना आसान था। ब्राउज़र DOM में छहों नमूनों में एक पाथ था और d मान एक जैसे थे। 200-पिक्सेल के तीन अतिरिक्त नियंत्रणों ने बिना फ़िल्टर वाले बैज की तुलना स्पष्ट sRGB और सामान्य linearRGB के स्थिर धूसर मैप से की।

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

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

खिसकाव, कम प्रभाव या कटे किनारे का निदान करें

पूरा बैज मुड़ने के बजाय खिसकता है। स्पष्ट sRGB के साथ स्थिर-मैप नियंत्रण जाँचें। चुने चैनल और उनमें मैप का वास्तविक बदलाव जाँचें। चुने गए स्थिर, गैर-तटस्थ मान से एक जैसा सैंपलिंग ऑफ़सेट बनता है।

प्रभाव कम रहता है। पुष्टि करें कि in2="map" मैट्रिक्स के नामित result से मेल खाता है। उसी सीड और फ़्रीक्वेंसी पर स्केल धीरे बढ़ाएँ। फिर ज़रूरत हो तो अलग मैप लें। नया सीड स्थानिक पैटर्न बदलता है, इसलिए वह अलग तुलना है।

लंबवत किनारा अनपेक्षित व्यवहार करता है। यह उदाहरण क्षैतिज विस्थापन के लिए है: xChannelSelector="R" और yChannelSelector="G", जिसमें G 0.5 पर निश्चित है। दो-अक्ष बदलाव जोड़ने से पहले मैट्रिक्स पंक्ति और चैनल की वर्तनी जाँचें।

मुड़ी रूपरेखा कट जाती है। स्रोत पाथ बदलने से पहले फ़िल्टर क्षेत्र जाँचें। उदाहरण x="-25%", y="-25%" और 150% चौड़ाई व ऊँचाई से अतिरिक्त जगह देता है। MDN का filter संदर्भ ये क्षेत्र गुण बताता है। अधिक तीव्र प्रभाव के लिए अलग क्षेत्र चाहिए हो सकता है और आसपास का viewport अलग सीमा लगा सकता है। क्षेत्र बढ़ाने पर भी आउटपुट गायब हो तो SVG फ़िल्टर और viewport क्लिपिंग की जाँच करें।

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

साफ़ मास्टर अलग दें

बिना फ़िल्टर वाले संस्करण के लिए पाथ से filter="url(#warp)" हटाएँ और अनुपयोगी फ़िल्टर परिभाषा निकालें। मूल d, fill-rule="evenodd", भरण और viewBox रखें। परिणामी फ़ाइल खोलकर पुष्टि करें कि चौकोर छेद और सीधे किनारे साफ़ आधार संस्करण से मेल खाते हैं।

साफ़ मास्टर और प्रदर्शन प्रभाव के फ़ाइलनाम अलग रखें। फ़िल्टर वाला SVG एक पेज पर बार-बार inline रखें तो हर फ़िल्टर को अलग ID दें और उसका url(#...) संदर्भ बदलें। अंतिम एम्बेडिंग तरीका और समर्थित किए जाने वाले ब्राउज़र जाँचें।

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

SVG के भीतर रखा PNG पूरी तरह अलग बात है। केवल फ़ाइलनाम को संपादन योग्य लोगो पाथ की गारंटी मानने से पहले रास्टर चित्रों वाले SVG देखें।

लोगो वेक्टराइज़ेशन कब मदद करता है

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

साफ़ पाथ मास्टर पहले से हो तो सीधे वही फ़ाइल लें। स्रोत तैयारी और लोगो की सफ़ाई के लिए लोगो वेक्टराइज़ेशन गाइड ब्राउज़र विकृति के बजाय पुनर्प्राप्ति का चरण बताती है।

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

क्या feDisplacementMap मेरे SVG पाथ बदलता है? यह फ़िल्टर मैप-नियंत्रित सैंपलिंग से रेंडर किया चित्र बदलता है। मूल ब्राउज़र परीक्षण के छह ताकत वाले नमूनों में एक पाथ और समान d मान रहे।

धूसर विस्थापन मैप भी कलाकृति क्यों खिसकाता है? तटस्थ मान मैप के कार्यशील रंग स्थान में 0.5 है। 50% sRGB धूसर सामान्य linearRGB स्थान में बदलने के बाद संख्यात्मक रूप से 0.5 नहीं होता। स्पष्ट रंग स्थान सेटिंग और नियंत्रित स्थिर-मैप परीक्षण लें।

इस उदाहरण में स्केल 36 का क्या अर्थ है? userSpaceOnUse प्रिमिटिव इकाइयों के साथ चुने चैनल के 0 से 1 मान -18 से +18 SVG उपयोगकर्ता इकाइयों तक सैंपलिंग ऑफ़सेट देते हैं। दिखाई देने वाली दूरी SVG viewBox के स्केल पर निर्भर है।

क्या विकृत SVG सीधे कटर को दे सकते हैं? दिखाई देने वाली विकृति नई संपादन योग्य कटिंग ज्यामिति नहीं है। बिना फ़िल्टर का पाथ मास्टर रखें और वास्तविक गंतव्य जाँचें; काम को स्थायी मुड़ी रूपरेखाएँ चाहिए हों तो अलग तैयार करें।

स्रोत

1. MDN: feDisplacementMap — स्रोत और मैप इनपुट, चैनल तथा सैंपलिंग व्यवहार।
2. W3C: विस्थापन फ़िल्टर — उलटा मैपिंग, स्केल और प्रिमिटिव निर्देशांक।
3. MDN: feTurbulence — निश्चित प्रक्रियात्मक मैप के नियंत्रण।
4. MDN: feColorMatrix — स्पष्ट नियंत्रण-मैप चैनल मान।
5. MDN: color-interpolation-filters — सामान्य linearRGB और स्पष्ट sRGB।
6. MDN: feFlood — स्थिर रंग मैप नियंत्रण।
7. MDN: filter — फ़िल्टर क्षेत्र के गुण।

साफ़ मूल केवल रास्टर हो तो अपना लोगो SVG में बदलें, बाहरी आकृति व छेद जाँचें और अलग विकृत प्रदर्शन प्रति बनाने से पहले मास्टर सहेजें।