SVG की छाया कट रही है? फ़िल्टर और व्यूपोर्ट जाँचें

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

जिस SVG के पाथ पहले से सही हैं, उसे दोबारा ट्रेस करने की ज़रूरत नहीं। यह मार्गदर्शिका मूल बाहरी आकृति को वैसा ही रखकर प्रभाव का कार्यक्षेत्र और दिखाई देने वाला कैनवस बदलती है।

दो सीमाएँ, एक अपरिवर्तित पाथ

हमने हाथ से छोटी बाहरी आकृति बनाई और ब्राउज़र में उसके तीन संस्करण खोले। हर संस्करण वही पाथ और feDropShadow सेटिंग इस्तेमाल करता है: dx="22", dy="18" और stdDeviation="12"। नीचे का कैप्चर वास्तविक ब्राउज़र रेंडरिंग दिखाता है, PerfectVector रूपांतरण नहीं।

पहले संस्करण में फ़िल्टर क्षेत्र (50, 50) से (210, 180) तक है। इससे छाया के दाएँ और नीचे के किनारों पर कठोर कटावट रहती है। दूसरे में क्षेत्र (-20, -20) से (300, 280) तक बढ़ता है, लेकिन SVG अब भी केवल 0 0 240 220 दिखाता है। अब छाया का दायाँ किनारा व्यूपोर्ट फ़्रेम तक पहुँचकर वहीं कटता है।

तीसरा संस्करण बड़ा फ़िल्टर क्षेत्र बनाए रखता है और viewBox को -20 -20 320 300 करता है। उसके width और height भी 320 तथा 300 हो जाते हैं, इसलिए तीनों प्रदर्शन में हर CSS पिक्सेल के लिए एक SVG इकाई रहती है। अतिरिक्त जगह में दिखाई देने वाली छाया समा जाती है, बिना पाथ का आकार बदले।

सही निर्देशांक प्रणाली में फ़िल्टर क्षेत्र बढ़ाएँ

<filter> के x, y, width और height एट्रिब्यूट उसका क्षेत्र तय करते हैं। उनके डिफ़ॉल्ट -10%, -10%, 120% और 120% हैं: कुछ अतिरिक्त जगह पहले से होती है, लेकिन किसी विशेष ऑफ़सेट और ब्लर के लिए वह कम हो सकती है। MDN इन डिफ़ॉल्ट का दस्तावेज़ देता है।

मान बदलने से पहले filterUnits जाँचें:

• डिफ़ॉल्ट objectBoundingBox क्षेत्र को फ़िल्टर लगे एलिमेंट के बाउंडिंग बॉक्स के सापेक्ष समझता है। प्रतिशत वाला मार्जिन आकार के आयामों पर निर्भर होता है।
• userSpaceOnUse आपको फ़िल्टर का संदर्भ देने वाले एलिमेंट की वर्तमान यूज़र निर्देशांक प्रणाली में क्षेत्र तय करने देता है। जब चित्र के निर्देशांक पता हों, तो यह उपयोगी है।

ये नियम क्षेत्र पर लागू होते हैं, जैसा filterUnits संदर्भ बताता है। ये छाया के ऑफ़सेट या ब्लर की इकाइयाँ अपने आप नहीं बदलते।

primitiveUnits फ़िल्टर प्रिमिटिव के अंदर लंबाई मान नियंत्रित करता है। इसका डिफ़ॉल्ट userSpaceOnUse है; उदाहरण में हमने इसे स्पष्ट रखा है ताकि 22, 18 और 12 वही अर्थ रखें। इसे objectBoundingBox करने से इन मानों का अर्थ बदल जाएगा। MDN प्रिमिटिव इकाइयों को फ़िल्टर क्षेत्र की इकाइयों से अलग बताता है।

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

SVG व्यूपोर्ट को भी जगह दें

इस पूरे उदाहरण को shadow.svg में सहेजकर ब्राउज़र में खोलें। यही तीसरी अवस्था में इस्तेमाल किया गया सटीक SVG है, जिसे स्वतंत्र फ़ाइल के रूप में भी जाँचा गया:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox के चार मान हैं: न्यूनतम x, न्यूनतम y, चौड़ाई और ऊँचाई। यह यूज़र निर्देशांक के उस आयत को SVG व्यूपोर्ट में मैप करता है। प्रदर्शन की चौड़ाई और ऊँचाई वही रखते हुए उसके आयाम बढ़ाने से चित्र छोटा दिखता है; इससे एलिमेंट के बाहर लेआउट की जगह नहीं जुड़ती। MDN viewBox मैपिंग समझाता है।

दोनों विफलताएँ दोहराने के लिए उदाहरण की प्रति में केवल ये मान बदलें:

1. बीच वाली अवस्था के लिए फ़िल्टर वैसा ही रखें, लेकिन रूट के width="240", height="220" और viewBox="0 0 240 220" करें।
2. पहली अवस्था के लिए वह छोटा व्यूपोर्ट रखें और फ़िल्टर भी x="50", y="50", width="160" तथा height="130" करें।
3. पूरा उदाहरण वापस लाएँ और दाएँ तथा नीचे के किनारे मिलाएँ। पाथ डेटा कभी नहीं बदलता।

यदि पूरी ड्रॉइंग कैनवस के बाहर है, तो विस्तृत खाली SVG की जाँच अपनाएँ। यदि ड्रॉइंग दिखाई देती है लेकिन आयात में आयाम बदलते हैं, तो ज्यामिति समायोजित करने से पहले SVG इकाइयों और आकार का संबंध जाँचें।

overflow इनलाइन SVG में मदद करके भी फ़ाइल की समस्या क्यों छोड़ सकता है

उदाहरण में overflow="hidden" स्पष्ट रखा है ताकि व्यूपोर्ट सीमा दोहराई जा सके। इनलाइन SVG में overflow="visible" उस व्यूपोर्ट क्लिप को हटा सकता है। यह फ़िल्टर क्षेत्र पर पहले ही हटाए गए पिक्सेल वापस नहीं ला सकता और अपनी क्लिपिंग वाला पूर्वज अब भी परिणाम छिपा सकता है। CSS भी SVG प्रस्तुति एट्रिब्यूट पर प्राथमिकता ले सकता है। SVG overflow संदर्भ ये क्लिपिंग नियम बताता है।

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

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

ज्यामिति सुरक्षित रखें और प्रभाव अलग बनाएँ

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

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

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

डिलीवरी फ़ाइल जाँचें

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

सामान्य सुधार के रूप में बहुत विशाल फ़िल्टर क्षेत्र छोड़ने से बचें। प्रभाव की ज़रूरत से बहुत बड़ा क्षेत्र फ़ाइल समझना कठिन बनाता है; वह बाहरी क्लिपिंग सीमा भी ठीक नहीं कर सकता। सोच-समझकर मार्जिन रखें, बिना फ़िल्टर वाला स्रोत सुरक्षित रखें और ब्लर या ऑफ़सेट बदलने के बाद फिर जाँचें।

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

फ़िल्टर की चौड़ाई बढ़ाने के बाद भी छाया क्यों कटती है? SVG व्यूपोर्ट, पैरेंट कंटेनर, क्लिप पाथ या मास्क दूसरी सीमा लगा सकता है। फ़िल्टर की चौड़ाई और ऊँचाई के साथ उसका x और y भी देखें, फिर जाँचें कि बची कटावट कहाँ मिलती है।

क्या filterUnits ब्लर का दायरा बदलता है? filterUnits फ़िल्टर क्षेत्र की निर्देशांक प्रणाली नियंत्रित करता है। primitiveUnits फ़िल्टर प्रिमिटिव के अंदर लंबाई मान नियंत्रित करता है, जिनमें छाया का ऑफ़सेट और ब्लर सेटिंग शामिल हैं। फ़ाइल का निदान करते समय इन्हें अलग रखें।

क्या SVG को फिर वेक्टराइज़ करके क्लिपिंग ठीक कर सकता हूँ? यदि SVG में उपयोगी पाथ पहले से हैं, तो फ़िल्टर क्षेत्र या व्यूपोर्ट सुधारें। वेक्टराइज़ेशन उससे पहले का चरण है जब स्रोत रास्टर चित्र हो; यह मूल छाया पैरामीटर वापस नहीं लाता।

स्रोत

1. MDN: filter एलिमेंट — फ़िल्टर एलिमेंट और उसकी डिफ़ॉल्ट अतिरिक्त क्षेत्र जगह परिभाषित करता है।
2. MDN: filterUnits — फ़िल्टर क्षेत्र के बाउंडिंग बॉक्स और यूज़र-स्पेस निर्देशांक समझाता है।
3. MDN: primitiveUnits — प्रिमिटिव लंबाइयों को बाहरी फ़िल्टर क्षेत्र से अलग करता है।
4. MDN: viewBox — बताता है कि यूज़र निर्देशांक दिखाई देने वाले SVG व्यूपोर्ट से कैसे मैप होते हैं।
5. MDN: overflow — व्यूपोर्ट क्लिपिंग, इनलाइन SVG डिफ़ॉल्ट और CSS प्राथमिकता बताता है।

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