SVG प्रकाश: बैज में छाया दें और खुला भाग बचाएँ

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

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

अल्फ़ा को प्रकाश की सतह बनाएँ

feDiffuseLighting इनपुट अल्फ़ा को bump map की तरह लेता है और अपारदर्शी प्रकाश मैप बनाता है। रूप प्रकाश और इनपुट सतह पर निर्भर है। MDN का diffuse प्रकाश संदर्भ यह व्यवहार समझाता है। इस उदाहरण में रिंग के अपारदर्शी हिस्से ऊँचा क्षेत्र और खुला भाग नीचा क्षेत्र देते हैं।

हम केवल SourceAlpha ब्लर करते हैं और मूल रंगीन पाथ SourceGraphic के रूप में रखते हैं। नरम अल्फ़ा भीतरी और बाहरी किनारों पर प्रकाश गणना को धीरे बदलती सीमा देता है। feGaussianBlur stdDeviation से नरमी नियंत्रित करता है; शुरुआती उदाहरण स्पष्ट user-space फ़िल्टर में 2.5 लेता है।

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

छाया वाले बैज का पूरा शुरुआती उदाहरण कॉपी करें

इसे emblem-lighting.svg सहेजें और ब्राउज़र में खोलें। इसमें एक compound पाथ है और बाहरी चित्र निर्भरता नहीं है।

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>

फ़िल्टर हर मध्यवर्ती परिणाम को नाम देता है ताकि उसकी भूमिका जाँच सकें:

अंकगणितीय गुणा k1="1" लेता है और बाकी गुणांक शून्य होते हैं। जोड़ k2="1" k3="1" लेता है और बाकी शून्य होते हैं। feComposite ये पिक्सेल ऑपरेशन और in ऑपरेटर परिभाषित करता है। मूल सीमा चाहिए तो अंतिम कंपोज़िट का दूसरा इनपुट SourceAlpha रखें, ब्लर किया bump नहीं।

फ़िल्टर स्पष्ट color-interpolation-filters="linearRGB" लेता है, जो SVG फ़िल्टर ऑपरेशन का सामान्य मान है। यह साधारण पेंट इंटरपोलेशन से अलग है। MDN का color-interpolation-filters संदर्भ अंतर बताता है। यहाँ मापे सभी प्रकाश रूपों में वही सेटिंग है।

diffuse छाया और specular चमक तुलना करें

Diffuse प्रकाश, प्रकाश मैप के अनुसार मूल रंग गहरा और हल्का करता है। Specular चरण परावर्तन घटक जोड़ता है। feSpecularLighting प्रकाश-निर्भर आउटपुट और पैरामीटर बताता है। उदाहरण संयमित .7 स्थिरांक और 18 घातांक लेता है; उपयोगी diffuse प्रभाव तय करने के बाद इन्हें बदलें।

केवल diffuse देखने के लिए ब्लर, diffuse और गुणा चरण रखें, फिर अंतिम कंपोज़िट का पहला इनपुट paint से lit करें। Specular और जोड़ चरण हटाएँ।

सपाट रंग पर केवल specular देखने के लिए ब्लर और specular चरण रखें। जोड़ का पहला इनपुट lit से SourceGraphic करें, diffuse व गुणा चरण हटाएँ और अंतिम paint in SourceAlpha कंपोज़िट रखें। दोनों तुलनाओं में वही मूल पाथ और प्रकाश दिशा रहती है।

हमारा दूरस्थ प्रकाश azimuth="225" elevation="45" लेता है। feDistantLight दोनों प्रकाश प्रिमिटिव के लिए स्रोत एलिमेंट है। ये कोण डिग्री में हैं, पिक्सेल स्थान नहीं। संयुक्त प्रभाव की तुलना में दोनों प्रकाश चरणों की दिशा साथ बदलें।

मूल ब्राउज़र नियंत्रणों ने क्या दिखाया

हमने बनाए हुए छह SVG नमूने Chrome में 80 × 80 और 160 × 160 CSS पिक्सेल पर खोले। सपाट मास्टर, diffuse, specular और संयुक्त प्रभाव अलग दिखाई देते रहे। अधिक diffuse surfaceScale ने इस परीक्षण में किनारे का कंट्रास्ट बढ़ाया। कच्चे diffuse नियंत्रण में पारदर्शी बाहरी आकृति के बजाय भरे खुले भाग वाला धूसर आयत दिखा।

अलग पिक्सेल रीडिंग के लिए 200 × 200 स्रोत Canvas आकार लिया। पट्टी नमूना (100, 38), किनारा नमूना (101, 22), खुला भाग (100, 100) और बाहरी नमूना (10, 10) था।

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

प्रकाश और सपाट मास्टर

रूपरेखा बदलने से पहले ऊँचाई क्षेत्र समायोजित करें

surfaceScale प्रकाश गणना में सतह ऊँचाई का पैमाना सेट करता है। पाथ नहीं फैलाता। हमारे diffuse 4 और 12 नियंत्रणों में केवल यही मान बदला: नमूना ली गई सपाट पट्टी का रंग वही रहा, जबकि 12 पर किनारा नमूना गहरा हुआ।

नियंत्रित क्रम अपनाएँ:

1. बिना फ़िल्टर मूल पारदर्शी बाहरी आकृति और खुला भाग तय करें।
2. अल्फ़ा की नरमी और प्रकाश दिशा चुनें।
3. बाकी सब स्थिर रखकर छोटे और बड़े surfaceScale तुलना करें।
4. Specular चमक जोड़ें, फिर अंतिम ऑपरेशन में मूल अल्फ़ा से पेंट सीमित करें।
5. दी गई कलाकृति वास्तविक प्रदर्शन आकार और अलग रंग वाले बैकग्राउंड पर जाँचें।

वर्तमान Filter Effects विनिर्देश diffuse आउटपुट अल्फ़ा हर जगह एक और specular आउटपुट अल्फ़ा उसके रंग घटकों से परिभाषित करता है। किसी को भी मूल खुला भाग बचाने वाला न मानें। वह पड़ोसी अल्फ़ा नमूनों से normal गणना भी बताता है। यह उदाहरण kernelUnitLength नहीं सेट करता; दो आकारों की हमारी जाँच आकार-स्वतंत्र प्रकाश नमूने स्थापित नहीं करती।

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

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

स्क्रीन प्रभाव के साथ सपाट मास्टर दें

सपाट मास्टर देखने के लिए पाथ का filter गुण हटाएँ। उसमें वही बाहरी रूपरेखा, भीतरी खुला भाग और ठोस मूँगा रंग भरण रहता है। यह प्रति छाया वाले वेब संस्करण के साथ रखें ताकि बाद का संपादन मूल ज्यामिति से शुरू हो सके।

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

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

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

क्या SVG प्रकाश फ़िल्टर लोगो को उभरा दिखा सकते हैं? वे अल्फ़ा-आधारित ऊँचाई क्षेत्र से छाया और हाइलाइट का आभास दे सकते हैं। रेंडर प्रभाव भौतिक उभार, अतिरिक्त पाथ रूपरेखाएँ या उत्पादन डाई फ़ाइल नहीं बनाता।

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

diffuse और specular SVG प्रकाश में क्या अंतर है? Diffuse मूल रंग पर छाया देने के लिए व्यापक रोशनी देता है। Specular चमक के लिए परावर्तन घटक देता है। दोनों इनपुट अल्फ़ा को bump map लेते हैं और चुने प्रकाश व सतह सेटिंग पर निर्भर हैं।

क्या surfaceScale लोगो का पाथ बदलता है? नहीं। वह प्रकाश गणना की ऊँचाई का पैमाना बदलता है। हमारे दो diffuse नियंत्रणों में पाथ डेटा समान रहा, जबकि रेंडर किनारे का कंट्रास्ट बदला।

स्रोत

1. MDN feDiffuseLighting — अल्फ़ा bump-map इनपुट और अपारदर्शी diffuse प्रकाश आउटपुट।
2. MDN feGaussianBlur — नरम इनपुट और फ़िल्टर क्षेत्र के पहलू।
3. MDN feComposite — अंकगणितीय गुणा/जोड़ और स्रोत-अल्फ़ा सीमांकन।
4. MDN color-interpolation-filters — फ़िल्टर ऑपरेशन का सामान्य linearRGB मान।
5. MDN feSpecularLighting — परावर्तन घटक और उसके नियंत्रण।
6. MDN feDistantLight — दोनों प्रकाश प्रिमिटिव का प्रकाश स्रोत।
7. MDN surfaceScale — गणना की सतह ऊँचाई का पैमाना।
8. Filter Effects प्रकाश विनिर्देश — प्रकाश अल्फ़ा, कोण इकाइयाँ और पड़ोसी नमूना गणनाएँ।