PerfectVector
लेखक: Irene Kim10 मिनट का पठन

SVG खाली खुलता है: दोबारा बनाने से पहले 7 जाँचें

खाली SVG कैनवास से बाहर, अदृश्य, क्लिप किया हुआ, असमर्थित, खराब बना हुआ या केवल रास्टर का आवरण हो सकता है। उसे सुरक्षित रखकर दोबारा बनाने से पहले 7 जाँचें करें।

इस पेज पर

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

प्रतिलिपि को ब्राउज़र और वेक्टर संपादक में खोलें। यह तुलना पहला निर्णय है: एक में दिखना और दूसरे में खाली होना सामान्यतः ऐप के समर्थन या दस्तावेज़ की संरचना की ओर संकेत करता है; हर जगह खाली होना व्यूपोर्ट, रंग, क्लिपिंग, अमान्य मार्कअप या अनुपस्थित सामग्री की ओर अधिक संकेत करता है।

7 जाँचें
  1. मूल फ़ाइल सुरक्षित रखें और उसका आकार देखें।
  2. ब्राउज़र और वेक्टर संपादक की तुलना करें।
  3. सब चुनकर वस्तुओं की सीमाएँ देखें।
  4. सीमाओं की तुलना viewBox, width और height से करें।
  5. भरण, रेखा, अपारदर्शिता, प्रदर्शन और दृश्यता देखें।
  6. क्लिप, मास्क, पैटर्न, फ़िल्टर, <image> और <foreignObject> देखें।
  7. दोबारा वेक्टराइज़ करने का निर्णय लेने से पहले मार्कअप सत्यापित करें या फिर निर्यात करें।

ये जाँचें निदान का क्रम हैं, 7 असंबंधित सुधार नहीं। पहले ज्यामिति की मौजूदगी सुनिश्चित करें, फिर कुछ बदलने से पहले उसकी सीमाएँ, माप, रंग, क्लिपिंग, समर्थित प्रभाव और निर्भरताएँ जाँचें।

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

1. फ़ाइल सुरक्षित रखें और देखें कि उसमें डेटा है या नहीं

नए नाम से प्रतिलिपि बनाएँ। फिर फ़ाइल का आकार देखें और उसे सादे पाठ के संपादक में खोलें।

शून्य बाइट की फ़ाइल या केवल खाली रूट <svg> तत्व वाले दस्तावेज़ की उस प्रतिलिपि से बहुत कम सामग्री वापस मिल सकती है। पाथ, समूह, शैलियाँ या एन्कोड किए गए डेटा का बड़ा खंड रखने वाली फ़ाइल केवल कैनवास खाली दिखने से खाली नहीं हो जाती।

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

2. ब्राउज़र और वेक्टर संपादक की तुलना करें

SVG को किसी वर्तमान ब्राउज़र में खींचकर खोलें, फिर वही प्रतिलिपि Inkscape, Illustrator, Figma या दूसरे वेक्टर संपादक में खोलें।

ब्राउज़रसंपादकसंभावित कारण
दिखता हैखालीअसमर्थित सुविधा, एम्बेड की गई वेब सामग्री, पैटर्न, फ़िल्टर, मास्क या आयातक की सीमा
खालीदिखता हैब्राउज़र के लिए मार्कअप, CSS, संसाधन या सुरक्षा की समस्या
खालीखालीव्यूपोर्ट, रंग, क्लिपिंग, खराब मार्कअप या अनुपस्थित सामग्री
दिखता हैदिखता हैमूल समस्या थंबनेल, आयात विधि या किसी खास ऐप से जुड़ी हो सकती है

ब्राउज़र में फ़ाइल दिखना यह सिद्ध नहीं करता कि उसमें दूसरे ऐप में उपयोग योग्य वेक्टर पाथ हैं। ब्राउज़र एम्बेड की गई रास्टर छवियाँ और वेब सामग्री दिखा सकते हैं जिन्हें CAD या वेक्टर संपादक अनदेखा करते हैं।

3. सब चुनें और सीमाएँ देखें

वेक्टर संपादक में सब चुनें का उपयोग करें। चयन बॉक्स, निर्देशांक, चौड़ाई और ऊँचाई देखें।

  • पृष्ठ से बहुत दूर चयन बॉक्स का अर्थ है कि चित्र कैनवास से बाहर है।
  • बहुत बड़ा चयन किसी अतिरिक्त बिंदु, क्लिपिंग वस्तु या पृष्ठभूमि आयत का संकेत हो सकता है।
  • सामान्य चयन बॉक्स में अदृश्य चित्र रंग, अपारदर्शिता या क्लिपिंग की ओर संकेत करता है।
  • चुनने योग्य वस्तु न होना असमर्थित सामग्री, खाली दस्तावेज़ या असफल आयात का संकेत है।

वस्तुएँ कैनवास से बाहर हों तो चयन को पृष्ठ पर लाएँ या पृष्ठ का आकार चित्र के अनुसार बदलें। पाथ का माप तब तक न बदलें जब तक उनके वास्तविक आयाम भी गलत न हों।

4. चित्र की तुलना viewBox से करें

SVG को पाठ के रूप में खोलकर रूट तत्व देखें:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

viewBox की 4 संख्याएँ न्यूनतम x, न्यूनतम y, चौड़ाई और ऊँचाई हैं, जैसा SVG निर्देशांक प्रणाली विनिर्देश में परिभाषित है। 10000,10000 के आसपास निर्देशांक वाला चित्र viewBox="0 0 800 600" के भीतर नहीं दिखेगा। शून्य या ऋणात्मक viewBox आयाम उस तत्व का प्रदर्शन बंद कर देता है।

वास्तविक ज्यामिति के आधार पर दिखने वाली सीमाएँ ठीक करें। किसी दूसरी फ़ाइल का मनमाना viewBox चिपकाएँ नहीं। चित्र दिखता हो लेकिन माप गलत हो, तो गलत आकार वाले SVG की मार्गदर्शिका बताती है कि viewBox और व्यूपोर्ट आयाम कैसे साथ काम करते हैं।

5. रंग और दृश्यता जाँचें

वस्तु चुनकर भरण और रेखा दोनों देखें। आम अदृश्य स्थितियाँ हैं:

  • बिना रेखा के fill="none";
  • सफेद कैनवास पर सफेद भरण;
  • opacity="0", fill-opacity="0" या stroke-opacity="0";
  • display="none" या visibility="hidden";
  • ऐसी क्लास जिसकी स्टाइलशीट इनमें से कोई मान लागू करती हो;
  • वर्तमान माप पर अत्यंत पतली रेखा।

अस्थायी रूप से चित्र के पीछे रंगीन आयत रखें या किसी पाथ की प्रतिलिपि को तेज परीक्षण रंग दें। वह दिखने लगे तो इच्छित शैलियाँ वापस लगाएँ; अंतिम फ़ाइल में निदान वाला रंग न छोड़ें।

भरण दिखता रहे लेकिन निर्यात के बाद कुछ रेखाएँ गायब हों, तो गायब होती SVG रेखाओं की मार्गदर्शिका से रेखा के रंग, क्लिपिंग, माप और असमर्थित दिखावट की जाँच करें, अच्छी ज्यामिति को दोबारा ट्रेस किए बिना।

6. वे सुविधाएँ देखें जिन्हें गंतव्य शायद समर्थन न देता हो

मार्कअप में clipPath, mask, pattern, filter, <image> और <foreignObject> खोजें।

निर्देशांक प्रणाली या संदर्भ टूटने पर क्लिप और मास्क सब कुछ छिपा सकते हैं; SVG प्रदर्शन मॉडल क्लिपिंग, मास्किंग, फ़िल्टरिंग और संयोजन को प्रदर्शन प्रक्रिया में रखता है। पैटर्न और फ़िल्टर अलग आयातकों में अलग दिख सकते हैं। <image> तत्व SVG के भीतर छवि सामग्री एम्बेड करता है, जबकि <foreignObject> दूसरे XML नेमस्पेस की सामग्री रख सकता है, जैसा SVG एम्बेडेड सामग्री विनिर्देश में बताया गया है।

आकृतियाँ बची हों लेकिन HTML लेबल गायब हों, तो foreignObject और SVG के अपने पाठ तत्व की तुलना करें और केवल असफल लेबल बदलें।

पाथ दिखते हों लेकिन छाया कटती हो, तो फ़िल्टर क्षेत्र और बाहरी व्यूपोर्ट को अलग जाँचकर कटी SVG छाया का निदान करें।

संदर्भ भी असफल हो सकते हैं। जाँचें कि url(#name) में प्रयुक्त ID सचमुच मौजूद और अद्वितीय हैं। SVG किसी बाहरी छवि, फ़ॉन्ट, स्टाइलशीट या जुड़ी फ़ाइल पर निर्भर हो तो उसे स्थानांतरित करने से संसाधन का संबंध टूट सकता है।

Qt ऐप के लिए Qt में SVG रेंडरर की मार्गदर्शिका मॉड्यूल और लोडिंग जाँचों को समर्थित सुविधाओं की सीमाओं से अलग करती है। पहले छोटे स्रोत की तुलना करें, फिर चुने हुए प्रदर्शन तरीके में चित्र देखें।

ब्राउज़र में डिज़ाइन दिखता हो लेकिन CAD में कुछ आयात न हो, तो सामान्य <path>, <rect>, <circle> और वैसी वेक्टर ज्यामिति खोजें। दिखने वाले एम्बेडेड PNG में CAD के उपयोग के लिए वक्र नहीं होते।

7. फ़ाइल सत्यापित करें या फिर निर्यात करें

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

स्रोत न हो तो SVG/XML सत्यापक या वाक्यरचना त्रुटियाँ बताने वाला पाठ संपादक उपयोग करें। प्रतिलिपि पर काम करें और पहली संरचनात्मक त्रुटि पहले ठीक करें, क्योंकि बाद के संदेश उसके परिणाम हो सकते हैं।

एकमात्र प्रतिलिपि पर अनुकूलक न चलाएँ। अनुकूलन संरचना दोबारा लिखता है और समस्या समझ में न आने पर सामग्री वापस पाना कठिन कर सकता है।

कब दोबारा बनाएँ या वेक्टराइज़ करें

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

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

पूरा डिज़ाइन एक पिक्सेल छवि की तरह चुना जाता हो या बहुत ज़ूम करने पर चौकोर दिखे, तो दोबारा बनाने से पहले छिपे पिक्सेल का निदान करें।

PerfectVector कहाँ उपयोगी है

PerfectVector की छवि से वेक्टर बनाने की प्रक्रिया केवल रास्टर वाली स्थिति के लिए है। सर्वोत्तम PNG, JPG या अन्य समर्थित छवि अपलोड करें और वेक्टर पूर्वावलोकन में वास्तविक आकृतियाँ, साफ किनारे, खाली स्थान और संभालने योग्य पाथ देखें।

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

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

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

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

क्या SVG सफेद होकर खाली दिख सकता है? हाँ। सफेद भरण या रेखाएँ सफेद कैनवास पर गायब हो जाती हैं। फ़ाइल शून्य अपारदर्शिता, display="none" या visibility="hidden" भी उपयोग कर सकती है। रंगीन पृष्ठभूमि पर जाँचें और लागू शैलियाँ देखें।

मेरा SVG Fusion या दूसरे CAD ऐप में खाली क्यों आयात होता है? फ़ाइल में वेक्टर वक्रों की जगह एम्बेड किया हुआ बिटमैप या असमर्थित वेब सामग्री हो सकती है। CAD को आयात योग्य पाथ ज्यामिति चाहिए। <path> और संबंधित आकृतियाँ खोजें और देखें कि दृश्य सामग्री कहीं <image> या <foreignObject> में तो नहीं है।

क्या खाली SVG को PNG और फिर SVG में बदलना चाहिए? केवल तब जब SVG में वापस मिल सकने वाली वेक्टर ज्यामिति न हो और रास्टर रूप सर्वोत्तम बचा हुआ स्रोत हो। PNG में बदलकर वापस आने से मौजूदा पाथ संरचना नष्ट होती है। पहले व्यूपोर्ट, दृश्यता, क्लिपिंग और समर्थन की समस्याएँ जाँचें।

स्रोत

  1. W3C — SVG 2 निर्देशांक प्रणालियाँ — व्यूपोर्ट, viewBox, इकाइयाँ और रूपांतरण परिभाषित करता है।
  2. W3C — SVG 2 प्रदर्शन मॉडल — क्लिपिंग, मास्किंग, फ़िल्टरिंग, संयोजन और प्रदर्शन क्रम बताता है।
  3. W3C — SVG 2 एम्बेडेड सामग्री — SVG में एम्बेडेड छवियाँ और बाहरी सामग्री परिभाषित करता है।
  4. W3C — मार्कअप सत्यापन सेवा — मार्कअप की त्रुटियाँ खोजने के लिए मानक आधारित दस्तावेज़ सत्यापन देता है।

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

Blog से और

ऐसे साफ़ SVG से शुरुआत करें
जिसे एडिट करना आसान हो