> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG किनारा पहचान: feConvolveMatrix प्रीव्यू > feConvolveMatrix से SVG किनारा प्रीव्यू बनाएँ, अल्फ़ा और बॉर्डर की गड़बड़ी पहचानें, शार्पनिंग कर्नेल तुलना करें और स्रोत में असली पाथ जाँचें। Source: https://perfectvector.com/hi/blog/svg-convolution-edge-preview Language: hi Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 SVG की `feConvolveMatrix` किनारा पहचान रंग की सीमाओं के आसपास रेंडर किए पिक्सेल बदलती है। SVG के भीतर PNG से किनारा प्रीव्यू बन सकता है, लेकिन संपादन योग्य पाथ रूपरेखाएँ नहीं बनतीं। आगे लोगो संपादन, लाइन आर्ट की तैयारी या वेब कलाकृति बनानी हो तो यह अंतर स्पष्ट रखें। पहला उपयोगी परीक्षण ज्ञात आकृति वाला छोटा ग्रेस्केल चित्र है। सममित किनारा कर्नेल लगाएँ, उसका अल्फ़ा बचाएँ और अपरिवर्तित स्रोत से तुलना करें। फिर SVG एलिमेंट जाँचें। अधिक तीखी दिखती सीमा यह स्थापित नहीं करती कि चित्र वेक्टर ज्यामिति बन गया है। ## नियंत्रित किनारा प्रीव्यू से शुरू करें [`feConvolveMatrix` संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) कन्वोल्यूशन को इनपुट पिक्सेल और उसके पड़ोसियों पर गणना बताता है। यह 3 × 3 कर्नेल केंद्र के आठ गुने में से आठों पड़ोसी घटाता है: ```text -1 -1 -1 -1 8 -1 -1 -1 -1 ``` इसके गुणांकों का योग शून्य है। एकसमान क्षेत्र में प्रतिक्रिया शून्य होती है; चमक बदलने पर सकारात्मक या नकारात्मक हो सकती है। `bias="0"` के साथ नकारात्मक परिणाम रंग की निचली सीमा पर काट दिए जाते हैं। इसलिए प्रीव्यू हर सीमा के दोनों ओर समान रूप से नहीं दिखाता। उदाहरण स्पष्ट `divisor="1"` लेता है। [divisor संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) उस मान से सामान्यीकरण और शून्य-योग कर्नेल के लिए सामान्य मान 1 बताता है। इसमें `color-interpolation-filters="sRGB"` भी है, ताकि प्रिमिटिव के सामान्य linearRGB प्रसंस्करण के बजाय sRGB चैनल मान इस्तेमाल हों। यह पूरी, स्वयंपूर्ण फ़ाइल `edge-preview.svg` सहेजकर ब्राउज़र में खोलें। एम्बेडेड PNG अपारदर्शी सफ़ेद कागज़ पर 48 × 48 का हमारा मूल ग्रेस्केल हीरा है। केंद्र सफ़ेद है, पारदर्शी नहीं। ```xml ``` फ़िल्टर परिभाषा तभी असर करती है क्योंकि चित्र `filter="url(#effect)"` से उसे संदर्भ देता है। [SVG filter संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) बताता है कि परिभाषा स्वयं ड्रॉ नहीं होती। स्पष्ट क्षेत्र इस 48 × 48 स्रोत को ढकता है; दूसरी कलाकृति के क्षेत्र की अपनी जाँच चाहिए। ## ब्राउज़र परीक्षण में क्या बदला हमने Chrome में 48 और 192 CSS पिक्सेल पर छह मूल नमूने जाँचे। पाँच फ़ाइलों में एक एम्बेडेड PNG चित्र है और पाथ नहीं हैं। छठा स्वतंत्र रूप से हाथ से बनाया वेक्टर समकक्ष है। वह ज्यामिति का नियंत्रण नमूना है, फ़िल्टर लगाने या PNG ट्रेस करने का परिणाम नहीं। | नमूना | देखा गया रूप | एकसमान नमूने की रीडिंग | | -------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------ | | SVG में मूल PNG | सफ़ेद केंद्र और कागज़ वाला धूसर हीरा | ठोस धूसर: RGBA 64, 64, 64, 255 | | किनारा कर्नेल, अल्फ़ा सुरक्षित | किनारा प्रतिक्रिया के साथ काला क्षेत्र; बड़े प्रदर्शन में रूपरेखा हल्की | केंद्र और कोना: RGBA 0, 0, 0, 255 | | किनारा कर्नेल, अल्फ़ा भी फ़िल्टर | इस परीक्षण में पारदर्शी परिणाम | केंद्र, कोना और ठोस नमूना: RGBA 0, 0, 0, 0 | | शार्पनिंग नियंत्रण | भरा हीरा बचा, सीमा पिक्सेल बदले | ठोस धूसर RGBA 64, 64, 64, 255 रहा | | किनारा कर्नेल, शून्य-मान बॉर्डर | चमकीला बाहरी फ़्रेम आया | कोना: RGBA 255, 255, 255, 255 | | हाथ से बनाया पाथ नियंत्रण | सफ़ेद कागज़ पर साफ़ ज्यामितीय हीरा और भीतरी खुला भाग | एक पाथ एलिमेंट, कोई इमेज एलिमेंट नहीं | RGBA नमूने हर रेंडर SVG की 48 × 48 Canvas रीडिंग से आए। दिखाई देने वाले नमूने दोनों आकारों पर अलग जाँचे गए। ये इस स्रोत और ब्राउज़र के अवलोकन हैं, संगतता या पठनीयता की गारंटी नहीं। रास्टर-आधारित प्रीव्यू बड़ा करने से साफ़ रूपरेखा वापस नहीं मिली। **पिक्सेल प्रतिक्रिया और संपादन योग्य ज्यामिति** ![ग्रेस्केल पिक्सेल किनारा-प्रतिक्रिया हीरे और स्वतंत्र रूप से बनाए मूँगा रंग के हीरा-आकार रिंग तथा संपादन नोड की तुलना का वैचारिक चित्रण](https://perfectvector.com/blog/svg-convolution-edge-preview/pixels-and-paths.webp) *चित्रण: पिक्सेल किनारा प्रीव्यू और संपादन योग्य पाथ के निरूपण अलग हैं। यह ब्राउज़र स्क्रीनशॉट या रूपांतरण परिणाम नहीं है।* ## कागज़ मिटाए बिना गायब परिणाम ठीक करें `preserveAlpha` का सामान्य मान false है। उस सेटिंग में कर्नेल अल्फ़ा भी प्रसंस्कृत करता है। हमारे अपारदर्शी इनपुट में हर जगह अल्फ़ा 1 है, इसलिए शून्य-योग किनारा कर्नेल एकसमान रंग के साथ एकसमान अल्फ़ा भी रद्द करता है। जाँचे गए परीक्षण में परिणाम गायब हो गया। `preserveAlpha="true"` रंग प्रसंस्कृत करते हुए स्रोत अल्फ़ा रखता है। [preserveAlpha संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) यह अंतर बताता है। इस परीक्षण में वह अपारदर्शी किनारा प्रीव्यू लौटाता है। वह अपारदर्शी कागज़ और सफ़ेद केंद्र को भी अपारदर्शी रखता है, भले ही उनका फ़िल्टर रंग काला हो जाए। अल्फ़ा बचाना बैकग्राउंड नहीं हटाता और लोगो में छेद नहीं खोजता। प्रीव्यू अधिकतर काला हो तो पहले ज्ञात एकसमान क्षेत्र की ज्ञात सीमा से तुलना करें। काला वैध शून्य प्रतिक्रिया हो सकता है। मध्यम टोन के आसपास संकेत-सहित चमक बदलाव देखने के लिए `bias="0.5"` आज़माएँ; [bias संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) विभाजन के बाद जोड़ा ऑफ़सेट समझाता है। यह प्रदर्शन रेंज बदलता है, SVG ज्यामिति नहीं। ## बॉर्डर को कलाकृति से अलग जाँचें शुरुआती तुलना में `edgeMode="duplicate"` रखें। पड़ोसी नमूने इनपुट से बाहर जाएँ तो यह किनारे के पिक्सेल मान बढ़ाता है। `none` शून्य-मान RGBA नमूने लेता है; `wrap` विपरीत किनारे से नमूने लेता है। ये [edgeMode संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) के अलग नियम हैं। हमारे अपारदर्शी सफ़ेद कार्ड में केवल `duplicate` को `none` करने पर कार्ड के बाहर चमकीला फ़्रेम बना। वह सीमा चित्र आयत की है, हीरे की नहीं। फ़्रेम को कलाकृति की रूपरेखा मानने से पहले बिना फ़िल्टर की फ़ाइल तुलना करें। [Filter Effects विनिर्देश](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) कर्नेल लक्ष्य और सैंपलिंग व्यवहार परिभाषित करता है। यहाँ `targetX="1"` और `targetY="1"` 3 × 3 कर्नेल को केंद्रित करते हैं। यह शुरुआती उदाहरण `kernelUnitLength` नहीं सेट करता। न मानें कि पड़ोसी नमूना हर प्रदर्शन आकार पर एक SVG उपयोगकर्ता इकाई ही होगा; दिए गए रेंडर की जाँच करें। ## शार्पनिंग को नियंत्रण मानें, धुँधलापन लौटाने का उपाय नहीं भरी कलाकृति बचाकर स्थानीय बदलाव उभारने के लिए केवल `kernelMatrix` को इससे बदलें: ```text 0 -1 0 -1 5 -1 0 -1 0 ``` योग 1 है। एकसमान चैनल मान `c`, divisor 1 और bias 0 पर `5c - 4c = c` देता है। हमारे परीक्षण में ठोस धूसर नमूना 64 रहा, जबकि सीमा पिक्सेल बदले। इस तुलना में `preserveAlpha="true"` और `edgeMode="duplicate"` रखें। शार्पनिंग उपयोगी सीमाओं के साथ नॉइज़ और हेलो भी बढ़ा सकती है। चित्र के फ़िल्टर तक पहुँचने से पहले खोया स्रोत विवरण वापस नहीं आता। बड़ा प्रीव्यू खराब दिखे तो अधिक तीव्र कर्नेल को स्रोत रिज़ॉल्यूशन का विकल्प मानने के बजाय मूल चित्र पर लौटें। ## वेक्टर ट्रेस कहने से पहले फ़ाइल जाँचें प्रकाशित शुरुआती उदाहरण में `` है जिसका `href`, `data:image/png` से शुरू होता है। [image एलिमेंट संदर्भ](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) उन रास्टर और SVG संसाधनों को बताता है जिन्हें यह दिखा सकता है। यहाँ मीडिया प्रकार एम्बेडेड रास्टर पहचानता है; किनारा फ़िल्टर उस एलिमेंट को रहने देता है। तुलना के लिए स्वतंत्र रूप से बना मास्टर सफ़ेद आयत पर यह compound पाथ इस्तेमाल करता है: ```xml ``` ये निर्देशांक अलग लिखे गए थे। वे फ़िल्टर चित्र से निकाले नहीं गए और पिक्सेल ड्रॉइंग व ज्यामितीय नियंत्रण को हर सीमा नमूने पर मिलना ज़रूरी नहीं। [एम्बेडेड रास्टर निरीक्षण गाइड](https://perfectvector.com/hi/blog/svg-contains-raster-image) केवल ज़ूम पर निर्भर हुए बिना मिश्रित SVG जाँचना बताती है। वेब कलाकृति में बिना फ़िल्टर का SVG मास्टर रखें और प्रभाव डिज़ाइन के अनुकूल हो तो फ़िल्टर प्रदर्शन प्रति लें। संपादन या उत्पादन पाथ के लिए वास्तविक स्रोत रूपरेखाएँ और भीतरी खुला भाग जाँचें। [लाइन आर्ट से SVG गाइड](https://perfectvector.com/hi/blog/line-art-to-svg) वह ज्यामिति का काम बताती है। शुरुआती कलाकृति सपाट PNG या JPG हो और संपादन योग्य स्रोत आकृतियाँ चाहिए हों तो PerfectVector उपयोगी है। [मूल चित्र को SVG में बदलें](https://perfectvector.com/hi/image-to-vector), बाहरी रेखा और भीतरी खुला भाग जाँचें और साफ़ परिणाम मास्टर रखें। सफल किनारा प्रीव्यू उस जाँच की जगह नहीं लेता। [वेक्टराइज़ेशन गाइड](https://perfectvector.com/hi/blog/what-is-image-vectorization) पाथ पुनर्निर्माण और चित्र प्रभाव लगाने का अंतर समझाती है। ## अक्सर पूछे जाने वाले प्रश्न **क्या SVG feConvolveMatrix किनारा पहचान वेक्टर पाथ बनाती है?** नहीं। यह रेंडर किया पिक्सेल प्रभाव गणना करती है। इस उदाहरण का एम्बेडेड PNG इमेज एलिमेंट ही रहता है; संपादन योग्य रूपरेखाओं के लिए अलग खींची या ट्रेस की ज्यामिति चाहिए। **किनारा फ़िल्टर मेरी कलाकृति गायब क्यों करता है?** preserveAlpha जाँचें। उसका सामान्य false मान अल्फ़ा भी फ़िल्टर करता है। इस अपारदर्शी परीक्षण में शून्य-योग कर्नेल से जाँचा परिणाम पारदर्शी हुआ। अल्फ़ा बचाने से अपारदर्शी प्रीव्यू वापस आया। **क्या preserveAlpha सफ़ेद बैकग्राउंड हटाता है?** नहीं। वह स्रोत अल्फ़ा रखता है। अपारदर्शी सफ़ेद बैकग्राउंड का फ़िल्टर रंग काला होने पर भी वह अपारदर्शी रहता है। बैकग्राउंड हटाना और पाथ पुनर्निर्माण अलग काम हैं। **किनारा फ़िल्टर चित्र के चारों ओर फ़्रेम क्यों बनाता है?** edgeMode और इनपुट आयत जाँचें। हमारे अपारदर्शी सफ़ेद कार्ड के बाहर शून्य-मान नमूने लेने से चमकीला बाहरी बॉर्डर बना। Duplicate किनारा व्यवहार ने इस परीक्षण में वह बॉर्डर रोका। ## स्रोत 1. [MDN: feConvolveMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feConvolveMatrix) — पिक्सेल-पड़ोस कन्वोल्यूशन और सामान्य रंग प्रसंस्करण। 2. [MDN: divisor](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/divisor) — सामान्यीकरण और शून्य-योग का सामान्य मान। 3. [MDN: filter](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter) — फ़िल्टर प्रभाव परिभाषित करना और लगाना। 4. [MDN: preserveAlpha](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/preserveAlpha) — केवल रंग बनाम अल्फ़ा-सहित प्रसंस्करण। 5. [MDN: bias](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/bias) — विभाजन के बाद प्रतिक्रिया खिसकाना। 6. [MDN: edgeMode](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode) — duplicate, wrap और शून्य बॉर्डर व्यवहार। 7. [W3C: Filter Effects, feConvolveMatrix](https://www.w3.org/TR/filter-effects-1/#feConvolveMatrixElement) — लक्ष्य और सैंपलिंग नियम। 8. [MDN: image](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/image) — संदर्भित रास्टर और SVG चित्र सामग्री। ## Explore - [Read the HTML article](https://perfectvector.com/hi/blog/svg-convolution-edge-preview) - [MapLibre SVG आइकन: पिक्सेल और प्रतीक आकार जाँचें](https://perfectvector.com/hi/blog/maplibre-svg-symbol-image.md) - [Satori SVG लोगो: ब्रांड कार्ड में कलाकृति सुरक्षित रखें](https://perfectvector.com/hi/blog/satori-svg-logo.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)