SVG किनारा पहचान: feConvolveMatrix प्रीव्यू

SVG की feConvolveMatrix किनारा पहचान रंग की सीमाओं के आसपास रेंडर किए पिक्सेल बदलती है। SVG के भीतर PNG से किनारा प्रीव्यू बन सकता है, लेकिन संपादन योग्य पाथ रूपरेखाएँ नहीं बनतीं। आगे लोगो संपादन, लाइन आर्ट की तैयारी या वेब कलाकृति बनानी हो तो यह अंतर स्पष्ट रखें।

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

नियंत्रित किनारा प्रीव्यू से शुरू करें

feConvolveMatrix संदर्भ कन्वोल्यूशन को इनपुट पिक्सेल और उसके पड़ोसियों पर गणना बताता है। यह 3 × 3 कर्नेल केंद्र के आठ गुने में से आठों पड़ोसी घटाता है:

-1 -1 -1
-1  8 -1
-1 -1 -1

इसके गुणांकों का योग शून्य है। एकसमान क्षेत्र में प्रतिक्रिया शून्य होती है; चमक बदलने पर सकारात्मक या नकारात्मक हो सकती है। bias="0" के साथ नकारात्मक परिणाम रंग की निचली सीमा पर काट दिए जाते हैं। इसलिए प्रीव्यू हर सीमा के दोनों ओर समान रूप से नहीं दिखाता।

उदाहरण स्पष्ट divisor="1" लेता है। divisor संदर्भ उस मान से सामान्यीकरण और शून्य-योग कर्नेल के लिए सामान्य मान 1 बताता है। इसमें color-interpolation-filters="sRGB" भी है, ताकि प्रिमिटिव के सामान्य linearRGB प्रसंस्करण के बजाय sRGB चैनल मान इस्तेमाल हों।

यह पूरी, स्वयंपूर्ण फ़ाइल edge-preview.svg सहेजकर ब्राउज़र में खोलें। एम्बेडेड PNG अपारदर्शी सफ़ेद कागज़ पर 48 × 48 का हमारा मूल ग्रेस्केल हीरा है। केंद्र सफ़ेद है, पारदर्शी नहीं।

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

फ़िल्टर परिभाषा तभी असर करती है क्योंकि चित्र filter="url(#effect)" से उसे संदर्भ देता है। SVG filter संदर्भ बताता है कि परिभाषा स्वयं ड्रॉ नहीं होती। स्पष्ट क्षेत्र इस 48 × 48 स्रोत को ढकता है; दूसरी कलाकृति के क्षेत्र की अपनी जाँच चाहिए।

ब्राउज़र परीक्षण में क्या बदला

हमने Chrome में 48 और 192 CSS पिक्सेल पर छह मूल नमूने जाँचे। पाँच फ़ाइलों में एक एम्बेडेड PNG चित्र है और पाथ नहीं हैं। छठा स्वतंत्र रूप से हाथ से बनाया वेक्टर समकक्ष है। वह ज्यामिति का नियंत्रण नमूना है, फ़िल्टर लगाने या PNG ट्रेस करने का परिणाम नहीं।

RGBA नमूने हर रेंडर SVG की 48 × 48 Canvas रीडिंग से आए। दिखाई देने वाले नमूने दोनों आकारों पर अलग जाँचे गए। ये इस स्रोत और ब्राउज़र के अवलोकन हैं, संगतता या पठनीयता की गारंटी नहीं। रास्टर-आधारित प्रीव्यू बड़ा करने से साफ़ रूपरेखा वापस नहीं मिली।

पिक्सेल प्रतिक्रिया और संपादन योग्य ज्यामिति

कागज़ मिटाए बिना गायब परिणाम ठीक करें

preserveAlpha का सामान्य मान false है। उस सेटिंग में कर्नेल अल्फ़ा भी प्रसंस्कृत करता है। हमारे अपारदर्शी इनपुट में हर जगह अल्फ़ा 1 है, इसलिए शून्य-योग किनारा कर्नेल एकसमान रंग के साथ एकसमान अल्फ़ा भी रद्द करता है। जाँचे गए परीक्षण में परिणाम गायब हो गया।

preserveAlpha="true" रंग प्रसंस्कृत करते हुए स्रोत अल्फ़ा रखता है। preserveAlpha संदर्भ यह अंतर बताता है। इस परीक्षण में वह अपारदर्शी किनारा प्रीव्यू लौटाता है। वह अपारदर्शी कागज़ और सफ़ेद केंद्र को भी अपारदर्शी रखता है, भले ही उनका फ़िल्टर रंग काला हो जाए। अल्फ़ा बचाना बैकग्राउंड नहीं हटाता और लोगो में छेद नहीं खोजता।

प्रीव्यू अधिकतर काला हो तो पहले ज्ञात एकसमान क्षेत्र की ज्ञात सीमा से तुलना करें। काला वैध शून्य प्रतिक्रिया हो सकता है। मध्यम टोन के आसपास संकेत-सहित चमक बदलाव देखने के लिए bias="0.5" आज़माएँ; bias संदर्भ विभाजन के बाद जोड़ा ऑफ़सेट समझाता है। यह प्रदर्शन रेंज बदलता है, SVG ज्यामिति नहीं।

बॉर्डर को कलाकृति से अलग जाँचें

शुरुआती तुलना में edgeMode="duplicate" रखें। पड़ोसी नमूने इनपुट से बाहर जाएँ तो यह किनारे के पिक्सेल मान बढ़ाता है। none शून्य-मान RGBA नमूने लेता है; wrap विपरीत किनारे से नमूने लेता है। ये edgeMode संदर्भ के अलग नियम हैं।

हमारे अपारदर्शी सफ़ेद कार्ड में केवल duplicate को none करने पर कार्ड के बाहर चमकीला फ़्रेम बना। वह सीमा चित्र आयत की है, हीरे की नहीं। फ़्रेम को कलाकृति की रूपरेखा मानने से पहले बिना फ़िल्टर की फ़ाइल तुलना करें।

Filter Effects विनिर्देश कर्नेल लक्ष्य और सैंपलिंग व्यवहार परिभाषित करता है। यहाँ targetX="1" और targetY="1" 3 × 3 कर्नेल को केंद्रित करते हैं। यह शुरुआती उदाहरण kernelUnitLength नहीं सेट करता। न मानें कि पड़ोसी नमूना हर प्रदर्शन आकार पर एक SVG उपयोगकर्ता इकाई ही होगा; दिए गए रेंडर की जाँच करें।

शार्पनिंग को नियंत्रण मानें, धुँधलापन लौटाने का उपाय नहीं

भरी कलाकृति बचाकर स्थानीय बदलाव उभारने के लिए केवल kernelMatrix को इससे बदलें:

0 -1  0
-1 5 -1
0 -1  0

योग 1 है। एकसमान चैनल मान c, divisor 1 और bias 0 पर 5c - 4c = c देता है। हमारे परीक्षण में ठोस धूसर नमूना 64 रहा, जबकि सीमा पिक्सेल बदले। इस तुलना में preserveAlpha="true" और edgeMode="duplicate" रखें।

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

वेक्टर ट्रेस कहने से पहले फ़ाइल जाँचें

प्रकाशित शुरुआती उदाहरण में <image> है जिसका href, data:image/png से शुरू होता है। image एलिमेंट संदर्भ उन रास्टर और SVG संसाधनों को बताता है जिन्हें यह दिखा सकता है। यहाँ मीडिया प्रकार एम्बेडेड रास्टर पहचानता है; किनारा फ़िल्टर उस एलिमेंट को रहने देता है।

तुलना के लिए स्वतंत्र रूप से बना मास्टर सफ़ेद आयत पर यह compound पाथ इस्तेमाल करता है:

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

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

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

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

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

क्या SVG feConvolveMatrix किनारा पहचान वेक्टर पाथ बनाती है? नहीं। यह रेंडर किया पिक्सेल प्रभाव गणना करती है। इस उदाहरण का एम्बेडेड PNG इमेज एलिमेंट ही रहता है; संपादन योग्य रूपरेखाओं के लिए अलग खींची या ट्रेस की ज्यामिति चाहिए।

किनारा फ़िल्टर मेरी कलाकृति गायब क्यों करता है? preserveAlpha जाँचें। उसका सामान्य false मान अल्फ़ा भी फ़िल्टर करता है। इस अपारदर्शी परीक्षण में शून्य-योग कर्नेल से जाँचा परिणाम पारदर्शी हुआ। अल्फ़ा बचाने से अपारदर्शी प्रीव्यू वापस आया।

क्या preserveAlpha सफ़ेद बैकग्राउंड हटाता है? नहीं। वह स्रोत अल्फ़ा रखता है। अपारदर्शी सफ़ेद बैकग्राउंड का फ़िल्टर रंग काला होने पर भी वह अपारदर्शी रहता है। बैकग्राउंड हटाना और पाथ पुनर्निर्माण अलग काम हैं।

किनारा फ़िल्टर चित्र के चारों ओर फ़्रेम क्यों बनाता है? edgeMode और इनपुट आयत जाँचें। हमारे अपारदर्शी सफ़ेद कार्ड के बाहर शून्य-मान नमूने लेने से चमकीला बाहरी बॉर्डर बना। Duplicate किनारा व्यवहार ने इस परीक्षण में वह बॉर्डर रोका।

स्रोत

1. MDN: feConvolveMatrix — पिक्सेल-पड़ोस कन्वोल्यूशन और सामान्य रंग प्रसंस्करण।
2. MDN: divisor — सामान्यीकरण और शून्य-योग का सामान्य मान।
3. MDN: filter — फ़िल्टर प्रभाव परिभाषित करना और लगाना।
4. MDN: preserveAlpha — केवल रंग बनाम अल्फ़ा-सहित प्रसंस्करण।
5. MDN: bias — विभाजन के बाद प्रतिक्रिया खिसकाना।
6. MDN: edgeMode — duplicate, wrap और शून्य बॉर्डर व्यवहार।
7. W3C: Filter Effects, feConvolveMatrix — लक्ष्य और सैंपलिंग नियम।
8. MDN: image — संदर्भित रास्टर और SVG चित्र सामग्री।