6 सामान्य एसवीजी विफल (और उन्हें कैसे ठीक करें)

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

लेकिन कभी-कभी, हम अपने SVG को बिल्कुल भी नहीं देख पाते हैं। उन मामलों में, छह विशिष्ट चीजें हैं जिन्हें मैं डिबगिंग करते समय देखता हूं।

1. viewBox मानों

RSI viewBox एसवीजी के साथ काम करते समय भ्रम की स्थिति एक आम बात है। इसके बिना इनलाइन एसवीजी का उपयोग करना तकनीकी रूप से ठीक है, लेकिन हम इसके सबसे महत्वपूर्ण लाभों में से एक खो देंगे: कंटेनर के साथ स्केलिंग। उसी समय, यह अनुचित तरीके से कॉन्फ़िगर किए जाने पर हमारे खिलाफ काम कर सकता है, जिसके परिणामस्वरूप अवांछित क्लिपिंग हो सकती है।

तत्व वहाँ होते हैं जब उन्हें क्लिप किया जाता है - वे केवल उस समन्वय प्रणाली के एक भाग में होते हैं जिसे हम नहीं देखते हैं। अगर हम फ़ाइल को किसी ग्राफ़िक्स एडिटिंग प्रोग्राम में खोलते हैं, तो यह ऐसा दिखाई दे सकता है:

इसे ठीक करने का सबसे आसान तरीका? जोड़ें overflow="visible" एसवीजी के लिए, चाहे वह हमारी स्टाइलशीट में हो, इनलाइन पर style विशेषता या सीधे एक एसवीजी प्रस्तुति विशेषता के रूप में। लेकिन अगर हम भी लागू करते हैं background-color एसवीजी के लिए या अगर हमारे पास इसके आसपास अन्य तत्व हैं, तो चीजें थोड़ी अलग दिख सकती हैं। इस मामले में, सबसे अच्छा विकल्प संपादित करना होगा viewBox छिपी हुई समन्वय प्रणाली का वह हिस्सा दिखाने के लिए:

के बारे में कुछ अतिरिक्त बातें हैं viewBox जब हम इस विषय पर होते हैं तो ये कवर करने लायक होते हैं:

कैसे करता है viewBox काम करते हो?

एसवीजी एक अनंत कैनवास है, लेकिन हम जो देखते हैं उसे नियंत्रित कर सकते हैं और हम इसे व्यूपोर्ट और इसके माध्यम से कैसे देखते हैं viewBox.

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

RSI viewBox चार मूल्यों द्वारा परिभाषित किया गया है। पहले दो ऊपरी-बाएँ कोने पर शुरुआती बिंदु हैं (x और y मान, ऋणात्मक संख्याओं की अनुमति है)। मैं छवि को फिर से फ्रेम करने के लिए इन्हें संपादित कर रहा हूं। अंतिम दो व्यूपोर्ट के अंदर समन्वय प्रणाली की चौड़ाई और ऊंचाई हैं - यह वह जगह है जहां हम ग्रिड के पैमाने को संपादित कर सकते हैं (जो हम इस अनुभाग में प्राप्त करेंगे) Zooming).

एसवीजी दिखाते हुए सरलीकृत मार्कअप यहां दिया गया है viewBox और width और height विशेषताएँ दोनों पर सेट हैं <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

reframing

तो यह:

<svg viewBox="0 0 700 700">

... इसके लिए मानचित्र:

<svg viewBox="start-x-axis start-y-axis width height">

हम जो व्यूपोर्ट देखते हैं वह कहां से शुरू होता है 0 एक्स-अक्ष पर और 0 y-अक्ष पर मिलते हैं।

इसे बदलकर:

<svg viewBox="0 0 700 700">

…इसके लिए:

<svg viewBox="300 200 700 700">

…चौड़ाई और ऊंचाई समान रहती है (700 इकाइयां प्रत्येक), लेकिन समन्वय प्रणाली की शुरुआत अब पर है 300 एक्स-अक्ष पर बिंदु और 200 वाई-अक्ष पर।

निम्नलिखित वीडियो में मैं एक लाल जोड़ रहा हूँ <circle> एसवीजी को इसके केंद्र में 300 एक्स-अक्ष पर बिंदु और 200 वाई-अक्ष पर। ध्यान दें कि कैसे बदल रहा है viewBox समान मानों के निर्देशांक भी फ्रेम के ऊपरी-बाएँ कोने में सर्कल के प्लेसमेंट को बदलते हैं जबकि SVG का रेंडर आकार समान रहता है (700×700). मैंने जो कुछ किया वह "रिफ्रेम" चीजों के साथ था viewBox.

Zooming

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

आइए देखें कि इलस्ट्रेटर में क्या होता है जब हम इन मापदंडों को बदलते हैं। आर्टबोर्ड है viewport जिसे एक सफेद 700px वर्ग द्वारा दर्शाया गया है। उस क्षेत्र के बाहर बाकी सब कुछ हमारा अनंत एसवीजी कैनवास है और डिफ़ॉल्ट रूप से क्लिप हो जाता है।

नीचे चित्र 1 में एक नीला बिंदु दिखाया गया है 900 एक्स-अक्ष के साथ और 900 वाई-अक्ष के साथ। अगर मैं पिछले दो को बदल दूं viewBox से मान 700 सेवा मेरे 900 इस तरह:

<svg viewBox="300 200 900 900" width="700" height="700">

…फिर नीला बिंदु लगभग पूरी तरह से वापस दिखाई देने लगता है, जैसा कि नीचे चित्र 2 में देखा गया है। हमारी छवि को छोटा कर दिया गया है क्योंकि हमने व्यूबॉक्स मानों को बढ़ा दिया है, लेकिन एसवीजी की वास्तविक चौड़ाई और ऊंचाई के आयाम वही बने रहे, और नीला बिंदु बिना कटे हुए क्षेत्र के करीब वापस आ गया।

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

2. गुम width और height

इनलाइन एसवीजी डिबगिंग करते समय मैं एक और आम बात देखता हूं कि क्या मार्कअप में width or height गुण। यह कई मामलों में कोई बड़ी बात नहीं है जब तक कि एसवीजी पूर्ण स्थिति या लचीले कंटेनर के साथ एक कंटेनर के अंदर न हो (जैसा कि सफारी एसवीजी की गणना करता है) width के साथ मूल्य 0px के बजाय auto). के सिवा width or height इन मामलों में हमें पूरी छवि देखने से रोकता है, जैसा कि हम देख सकते हैं इस कोडपेन डेमो को खोल रहा हूँ और क्रोम, सफारी और फायरफॉक्स में इसकी तुलना करें (बड़ा व्यू देखने के लिए इमेज पर टैप करें)।

समाधान? एक चौड़ाई या ऊंचाई जोड़ें, चाहे प्रस्तुति विशेषता के रूप में, शैली विशेषता में इनलाइन, या सीएसएस में। ऊंचाई का अकेले उपयोग करने से बचें, विशेष रूप से जब यह सेट हो 100% or auto. करने का एक और उपाय है सही सेट करें और बाएं मान.

आप के साथ खेल सकते हैं निम्नलिखित कलम और अलग-अलग विकल्पों को मिलाएं।

3. असावधान fill और stroke रंग

यह भी हो सकता है कि हम रंग लगा रहे हों <svg> टैग, चाहे वह इनलाइन शैली हो या CSS से आ रही हो। यह ठीक है, लेकिन पूरे मार्कअप या शैलियों में अन्य रंग मान हो सकते हैं जो पर रंग सेट के साथ संघर्ष करते हैं <svg>, जिससे भाग अदृश्य हो जाते हैं।

इसलिए मैं खोजने की प्रवृत्ति रखता हूं fill और stroke एसवीजी के मार्कअप में विशेषताएँ और उन्हें मिटा दें। निम्न वीडियो लाल रंग के साथ CSS में स्टाइल किए गए SVG I को दिखाता है fill. ऐसे कुछ उदाहरण हैं जहां एसवीजी के कुछ हिस्सों को सीधे उस मार्कअप में सफेद रंग से भर दिया गया है जिसे मैंने लापता टुकड़ों को प्रकट करने के लिए हटा दिया था।

4. लापता आईडी

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

चीजों को करने का यह एक अच्छा तरीका है। लेकिन कई बार ऐसा होता है जहां मैंने एक ही एसवीजी फ़ाइल को उसी स्थान पर दूसरी बार निर्यात किया है और आईडी अलग-अलग होती हैं, आमतौर पर जब वैक्टर सीधे कॉपी/पेस्ट करते हैं। हो सकता है कि एक नई परत जोड़ी गई हो, या मौजूदा में से किसी एक का नाम बदल दिया गया हो या कुछ और। जो भी मामला हो, CSS नियम अब SVG मार्कअप में ID से मेल नहीं खाते, जिससे SVG आपकी अपेक्षा से भिन्न तरीके से प्रस्तुत होता है।

बड़ी एसवीजी फाइलों में हमें उन आईडी को खोजने में कठिनाई हो सकती है। यह DevTools को खोलने का एक अच्छा समय है, ग्राफ़िक के उस हिस्से का निरीक्षण करें जो काम नहीं कर रहा है, और देखें कि क्या वे आईडी अभी भी मेल खा रहे हैं।

इसलिए, मैं कहूंगा कि यह एक कोड संपादक में एक निर्यातित एसवीजी फ़ाइल खोलने और चीजों को स्वैप करने से पहले मूल से तुलना करने के लायक है। Illustrator, Figma, और Sketch जैसे ऐप्स स्मार्ट हैं, लेकिन इसका मतलब यह नहीं है कि हम उनकी जांच करने के लिए ज़िम्मेदार नहीं हैं।

5. क्लिपिंग और मास्किंग के लिए चेकलिस्ट

यदि एक एसवीजी अप्रत्याशित रूप से क्लिप किया गया है और viewBox ठीक से जांच करता है, मैं आमतौर पर सीएसएस को देखता हूं clip-path or mask गुण जो छवि के साथ हस्तक्षेप कर सकते हैं। इनलाइन मार्कअप को देखते रहना लुभावना है, लेकिन यह याद रखना अच्छा है कि SVG की स्टाइलिंग कहीं और हो सकती है।

सीएसएस क्लिपिंग और मास्किंग हमें एक छवि या तत्व के कुछ हिस्सों को "छिपाने" की अनुमति दें। एसवीजी में, <clipPath> एक वेक्टर ऑपरेशन है जो बिना किसी आधे परिणाम के छवि के कुछ हिस्सों को काटता है। <mask> टैग एक पिक्सेल ऑपरेशन है जो पारदर्शिता, अर्ध-पारदर्शिता प्रभाव और धुंधले किनारों की अनुमति देता है।

डिबगिंग मामलों के लिए यह एक छोटी सी चेकलिस्ट है जहां क्लिपिंग और मास्किंग शामिल हैं:

• सुनिश्चित करें कि क्लिपिंग पथ (या मुखौटा) और ग्राफ़िक एक दूसरे को ओवरलैप करते हैं। अतिव्यापी भाग वे हैं जो प्रदर्शित होते हैं।
• यदि आपके पास एक जटिल पथ है जो आपके ग्राफ़िक को प्रतिच्छेद नहीं कर रहा है, तब तक रूपांतरणों को लागू करने का प्रयास करें जब तक वे मेल नहीं खाते।
• आप अभी भी DevTools के साथ आंतरिक कोड का निरीक्षण कर सकते हैं, भले ही <clipPath> or <mask> प्रदान नहीं किया जाता है, इसलिए इसका उपयोग करें!
• मार्कअप को अंदर कॉपी करें <clipPath> और <mask> और बंद करने से पहले चिपका दें </svg> टैग। फिर ए जोड़ें fill उन आकृतियों के लिए और SVG के निर्देशांक और आयामों की जाँच करें। यदि आप अभी भी छवि नहीं देखते हैं, तो जोड़ने का प्रयास करें overflow="hidden" को <svg> टैग।
• जांचें कि a अद्वितीय आईडी के लिए प्रयोग किया जाता है <clipPath> or <mask>, और वही आईडी उन आकृतियों या आकृतियों के समूह पर लागू होती है जिन्हें क्लिप किया जाता है या नकाबपोश किया जाता है। बेमेल आईडी उपस्थिति को तोड़ देगा।
• के बीच मार्कअप में टाइपो की जाँच करें <clipPath> or <mask> टैग।
• fill, stroke, opacity, या कुछ अन्य शैलियाँ अंदर के तत्वों पर लागू होती हैं <clipPath> बेकार हैं - केवल उपयोगी हिस्सा उन तत्वों की भरण-क्षेत्र ज्यामिति है। इसलिए अगर आप ए का इस्तेमाल करते हैं <polyline> यह एक के रूप में व्यवहार करेगा <polygon> और यदि आप ए का उपयोग करते हैं <line> आपको कोई क्लिपिंग प्रभाव नहीं दिखेगा।
• यदि आपको a लगाने के बाद अपनी छवि दिखाई नहीं देती है <mask>, सुनिश्चित करें कि द fill मास्किंग सामग्री पूरी तरह से काली नहीं है। मास्किंग तत्व की चमक अंतिम ग्राफिक की अपारदर्शिता को निर्धारित करती है। आप उज्जवल भागों के आर-पार देख पाएंगे, और गहरे भाग आपकी छवि की सामग्री को छिपा देंगे।

आप नकाबपोश और क्लिप किए गए तत्वों के साथ खेल सकते हैं यह पेन.

6. नामस्थान

क्या आप जानते हैं कि एसवीजी एक एक्सएमएल-आधारित मार्कअप भाषा है? यह ठीक है! एसवीजी के लिए नाम स्थान पर निर्धारित है xmlns विशेषता:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

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

एसवीजी 2 विनिर्देश नाम स्थान की आवश्यकता नहीं है HTML सिंटैक्स का उपयोग करते समय। परंतु यह महत्वपूर्ण है यदि लीगेसी ब्राउज़रों के लिए समर्थन एक प्राथमिकता है — साथ ही, इसे जोड़ने में कोई हर्ज नहीं है। इस तरह, जब <html> तत्व का xmlns विशेषता परिभाषित है, यह उन दुर्लभ मामलों में संघर्ष नहीं करेगा।

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

सीएसएस में इनलाइन एसवीजी का उपयोग करते समय भी यह सच है, जैसे इसे पृष्ठभूमि छवि के रूप में सेट करना। निम्नलिखित उदाहरण में, सफल सत्यापन के बाद इनपुट पर एक चेकमार्क आइकन दिखाई देता है। यह सीएसएस कैसा दिखता है:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

जब हम बैकग्राउंड प्रॉपर्टी में एसवीजी के अंदर नेमस्पेस हटाते हैं, तो इमेज गायब हो जाती है:

एक अन्य सामान्य नामस्थान उपसर्ग है xlink:href. एसवीजी के अन्य भागों जैसे: पैटर्न, फिल्टर, एनिमेशन या ग्रेडिएंट को संदर्भित करते समय हम इसका बहुत उपयोग करते हैं। इसे बदलने की शुरुआत करने की सिफारिश की गई है href जैसा कि एसवीजी 2 के बाद से दूसरे को पदावनत किया जा रहा है, लेकिन पुराने ब्राउज़रों के साथ संगतता समस्याएँ हो सकती हैं। ऐसे में हम दोनों का इस्तेमाल कर सकते हैं। बस नामस्थान शामिल करना याद रखें xmlns:xlink="http://www.w3.org/1999/xlink" यदि आप अभी भी उपयोग कर रहे हैं xlink:href.

अपने एसवीजी कौशल का स्तर बढ़ाएं!

मुझे आशा है कि यदि आप अनुचित तरीके से प्रदान किए गए इनलाइन SVG का समस्या निवारण करते हैं तो ये सुझाव आपका बहुत समय बचाने में मदद करेंगे। ये केवल वे चीज़ें हैं जिनकी मुझे तलाश है। हो सकता है कि आपके पास अलग-अलग लाल झंडे हों - यदि हां, तो मुझे टिप्पणियों में बताएं!

लब्बोलुआब यह है कि यह कम से कम एक बुनियादी समझ रखने के लिए भुगतान करता है एसवीजी का उपयोग विभिन्न तरीकों से किया जा सकता है. कोडपेन चुनौतियां अक्सर एसवीजी शामिल करते हैं और अच्छे अभ्यास की पेशकश करते हैं। लेवल अप करने के लिए यहां कुछ और संसाधन दिए गए हैं:

एसवीजी से संबंधित अच्छाई के लिए मैं कुछ लोगों का अनुसरण करने का सुझाव देता हूं:

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/