ब्राउज़र में SVG रेंडर नहीं हो रहा? सामान्य कारण
आपका SVG एक टूटे हुए इमेज आइकन (या बिल्कुल कुछ भी नहीं) क्यों दिखाता है?
SVG फाइलें आसान होनी चाहिए। रास्टर फॉर्मेट के एक अनंत स्केलेबल विकल्प के रूप में, वे आमतौर पर विश्वसनीय होती हैं। लेकिन जब एक SVG रेंडर होने से इनकार करता है, तो विफलता अक्सर चुपचाप और भ्रमित करने वाली होती है। आपको एक टूटा हुआ इमेज आइकन, एक खाली सफेद आयत, या बस एक खाली जगह मिलती है जहाँ आपकी ग्राफिक होनी चाहिए। एक भ्रष्ट JPEG कम से कम स्पष्ट रूप से टूटा हुआ दिखता है; एक खराब SVG एक टेक्स्ट एडिटर में एकदम सही दिख सकता है और फिर भी Chrome, Firefox, या Safari में कुछ भी नहीं दिखाता है। समस्याएं आमतौर पर कुछ अलग मुद्दों पर निर्भर करती हैं: वेब सर्वर से एक गलत MIME type, फ़ाइल के अंदर गलत XML, इनलाइन कोड को ब्लॉक करने वाली सुरक्षा नीतियां, या साइज़िंग समस्याएं जो SVG को शून्य दृश्य आकार पर रेंडर करती हैं। प्रत्येक का एक अलग समाधान है, और उन्हें आपस में मिलाने से घंटों बर्बाद हो जाएंगे। यह मार्गदर्शिका प्रत्येक कारण को विशिष्ट सेटिंग्स और विशेषताओं के साथ बताती है जिनकी आपको जांच करने की आवश्यकता है, न कि केवल 'अपनी फ़ाइल को मान्य करें' की अस्पष्ट सलाह। शुरू करने से पहले एक महत्वपूर्ण अंतर: कुछ SVG समस्याएं डिज़ाइन टूल (Illustrator, Figma) में एक्सपोर्ट के दौरान शुरू होती हैं, जबकि अन्य फ़ाइल रूपांतरण के दौरान होती हैं। यदि आपने एक फ़ाइल को SVG में बदलने के लिए एक ऑनलाइन टूल का उपयोग किया और वह टूट गई, तो यह एक अलग तरह की समस्या है, बजाय इसके कि एक सही SVG जिसे आपका सर्वर गलत तरीके से कॉन्फ़िगर कर रहा है। हम दोनों के बीच अंतर करना सुनिश्चित करेंगे।
गलत MIME Type: सर्वर-साइड समस्या जिसे अधिकांश डेवलपर्स अनदेखा करते हैं
जब आप एक `<img>` टैग या CSS `background-image` का उपयोग करके एक SVG प्रदर्शित करते हैं, तो ब्राउज़र सर्वर द्वारा भेजे गए Content-Type हेडर की जांच करता है। यदि वह हेडर सही `image/svg+xml` के बजाय `text/plain` या `application/octet-stream` पढ़ता है, तो अधिकांश ब्राउज़र केवल इमेज को रेंडर करने से इनकार कर देंगे। फ़ाइल स्वयं त्रुटिहीन हो सकती है। यह उत्पादन में टूटे हुए SVGs के सबसे सामान्य कारणों में से एक है, और यह स्थानीय विकास में एक भूत है। क्यों? क्योंकि स्थानीय स्तर पर, आप शायद केवल डिस्क से फ़ाइल खोल रहे हैं, न कि उसे सर्व कर रहे हैं। समस्या केवल आपके डिप्लॉय करने के बाद ही सामने आती है। इसका निदान करने के लिए, अपने ब्राउज़र के DevTools (F12) को खोलें, Network टैब पर स्विच करें, और पेज को फिर से लोड करें। अनुरोध सूची में अपनी SVG खोजें, उस पर क्लिक करें, और Response Headers देखें। `Content-Type` लाइन में `image/svg+xml` लिखा होना चाहिए। यदि इसमें कुछ और लिखा है, तो आपको अपनी समस्या मिल गई है। समाधान सर्वर पर है, फ़ाइल में नहीं। Apache पर, आप अपनी `.htaccess` फ़ाइल में `AddType image/svg+xml .svg .svgz` जोड़कर इसे ठीक कर सकते हैं। Nginx उपयोगकर्ताओं के लिए, अपनी `nginx.conf` के `types` ब्लॉक के अंदर `image/svg+xml svg svgz;` जोड़ें। यदि आप IIS पर हैं, तो आपको `.svg` एक्सटेंशन के लिए `image/svg+xml` पर एक MIME type मैपिंग जोड़ने के लिए Internet Information Services Manager का उपयोग करना होगा। यदि आप Netlify या Vercel जैसे प्रबंधित प्लेटफ़ॉर्म का उपयोग कर रहे हैं, तो इसे एक कॉन्फ़िगरेशन फ़ाइल (`netlify.toml` या `vercel.json`) में संभाला जाता है। उदाहरण के लिए, Netlify का सिंटैक्स, एक दिए गए पाथ के लिए `Content-Type` सेट करने के लिए एक `[[headers]]` ब्लॉक का उपयोग करता है। यह एक पाँच मिनट का फिक्स है जो आपको घंटों की निराशा से बचा सकता है, लेकिन तभी जब आप नेटवर्क पैनल में देखना जानते हों।
गलत XML: जब SVG फ़ाइल स्वयं समस्या हो
एक SVG एक XML दस्तावेज़ है, जिसका अर्थ है कि यह सख्त पार्सिंग नियमों का पालन करता है। एक गुम क्लोजिंग टैग, एक अनएस्केप्ड एम्परसेंड, या एक डुप्लिकेट `id` कुछ ब्राउज़रों में पूरी फ़ाइल को चुपचाप विफल कर सकता है। यहाँ एक टिप है: यदि आपका SVG Chrome में रेंडर होता है लेकिन Firefox में नहीं, तो गलत XML मुख्य संदिग्ध है। Firefox XML त्रुटियों के बारे में बहुत अधिक स्पष्ट है। खुद देखने के लिए, SVG फ़ाइल को सीधे Firefox विंडो में खींचें। यदि XML टूटा हुआ है, तो Firefox आपको एक स्पष्ट त्रुटि संदेश दिखाएगा, जिसमें लाइन और कॉलम संख्या भी होगी: 'XML Parsing Error: not well-formed at line 47, column 12।' यह आपका खजाने का नक्शा है। VS Code जैसे टेक्स्ट एडिटर में फ़ाइल खोलें और उस सटीक स्थान पर जाएं। आप क्या खोज रहे हैं? अक्सर यह एक लिंक में एक एम्परसेंड (`&`) होता है जिसे `&` के रूप में लिखा जाना चाहिए था। या आपको एक अनक्लोज्ड `<path>` या `<g>` एलिमेंट मिल सकता है। एन्कोडिंग समस्याएं एक और क्लासिक हैं, जहाँ एक डिज़ाइन टूल UTF-8 घोषित किए बिना मानक ASCII रेंज के बाहर के वर्णों को एक्सपोर्ट करता है। यदि आपकी SVG फ़ाइल में कोई गैर-ASCII वर्ण हैं, तो उसे हमेशा `<?xml version="1.0" encoding="UTF-8"?>` से शुरू होना चाहिए। Adobe Illustrator के पुराने संस्करणों को प्रोप्राइटरी XML namespaces के साथ फ़ाइलों को एक्सपोर्ट करना पसंद था। जबकि तकनीकी रूप से अमान्य नहीं, यह बेकार वजन जोड़ता है और कभी-कभी पार्सर्स को भ्रमित कर सकता है। इन फ़ाइलों को SVGO जैसे ऑप्टिमाइज़र के माध्यम से चलाने से आमतौर पर उन namespaces को हटा दिया जाता है, जो अच्छा है। खतरा तब है जब ग्राफिक की उपस्थिति किसी तरह उन प्रोप्राइटरी विशेषताओं पर निर्भर करती थी, ऐसी स्थिति में फ़ाइल को साफ करने से वह अप्रत्याशित रूप से टूट सकती है। यदि आपने CocoConvert का उपयोग करके एक फ़ाइल को SVG में परिवर्तित किया और आउटपुट में XML त्रुटियां हैं, तो कृपया परिणाम पृष्ठ पर फीडबैक बटन के माध्यम से हमें बताएं। हम सक्रिय रूप से इस तरह की रूपांतरण कलाकृतियों की तलाश करते हैं और उन्हें ठीक करते हैं।
इनलाइन SVG और कंटेंट सिक्योरिटी पॉलिसी के टकराव
SVG मार्कअप को सीधे अपने HTML में पेस्ट करना एक शक्तिशाली तकनीक है, लेकिन इसमें एक बड़ी कमी है: SVG DOM का हिस्सा बन जाता है। इसका मतलब है कि अब यह आपके पेज की Content Security Policy (CSP) के अधीन है। एक सख्त CSP आपके SVG के कुछ हिस्सों को चुपचाप अक्षम कर सकती है, जिससे भ्रम पैदा हो सकता है। यह विशेष रूप से `<script>` तत्वों, एनिमेशन के लिए `<style>` ब्लॉक, या बाहरी प्रतीक परिभाषाओं को संदर्भित करने वाले `<use>` तत्वों वाले SVGs के लिए सच है। `script-src 'self'` जैसा एक सामान्य CSP निर्देश आपके SVG के अंदर किसी भी इनलाइन स्क्रिप्ट को चलने से रोकेगा। `img-src 'self'` जैसा एक निर्देश SVG को `<image href="https://external-domain.com/...">` के माध्यम से संदर्भित एक बाहरी इमेज को लोड करने से रोक सकता है। अच्छी खबर? ब्राउज़र आपको बताएगा कि वास्तव में क्या गलत है। ब्राउज़र के डेवलपर कंसोल (Network नहीं, Console टैब) को खोलें और लाल त्रुटि संदेशों की तलाश करें। CSP उल्लंघन बहुत स्पष्ट होते हैं, यह बताते हुए कि कौन सा संसाधन ब्लॉक किया गया था और कौन सा नीति निर्देश जिम्मेदार था, जैसे: 'Refused to load the script because it violates the following Content Security Policy directive: script-src self।' आप इसे कैसे ठीक करते हैं यह आपके SVG की जरूरतों पर निर्भर करता है। आप अपने `style-src` निर्देश में `'unsafe-inline'` जोड़ सकते हैं, लेकिन यह आपकी सुरक्षा नीति को कमजोर करता है, इसलिए मैं इसके खिलाफ दृढ़ता से सलाह दूंगा। एनिमेटेड SVGs के लिए एक बहुत बेहतर समाधान CSS को एक बाहरी स्टाइलशीट में ले जाना और इसे `<?xml-stylesheet type="text/css" href="styles.css"?>` के साथ लिंक करना है। बाहरी फ़ाइलों की ओर इशारा करने वाले `<use>` तत्वों के लिए, आपको या तो प्रतीकों को इनलाइन करना होगा या मूल को श्वेतसूची में डालने के लिए अपनी `img-src` नीति को समायोजित करना होगा। CocoConvert या इसी तरह के टूल द्वारा उत्पन्न SVGs में स्क्रिप्ट नहीं होंगी, इसलिए आपको उनके साथ script-src टकराव नहीं दिखेंगे। हालांकि, यदि परिवर्तित SVG रंगों या फ़ॉन्ट के लिए इनलाइन CSS का उपयोग करता है तो style-src टकराव अभी भी संभव है।
Viewport और ViewBox की गलत कॉन्फ़िगरेशन जो SVG को अदृश्य बनाती है
यह सबसे परेशान करने वाली SVG समस्या है। ब्राउज़र SVG को पूरी तरह से रेंडर कर रहा है, लेकिन यह शून्य आकार में या स्क्रीन से कहीं दूर रेंडर हो रहा है। आपको एक टूटा हुआ इमेज आइकन नहीं दिखता है; आपको कुछ भी नहीं दिखता है। जिसने भी DevTools में एक खाली जगह को घूरते हुए देखा है, `<svg>` एलिमेंट को वहीं देखते हुए लेकिन स्क्रीन पर कुछ भी नहीं, वह इस विशेष दर्द को जानता है। मुख्य बात `viewBox` विशेषता के बीच का संबंध है, जो ग्राफिक की आंतरिक समन्वय प्रणाली को परिभाषित करता है, और `width` और `height` विशेषताएँ, जो परिभाषित करती हैं कि SVG पेज पर कितनी जगह घेरता है। जब वे गुम या बेमेल होते हैं, तो अराजकता फैल जाती है। आपको अक्सर Figma एक्सपोर्ट के साथ यह देखने को मिलेगा: एक SVG को `width="100%"` और `height="100%"` दिया जाता है लेकिन इसमें कोई `viewBox` नहीं होता है। यदि आप उस SVG को एक कंटेनर में रखते हैं जिसमें एक स्पष्ट ऊंचाई नहीं है, तो SVG शून्य ऊंचाई तक सिकुड़ जाता है। इसका समाधान एक `viewBox` जोड़ना है जो मूल आर्टबोर्ड आयामों से मेल खाता हो (उदाहरण के लिए, `viewBox="0 0 800 600"`) या अपने CSS में कंटेनिंग एलिमेंट को एक ऊंचाई देना है। एक और क्लासिक एक SVG है जहाँ पाथ डेटा `viewBox` के बाहर बहुत दूर निर्देशांक पर खींचा जाता है। यदि आपका `viewBox` `"0 0 100 100"` है लेकिन आपका पाथ डेटा `M 500 500` से शुरू होता है, तो ग्राफिक 400 यूनिट ऑफ-स्क्रीन खींचा जा रहा है। ऐसा तब होता है जब आप आर्टबोर्ड के मूल को रीसेट किए बिना एक डिज़ाइन टूल में आकृतियों को इधर-उधर ले जाते हैं। इसे ठीक करने के लिए, अपने डिज़ाइन टूल पर वापस जाएं, सभी ऑब्जेक्ट्स का चयन करें, और 'Reset Bounding Box' कमांड या उसके समकक्ष का उपयोग करें, फिर फिर से एक्सपोर्ट करें। इसका निदान करने के लिए, DevTools में SVG का निरीक्षण करें। यदि इसकी गणना की गई चौड़ाई या ऊंचाई 0 है, तो साइज़िंग अपराधी है। आप `<svg>` टैग में सीधे `style="border: 1px solid red; width: 200px; height: 200px;"` जोड़कर भी समस्या को बलपूर्वक हल कर सकते हैं। यह एक दृश्यमान बॉक्स बनाएगा और यह प्रकट करेगा कि आपके ग्राफिक का कोई भी हिस्सा दिखाई दे रहा है या नहीं।
SVG के भीतर फ़ॉन्ट और बाहरी संसाधन लोडिंग विफलताएँ
एक SVG हमेशा आत्मनिर्भर नहीं होता है। यह फ़ॉन्ट, इमेज, ग्रेडिएंट और फ़िल्टर जैसे बाहरी संसाधनों को संदर्भित कर सकता है। जब ये बाहरी कॉल विफल हो जाते हैं, तो SVG आंशिक रूप से रेंडर हो सकता है या पूरी तरह से गलत दिख सकता है, यह इस बात पर निर्भर करता है कि गुम टुकड़ा कितना महत्वपूर्ण है। फ़ॉन्ट विफलताएँ एक लगातार सिरदर्द हैं। एक SVG जो एक `<text>` एलिमेंट में एक कस्टम फ़ॉन्ट निर्दिष्ट करता है, यदि वह फ़ॉन्ट उपलब्ध नहीं है तो सिस्टम डिफ़ॉल्ट पर वापस आ जाएगा। यह आमतौर पर रेंडरिंग को पूरी तरह से नहीं तोड़ता है, लेकिन यह टेक्स्ट को अपने कंटेनर से बाहर निकलने का कारण बन सकता है और पूरे लेआउट को बिगाड़ सकता है। मेरी सलाह: वेब उपयोग के लिए एक SVG एक्सपोर्ट करने से पहले हमेशा टेक्स्ट को आउटलाइन (पाथ) में बदलें। Illustrator में, यह Type > Create Outlines है; Inkscape में, यह Path > Object to Path है। यह फ़ॉन्ट निर्भरता और समस्याओं के एक पूरे वर्ग को पूरी तरह से समाप्त कर देता है। SVG के अंदर की बाहरी इमेज और भी अधिक नाजुक होती हैं। एक URL की ओर इशारा करने वाला `<image>` टैग विफल हो सकता है क्योंकि URL डाउन है, क्योंकि इमेज सर्वर में उचित CORS हेडर की कमी है, या क्योंकि एक CSP मूल को ब्लॉक करता है। ब्राउज़र एक त्रुटि आइकन नहीं दिखाएगा; यह बस उस जगह पर एक खाली जगह को रेंडर करेगा जहाँ इमेज होनी चाहिए। 404 स्टेटस या 0 स्टेटस वाले अनुरोधों के लिए अपने Network टैब की जांच करें, जो अक्सर CORS या CSP ब्लॉक का संकेत देता है। यदि आप एक PDF या AI फ़ाइल को परिवर्तित कर रहे हैं जिसमें रास्टर इमेज शामिल हैं, तो CocoConvert उन इमेजों को सीधे SVG में base64 data URIs के रूप में एम्बेड करेगा। यह बाहरी संदर्भ समस्या को हल करता है लेकिन SVG फ़ाइल को बहुत बड़ा बना सकता है। कुछ फ़ोटो के साथ एक PDF आसानी से 5MB+ SVG बन सकता है। ऐसे मामलों में, हम सीधे कहेंगे: PNG या WebP में परिवर्तित करना अधिक व्यावहारिक विकल्प है। हम यह दिखावा नहीं करने जा रहे हैं कि SVG हमेशा सही जवाब है।
जब रूपांतरण समस्या का स्रोत हो (और इसके बारे में क्या करें)
कभी-कभी समस्या आपका ब्राउज़र या आपका सर्वर नहीं होता है। SVG फ़ाइल स्वयं शुरू से ही टूटी हुई थी, एक खराब रूपांतरण प्रक्रिया का शिकार थी। इस संभावना को पहचानना महत्वपूर्ण है, क्योंकि इसका मतलब है कि आपको अपने पर्यावरण को डीबग करना बंद कर देना चाहिए और फ़ाइल की जांच करना शुरू कर देना चाहिए। सामान्य रूपांतरण कलाकृतियों में बेतुकी रूप से उच्च परिशुद्धता (15+ दशमलव स्थान) वाले पाथ डेटा शामिल होते हैं, जो फ़ाइलों को फुलाते हैं और पार्सर्स को समय से बाहर कर सकते हैं; CMYK से असमर्थित RGB मानों में गलत रंग स्थान रूपांतरण; और यदि एक स्रोत फ़ाइल ने गैर-लैटिन स्क्रिप्ट का उपयोग किया तो टूटी हुई टेक्स्ट एन्कोडिंग। आप मालिकाना XML पर निर्भर रहने वाले फॉर्मेट से परिवर्तित करते समय गुम namespace घोषणाएं भी देख सकते हैं। यदि आपको खराब रूपांतरण का संदेह है, तो जांचने का सबसे तेज़ तरीका Inkscape में SVG को खोलना है। यह मुफ़्त, क्रॉस-प्लेटफ़ॉर्म है, और इसमें एक बहुत ही क्षमाशील SVG पार्सर है। यदि फ़ाइल Inkscape में सही दिखती है लेकिन Chrome में टूटी हुई है, तो समस्या संभवतः ब्राउज़र-विशिष्ट है। यदि यह Inkscape में भी टूटी हुई है, तो रूपांतरण प्रक्रिया स्वयं विफल हो गई और आउटपुट भ्रष्ट है। CocoConvert मजबूत रूपांतरण पुस्तकालयों का उपयोग करता है, लेकिन कोई भी स्वचालित उपकरण सही नहीं होता है। सैकड़ों परतों वाली एक अत्यधिक जटिल AI फ़ाइल, या पारदर्शिता प्रभावों पर बहुत अधिक निर्भर करने वाली एक PDF, अपूर्ण SVG आउटपुट उत्पन्न कर सकती है। इन स्थितियों में, सबसे विश्वसनीय तरीका अक्सर मूल एप्लिकेशन में स्रोत फ़ाइल को खोलना, सीधे SVG में एक्सपोर्ट करना, और उन फॉर्मेट जोड़ियों के लिए CocoConvert का उपयोग करना है जिनमें हम उत्कृष्ट हैं, जैसे कि सरल PNGs को SVG में या प्रिंट के लिए SVG को PDF में परिवर्तित करना। यदि आपको रूपांतरण से एक टूटा हुआ SVG मिलता है, तो कृपया परिणाम पृष्ठ पर फीडबैक फॉर्म का उपयोग करके इसकी रिपोर्ट करें, और यदि आप कर सकते हैं तो मूल फ़ाइल को शामिल करें। विशिष्ट उदाहरण ही हैं कि हम सभी के लिए रूपांतरण पाइपलाइन को कैसे बेहतर बनाते हैं, और हम उन रिपोर्टों को गंभीरता से लेते हैं।