SVG foreignObject टेक्स्ट: गायब एक्सपोर्ट लेबल ठीक करें

अगर SVG की आकृतियाँ एक्सपोर्ट में बनी रहें लेकिन लेबल गायब हों, तो गायब लेबल में <foreignObject> देखें। उसमें ऐसा HTML हो सकता है जिसका लेआउट ब्राउज़र सही बना ले, लेकिन गंतव्य रेंडरर उसका समर्थन न करे। प्रभावित लेबल को नेटिव SVG <text> और <tspan> से बदलें, या ऐसा एक्सपोर्ट तरीका चुनें जो उसका रूप सुरक्षित रखे।

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

चित्र बचता है लेकिन लेबल क्यों गायब होता है

SVG सामान्य आकृतियों के साथ दूसरे XML नेमस्पेस की सामग्री मिला सकता है। <path> से बना पहाड़ और <circle> से बना सूरज नेटिव SVG हैं। <foreignObject> के अंदर अनुच्छेद HTML हो सकता है, जिसके अपने पंक्ति विभाजन और लेआउट नियम हैं। MDN का foreignObject संदर्भ यह अंतर समझाता है।

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

छोटा परीक्षण: केवल लेबल बदलें

हमने पाथ, वृत्त और “चित्र और लेबल अलग रखें” अर्थ वाले शब्दों के साथ 480 × 240 SVG कार्ड बनाया। पहली फ़ाइल HTML लेबल इस्तेमाल करती है। दूसरी समान आकृतियाँ रखती है और केवल लेबल को नेटिव टेक्स्ट तथा तीन स्पष्ट पंक्तियों से बदलती है।

ब्राउज़र पूर्वावलोकन में दोनों लेबल दिखे। उसी फ़ाइल को sharp 0.34.4 और उसके साथ आने वाले librsvg 2.61.1 से PNG में रेंडर करने पर नीचे का परिणाम मिला: HTML लेबल गायब हुआ, नेटिव लेबल बचा रहा। HTML लेबल वाला आउटपुट, लेबल हटाई गई नियंत्रण फ़ाइल से पिक्सेल स्तर पर भी समान था। यह इन फ़ाइलों और इस रेंडरर संस्करण का परीक्षण है, हर एडिटर की अनुकूलता का अंतिम निर्णय नहीं।

मूल फ़ाइल इतनी छोटी है कि आसानी से दोहराई जा सकती है। इसे html-label.svg नाम से सेव करें और ब्राउज़र में खोलें:

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="240" viewBox="0 0 480 240">
  <rect width="480" height="240" rx="20" fill="#f5f1e7"/>
  <path d="M40 135Q90 15 140 135Z" fill="#087f75"/>
  <circle cx="90" cy="95" r="18" fill="#f4bc45"/>
  <foreignObject x="180" y="70" width="230" height="110">
    <div xmlns="http://www.w3.org/1999/xhtml"
      style="font: 28px/1.25 Arial, sans-serif; color: #172b34;">
      Keep artwork and labels separate
    </div>
  </foreignObject>
</svg>

दूसरी फ़ाइल के लिए पूरे foreignObject तत्व को इस लेबल से बदलें और native-label.svg नाम से सेव करें:

<text x="180" y="96" font-family="Arial, sans-serif"
  font-size="28" fill="#172b34">
  <tspan x="180" dy="0">Keep artwork</tspan>
  <tspan x="180" dy="35">and labels</tspan>
  <tspan x="180" dy="35">separate</tspan>
</text>

x मान हर पंक्ति को समान क्षैतिज स्थिति से शुरू करता है। dy मान अगली पंक्तियाँ नीचे ले जाते हैं। इसमें जानबूझकर HTML का स्वचालित पंक्ति विभाजन छोड़ा गया है: लेखक पंक्ति विभाजन चुनता है और उनका फ़िट जाँचता है। MDN में tspan की स्थिति का दस्तावेज़ है और librsvg अपने समर्थित SVG तत्वों की सूची देता है, जिसमें text और tspan शामिल हैं।

दोनों फ़ाइलों को वास्तविक वितरण तरीके, जैसे इमेज कन्वर्टर या PDF जनरेटर से खोलें। केवल मूल पूर्वावलोकन के बजाय सेव किए परिणाम की तुलना करें। उदाहरण के आयाम समान रखने से दूसरे कंप्यूटर पर फ़ॉन्ट समान होने की गारंटी नहीं मिलती।

अगर ब्राउज़र में भी लेबल गायब है

केवल उसे बनाने वाले पेज के बजाय सेव की गई .svg फ़ाइल जाँचें। HTML के अंदर इनलाइन SVG और अलग SVG दस्तावेज़ अलग पार्सिंग संदर्भ हैं।

उदाहरण स्पष्ट रूप से div को http://www.w3.org/1999/xhtml में रखता है। MDN बताता है कि अलग SVG दस्तावेज़ में HTML सामग्री के लिए यह नेमस्पेस घोषणा ज़रूरी है, भले ही इनलाइन HTML उदाहरण में उसे छोड़ सकें। JavaScript से तत्व बनाएँ तो HTML बच्चे के लिए उपयुक्त नेमस्पेस इस्तेमाल करें; SVG नेमस्पेस में बना div HTML अनुच्छेद कंटेनर नहीं है।

फिर लेबल के ये हिस्से जाँचें:

• इच्छित लेबल क्षेत्र के लिए foreignObject को स्पष्ट धनात्मक width और height दें।
• सभी पंक्तियों की जगह छोड़ते हुए उसके x और y निर्देशांक दृश्य आरेख के अंदर रखें।
• कंटेनर और उसके बच्चों पर display, visibility, अपारदर्शिता और टेक्स्ट रंग जाँचें।
• पुष्टि करें कि एक्सपोर्ट फ़ाइल में ज़रूरी शैली शामिल है और वह आसपास के वेबपेज की स्टाइलशीट पर निर्भर नहीं है।

उदाहरण में लेबल की सारी शैली इनलाइन है और बॉक्स 230 इकाइयाँ चौड़ा तथा 110 ऊँचा है। इससे बाहरी CSS का चर हटता है। इससे foreignObject उस सुविधा के बिना वाले रेंडरर में पोर्टेबल नहीं बनता।

draw.io एक्सपोर्ट के लिए मूल स्रोत में लेबल बदलें

अगर संपादन योग्य आरेख अब भी है, तो XML हाथ से संपादित करने से पहले वहीं लेबल एक्सपोर्ट ठीक करें। वर्तमान draw.io एक्सपोर्ट दस्तावेज़ समर्थित फ़ॉर्मैट वाले लेबल के लिए Convert Labels to SVG देता है: आकृतियाँ या कनेक्टर चुनें, Text टैब का Advanced खंड खोलें और चेकबॉक्स चालू करें।

उस विकल्प की सीमाएँ हैं। दस्तावेज़ टेबल, सूची, लिंक या पृष्ठभूमि रंग जैसी संरचनाओं वाले लेबल को इस रूपांतरण से बाहर रखता है। विकल्प उपलब्ध न हो तो Formatted Text और Word Wrap बंद करना दूसरा दस्तावेज़ीकृत तरीका है; आपको हाथ से पंक्ति विभाजन डालकर लेआउट फिर जाँचना पड़ सकता है।

नई प्रति एक्सपोर्ट करें और फ़ाइल लेने वाले ऐप में दोबारा खोलें। “Text is not SVG” चेतावनी छिपाने से लेबल नहीं बदलता। फ़ॉन्ट एम्बेड करना फ़ॉन्ट निर्भरता हल करता है, अनुपस्थित HTML लेआउट समर्थन नहीं।

चित्र वाले आरेख में इंपोर्ट किया चित्र लेबल से अलग रखें। draw.io कस्टम SVG आकृति मार्गदर्शिका उस प्रक्रिया का चित्र वाला हिस्सा बताती है।

अगले व्यक्ति के लिए टेक्स्ट फ़ॉर्मैट चुनें

प्राप्तकर्ता को शब्द संपादित करने हों तो नेटिव टेक्स्ट उपयोगी सुधार है, लेकिन वह अब भी उपयोगी फ़ॉन्ट पर निर्भर है। लेबल गलत फ़ॉन्ट में दिखे तो उसे वही गायब कंटेनर समस्या मानने के बजाय SVG फ़ॉन्ट जाँच करें।

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

चित्रित कार्ड में PerfectVector कहाँ उपयोगी है

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

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

ठीक किया गया SVG भेजने से पहले

1. एक्सपोर्ट प्रति को ब्राउज़र और इच्छित गंतव्य में दोबारा खोलें।
2. अंतिम पंक्ति सहित हर लेबल दिखाई देने की पुष्टि करें।
3. जाँचें कि चित्र खिसका नहीं है और उसका आकार नहीं बदला।
4. फ़ॉन्ट सत्यापित करें या इच्छित आकार पर आउटलाइन बने अक्षर जाँचें।
5. वितरण प्रति के साथ संपादन योग्य मूल रखें।

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

SVG टेक्स्ट Chrome में दिखता है लेकिन PNG एक्सपोर्ट में क्यों गायब होता है? लेबल foreignObject के अंदर HTML हो सकता है, जबकि PNG रेंडरर SVG के अलग सीमित हिस्से का समर्थन करता है। गायब लेबल का मार्कअप जाँचें और उसी एक्सपोर्ट तरीके से नेटिव text वाला संस्करण रेंडर करें।

क्या XHTML नेमस्पेस जोड़ने से हर foreignObject एक्सपोर्ट ठीक हो जाता है? नहीं। वह अलग SVG में HTML सामग्री का नेमस्पेस ठीक करता है। गंतव्य को अब भी उस सामग्री का समर्थन चाहिए और लेबल को उपयुक्त आयाम तथा दिखाई देने वाली शैली चाहिए।

क्या tspan HTML अनुच्छेद की तरह पंक्तियाँ बाँट सकता है? उदाहरण स्पष्ट पंक्तियाँ और ऊर्ध्वाधर विस्थापन इस्तेमाल करता है। वह HTML अनुच्छेद लेआउट दोहराता नहीं। उपलब्ध जगह के लिए पंक्ति विभाजन चुनें और गंतव्य के फ़ॉन्ट से जाँचें।

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

स्रोत

1. MDN — foreignObject — बाहरी सामग्री, ज्यामिति एट्रिब्यूट और अलग SVG में XHTML नेमस्पेस परिभाषित करता है।
2. MDN — tspan — नेटिव SVG टेक्स्ट के हिस्सों की स्थिति समझाता है।
3. draw.io — एक्सपोर्ट किए SVG टेक्स्ट की समस्याएँ — नेटिव लेबल रूपांतरण, फ़ॉर्मैट सीमाएँ और वैकल्पिक एक्सपोर्ट सेटिंग बताता है।
4. GNOME — Librsvg की समर्थित SVG और CSS सुविधाएँ — रेंडरर के समर्थित तत्व और एट्रिब्यूट सूचीबद्ध करता है।

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