निर्यात या आयात के बाद SVG का फ़ॉन्ट क्यों बदलता है

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

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

स्वचालित PNG निर्यात के लिए resvg में फ़ॉन्ट फ़ाइलें स्पष्ट रूप से लोड करें और फ़ाइल सौंपने से पहले रेंडर किए गए अक्षरों की तुलना स्रोत से करें।

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

पहले देखें SVG में अब भी टेक्स्ट है या नहीं

केवल फ़ाइल एक्सटेंशन से इसका उत्तर नहीं मिलता। SVG अक्षरों को कम से कम 2 सामान्य तरीकों से दर्शा सकता है:

<text font-family="Example Sans" font-weight="600">Sample</text>

यह लाइव टेक्स्ट है। SVG वर्ण और स्टाइलिंग के निर्देश रखता है। उन वर्णों को दिखाई देने वाली अक्षर आकृतियों में बदलने के लिए रेंडरर को मेल खाने वाला फ़ॉन्ट खोजना होता है।

आउटलाइन टेक्स्ट ऐसा दिखता है:

<path d="M ... Z" />

यहाँ हर अक्षर वेक्टर ज्यामिति में बदल दिया गया है। प्राप्तकर्ता को फ़ॉन्ट की आवश्यकता नहीं होती, लेकिन शब्द अब सामान्य संपादन योग्य टेक्स्ट स्ट्रिंग नहीं है।

पूरा मार्कअप समझे बिना जाँच सकते हैं:

1. SVG की प्रति बनाएँ;
2. साधारण टेक्स्ट संपादक में खोलें;
3. <text और <tspan खोजें;
4. फ़ॉन्ट का दिखता नाम खोजें;
5. अनुपस्थित हों तो अक्षर <path> से बने हैं, देखें।

वेक्टर संपादक में टेक्स्ट टूल का उपयोग करके किसी अक्षर पर क्लिक करें। झपकता टेक्स्ट कर्सर लाइव टेक्स्ट का संकेत है। हर अक्षर के चारों ओर नोड आउटलाइन का संकेत हैं।

अक्षरों की 3 स्थितियाँ

कारण 1: इच्छित फ़ॉन्ट इंस्टॉल नहीं

SVG का font-family एट्रिब्यूट फ़ॉन्ट परिवारों के नामों की प्राथमिकता वाली सूची है। MDN का SVG font-family संदर्भ बताता है कि रेंडरर इस सूची से चुनता है। यदि पहला परिवार नहीं मिलता, तो वह अगले पर जाता है और अंततः sans-serif या serif जैसा सामान्य परिवार चुनता है।

आम स्थितियाँ:

• डिज़ाइनर का स्थानीय फ़ॉन्ट प्राप्तकर्ता के पास नहीं;
• सब्सक्रिप्शन सेवा का फ़ॉन्ट केवल एक मशीन पर सक्रिय;
• SVG डेस्कटॉप से फ़ोन, टैबलेट, कटर या ऑफ़िस में गया;
• फ़ॉन्ट भीतर का परिवार नाम फ़ाइल या डाउनलोड फ़ोल्डर नाम से अलग;
• एक शैली इंस्टॉल लेकिन SVG दूसरा वज़न या इटैलिक माँगे।

“कुछ मिलता-जुलता” फ़ॉन्ट इंस्टॉल करने से लेआउट वापस नहीं आता। 2 sans-serif फ़ॉन्ट में अक्षरों की चौड़ाई, ऊपर उठे हिस्से, कर्निंग और बेसलाइन के माप अलग हो सकते हैं। वैकल्पिक फ़ॉन्ट देखने में मिलता-जुलता लग सकता है, फिर भी केंद्र में रखा शब्द अपनी इच्छित स्थिति से हट सकता है। इच्छित फ़ॉन्ट उपलब्ध होने के बाद SVG टेक्स्ट के ऊर्ध्व संरेखण का उदाहरण बेसलाइन की स्थिति को टेक्स्ट बॉक्स और दृश्य केंद्र से अलग समझने में मदद करता है।

कारण 2: अपेक्षित वेब फ़ॉन्ट लोड नहीं हुआ

वेब पेज के भीतर उपयोग किया गया SVG पेज की CSS से फ़ॉन्ट ले सकता है। उसमें @font-face नियम वाला स्टाइल ब्लॉक भी हो सकता है; SVG 2 CSS Fonts मॉडल के माध्यम से डाउनलोड किए जा सकने वाले फ़ॉन्ट का समर्थन आवश्यक करता है। यह व्यवस्था तब विफल होती है जब फ़ॉन्ट URL गलत हो, फ़ाइल डिप्लॉय न की गई हो, पहुँच अवरुद्ध हो, माँगा गया फ़ॉर्मैट समर्थित न हो या SVG को स्टाइल देने वाले पेज के बजाय अकेले खोला जाए।

ब्राउज़र के डेवलपर टूल खोलें और पेज दोबारा लोड करें। Network पैनल में फ़ॉन्ट फ़ाइलों को फ़िल्टर करें और असफल अनुरोध खोजें। <text> तत्व की गणना की गई स्टाइल में केवल घोषित परिवार के नाम पर भरोसा करने के बजाय पुष्टि करें कि वास्तव में कौन-सा फ़ॉन्ट रेंडर हुआ।

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

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

कारण 3: परिवार या वज़न ठीक मेल नहीं

CSS फ़ॉन्ट मिलान में केवल दिखाई देने वाले परिवार के नाम से अधिक जानकारी का उपयोग होता है। SVG यह माँग सकता है:

font-family: "Example Sans";
font-style: normal;
font-weight: 600;

यदि उपलब्ध फ़ाइलों में केवल वज़न 400 और 700 हैं, तो रेंडरर कृत्रिम रूप से वज़न बना सकता है या पास की शैली चुन सकता है। Variable फ़ॉन्ट में अक्ष और इंस्टेंस नाम भी होते हैं, जिनकी आयात करने वाला ऐप अलग व्याख्या कर सकता है। पुराने डिज़ाइन या कटिंग सॉफ़्टवेयर कुछ OpenType सुविधाओं, संयुक्त अक्षरों या विविधता की सेटिंग को अनदेखा कर सकते हैं।

मूल और SVG साथ जाँचें:

• सटीक परिवार नाम;
• शैली और संख्यात्मक वज़न;
• अक्षर दूरी;
• बड़े-छोटे अक्षर और वास्तविक वर्ण;
• संयुक्त अक्षर जैसे OpenType गुण;
• variable फ़ॉन्ट अक्ष मान;
• पाथ पर टेक्स्ट या ऊर्ध्व टेक्स्ट व्यवहार।

हर शब्द को हाथ से स्केल करके फ़ॉन्ट परिवार के अंतर को ठीक करने की कोशिश न करें। इससे गलत अक्षर आकृतियाँ बनी रहती हैं और केवल समस्या का लक्षण छिपता है।

कारण 4: निर्यात में टेक्स्ट रहा, आयात ऐप अलग सँभालता है

SVG का टेक्स्ट लेआउट डेस्कटॉप प्रकाशन दस्तावेज़ के समान नहीं होता। निर्यातक नेस्ट किए गए <tspan> तत्वों, अलग-अलग निर्देशांकों, text-anchor या <textPath> का उपयोग कर सकता है। आयात करने वाला ऐप इन सुविधाओं को समतल कर सकता है, दोबारा ग्रुप कर सकता है या उनकी अलग व्याख्या कर सकता है। यदि आप बैज दोबारा बना रहे हैं, तो SVG पाथ पर संपादन योग्य टेक्स्ट की प्रक्रिया प्रतीक, गाइड वक्र और लाइव अक्षरों को अलग करती है, ताकि आप हर हिस्से की जाँच कर सकें।

दस्तावेज़ में चित्र रखने के लिए Typst में SVG चित्रों और इनलाइन कला की प्रक्रिया अपनाएँ। कैप्शन को दस्तावेज़ के अपने टेक्स्ट में रखने से आप चित्र के अक्षरों को फ़िगर की संख्या और पैराग्राफ़ की टाइपोग्राफ़ी से अलग जाँच सकते हैं।

Adobe का वर्तमान SVG निर्यात दस्तावेज़ बताता है कि पाथ पर टेक्स्ट का आउटपुट हर SVG व्यूअर में समान दृश्य रूप बनाए नहीं रख सकता। यह लाइव फ़ॉन्ट वाले आउटपुट और Convert To Outlines में भी अंतर बताता है; यह विकल्प दृश्य रूप सुरक्षित रखने के लिए टेक्स्ट को वेक्टर पाथ में बदलता है।

यदि सही फ़ॉन्ट मौजूद है लेकिन स्थिति फिर भी बदलती है, तो टाइपफ़ेस बदलने के बजाय संरचना की जाँच करें:

1. ब्राउज़र रेंडर स्रोत से मिलाएँ;
2. हर वर्ण की अपनी x स्थिति है, देखें;
3. टेक्स्ट ग्रुप में नेस्ट किए गए रूपांतरणों की जाँच करें;
4. देखें कि आयात करने वाले ऐप ने text-anchor, कर्निंग या बेसलाइन सेटिंग तो नहीं हटाई;
5. पाथ पर टेक्स्ट के व्यवहार को अलग पहचानने के लिए साधारण क्षैतिज टेक्स्ट वाली प्रति का परीक्षण करें।

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

कारण 5: आउटलाइन की और संपादन योग्य अपेक्षा की

आउटलाइन वाले टेक्स्ट में वैकल्पिक फ़ॉन्ट नहीं आ सकता, क्योंकि वह अब फ़ॉन्ट का संदर्भ नहीं रखता। फिर भी आयात में कुछ अप्रत्याशित बातें हो सकती हैं:

• अक्षर एक शब्द के बजाय संयुक्त पाथ आएँ;
• संयुक्त पाथ रिलीज़ पर भीतर छेद भरें;
• कई अक्षर ग्रुप हों;
• सीमित ऐप पाथ मिलाए या सरल करे;
• लाइव संस्करण से फ़ाइल बड़ी हो।

ये ज्यामिति और संपादन क्षमता के बदलाव हैं, फ़ॉन्ट के बदलाव नहीं। यदि आकृतियाँ स्रोत से मेल खाती हैं, तो आउटलाइन निर्यात ने अपना काम किया है।

हमेशा 2 फ़ाइलें रखें:

• संपादन योग्य मास्टर: लाइव टेक्स्ट, मूल फ़ॉन्ट जानकारी, नाम वाली लेयर और स्रोत ऐप का फ़ॉर्मैट।
• सौंपने वाली प्रति: रूप सुरक्षित रखना आवश्यक हो तो सौंपने के लिए आउटलाइन वाला SVG, EPS या PDF।

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

कौन-सा समाधान लें?

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

सुरक्षित आउटलाइन प्रक्रिया

रूप महत्वपूर्ण हो तो:

1. लाइव वाला स्रोत सहेजें;
2. प्रति बनाकर नाम में -outlined या -delivery जोड़ें;
3. टेक्स्ट चुनें और Create Outlines, Convert to Curves, Object to Path या समकक्ष कमांड का उपयोग करें;
4. अक्षर छेद और ओवरलैप देखें;
5. SVG निर्यात करें;
6. ब्राउज़र और दूसरे संपादक में खोलें;
7. सामान्य आकार और अधिक ज़ूम पर स्रोत से मिलाएँ;
8. लाइव मूल व लाइसेंस जानकारी सुरक्षित रखकर आउटलाइन भेजें।

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

केवल रास्टर लोगो बचा हो तो

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

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

फ़ाइल सौंपने की व्यापक रणनीति के लिए लोगो फ़ाइल फ़ॉर्मैट की मार्गदर्शिका बताती है कि कौन-से मास्टर और सुपुर्दगी फ़ॉर्मैट सुरक्षित रखने चाहिए।

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

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

क्या SVG फ़ॉन्ट अपने-आप एम्बेड करता है? नहीं। SVG फ़ॉन्ट का नाम बता सकता है, पेज की CSS से फ़ॉन्ट ले सकता है या फ़ॉन्ट संसाधन शामिल कर सकता है, लेकिन सामान्य लाइव टेक्स्ट डेस्कटॉप फ़ॉन्ट फ़ाइल को अपने-आप पैक नहीं करता। उपलब्धता, ब्राउज़र समर्थन और फ़ॉन्ट लाइसेंस का ध्यान फिर भी रखना आवश्यक है।

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

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

क्या PerfectVector रास्टर लोगो का मूल फ़ॉन्ट लौटाता है? नहीं। PerfectVector रास्टर में दिखाई देने वाले अक्षरों को वेक्टर आउटलाइन के रूप में दोबारा बना सकता है, लेकिन यह मूल फ़ॉन्ट की पहचान नहीं करता और संपादन योग्य वर्ण, कर्निंग तथा फ़ॉन्ट सेटिंग वापस नहीं लाता। जब लक्ष्य लोगो की दिखाई देने वाली ज्यामिति वापस पाना हो, तब इसका उपयोग करें।

स्रोत

1. W3C — SVG टेक्स्ट — लाइव <text> और <tspan> सामग्री, फ़ॉन्ट गुण, लेआउट और डाउनलोड किए जा सकने वाले फ़ॉन्ट का समर्थन।
2. W3C — CSS Fonts Module Level 3 — फ़ॉन्ट परिवार का मिलान, फ़ॉन्ट फ़ेस का चयन, अनुपलब्ध परिवार और सिस्टम के वैकल्पिक फ़ॉन्ट।
3. MDN — SVG font-family — प्राथमिकता सूची और सामान्य विकल्प।
4. Adobe Illustrator — आउटलाइन टेक्स्ट बनाएँ — पाथ बनाना और टेक्स्ट संपादन क्षमता खोना।
5. Adobe Illustrator — कला सहेजें — SVG टेक्स्ट निर्यात, आउटलाइन और पाथ पर टेक्स्ट की संगतता संबंधी सीमाएँ।

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