resvg SVG फ़ॉन्ट: कलाकृति के लिए सही फ़ॉन्ट लोड करें

resvg से SVG फ़ॉन्ट भरोसेमंद तरीके से रेंडर करने के लिए रेंडरर को फ़ॉन्ट फ़ाइलें दें और SVG में उनके परिवार के नाम इस्तेमाल करें। नेटिव Node बाइंडिंग @resvg/resvg-js में इसका मतलब fontFiles कॉन्फ़िगर करना है; जब आप ठीक वही फ़ॉन्ट परखना चाहें जो आपके काम को मिलते हैं, तो loadSystemFonts: false सेट करें। प्रोजेक्ट का Node उदाहरण यह कॉन्फ़िगरेशन दिखाता है।

गलत फ़ॉन्ट इस्तेमाल करते हुए भी PNG पूरा दिख सकता है। एक्सपोर्ट कमांड सफल होने पर भी अक्षरों की आकृति जाँचें।

तीन फ़ॉन्ट इनपुट, एक SVG

हमने पाथ से पहाड़ का छोटा प्रतीक बनाया और उसके पास संपादन योग्य टेक्स्ट PINE & FIELD रखा। SVG सामान्य मोटाई वाले Abel परिवार को माँगता है। हमने @resvg/resvg-js 2.6.2, Node 22.19.0 और macOS arm64 से उसी मूल फ़ाइल को तीन बार रेंडर किया। हर बार सिस्टम फ़ॉन्ट खोजना बंद था।

नियंत्रित फ़ॉन्ट लोडिंग परीक्षण

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

resvg-js में स्थानीय फ़ॉन्ट लोड करें

यह उदाहरण नेटिव Node पैकेज इस्तेमाल करता है, अलग WebAssembly पैकेज नहीं। बाइंडिंग की संस्करण-विशिष्ट टाइप परिभाषाएँ font विकल्प के अंतर्गत fontFiles, fontDirs और loadSystemFonts बताती हैं।

नए काम के फ़ोल्डर में यहाँ इस्तेमाल संस्करण इंस्टॉल करें:

npm install --save-exact @resvg/resvg-js@2.6.2

Google Fonts की Abel डायरेक्टरी से Abel-Regular.ttf और उसके साथ का OFL.txt डाउनलोड करें। दोनों को fonts उपफ़ोल्डर में रखें। Abel, SIL Open Font License के तहत उपलब्ध है; उदाहरण बाँटते समय लाइसेंस फ़ॉन्ट के साथ रखें।

इसे label.svg के रूप में सेव करें:

<svg xmlns="http://www.w3.org/2000/svg"
     width="880" height="240" viewBox="0 0 880 240">
  <rect width="880" height="240" fill="#f6f2e8"/>
  <path d="M46 155 L96 57 L147 155 Z" fill="#176b5b"/>
  <path d="M75 155 L112 88 L166 155 Z" fill="#81ab78"/>
  <text x="195" y="151" font-family="Abel"
        font-size="82" font-weight="400" fill="#152e29">
    PINE &amp; FIELD
  </text>
</svg>

फिर SVG के पास render.mjs सेव करें:

import { access, readFile, writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';
import { Resvg } from '@resvg/resvg-js';
 
const fontFile = fileURLToPath(
  new URL('./fonts/Abel-Regular.ttf', import.meta.url)
);
await access(fontFile);
 
const svg = await readFile(new URL('./label.svg', import.meta.url));
const renderer = new Resvg(svg, {
  font: {
    loadSystemFonts: false,
    fontFiles: [fontFile],
  },
});
 
const png = renderer.render().asPng();
await writeFile(new URL('./label.png', import.meta.url), png);

node render.mjs चलाएँ। फ़ाइल URL इनपुट और आउटपुट पाथ को स्क्रिप्ट के सापेक्ष रखते हैं, इसलिए टर्मिनल की कार्य डायरेक्टरी बदलने से खुलने वाला फ़ॉन्ट नहीं बदलता। फ़ॉन्ट गायब या उपलब्ध न हो तो access() सीधे फ़ाइल सिस्टम की त्रुटि देता है; यह फ़ॉन्ट की सामग्री की पुष्टि नहीं करता।

नियंत्रित तुलना दोहराने के लिए SVG न बदलें। पहली पंक्ति के लिए खाली fontFiles ऐरे इस्तेमाल करें। दूसरी के लिए Google Fonts की Anton डायरेक्टरी से Anton-Regular.ttf डाउनलोड करें, उसका लाइसेंस रखें और Abel की जगह वह फ़ाइल दें। कुछ और बदलने से पहले हर PNG जाँचें।

फ़ाइल नाम के बजाय परिवार का नाम मिलाएँ

Abel-Regular.ttf फ़ाइल पाथ है। Abel SVG का माँगा हुआ परिवार है। font-family="Abel-Regular.ttf" लिखने से रेंडरर को वह फ़ाइल खोलने का निर्देश नहीं मिलता।

SVG का font-family एट्रिब्यूट परिवार के नाम या सामान्य परिवार स्वीकार करता है; कई देने पर वे प्राथमिकता सूची होते हैं। इसका CSS रूप भी है: मेल खाने वाली CSS font-family घोषणा प्रस्तुति एट्रिब्यूट से ऊपर प्राथमिकता पाती है।

अपनी कलाकृति के लिए तीन बातें साथ जाँचें:

• परिवार: फ़ॉन्ट के भीतर दर्ज और SVG में माँगा हुआ नाम।
• शैली और मोटाई: क्या दिया गया फ़ॉन्ट आपके इच्छित अक्षरों से मेल खाता है।
• अक्षर: क्या फ़ॉन्ट में वास्तविक लेबल के अक्षर और चिह्न मौजूद हैं।

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

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

अपने एक्सपोर्ट वातावरण में वही इनपुट जाँचें

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

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

अक्षर अब भी गलत दिखें तो मूल फ़ाइल में CSS ओवरराइड और भीतर के <tspan> की शैली जाँचें। प्रतीक और लेबल दोनों अनपेक्षित रूप से कटें या आकार बदलें तो SVG सीमा और रास्टर आयाम अलग जाँचें। हमारा CairoSVG आकार निर्धारण लेख दूसरे रेंडरर में यह अंतर समझाता है; उसके विकल्प CairoSVG के लिए हैं।

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

PNG के पास संपादन योग्य मूल फ़ाइल रखें

ऊपर का कोड PNG लिखता है। वह रास्टर वितरण फ़ाइल है; उसके दिखाई देने वाले अक्षर अब संपादन योग्य SVG टेक्स्ट नहीं हैं। भविष्य में शब्द बदलने के लिए label.svg और फ़ॉन्ट इनपुट मूल के रूप में रखें।

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

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

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

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

क्या SVG परिवार के नाम में फ़ॉन्ट फ़ाइल का नाम दे सकता हूँ? SVG में फ़ॉन्ट के परिवार का नाम इस्तेमाल करें। स्थानीय फ़ाइल नाम अलग से fontFiles में दें। फ़ॉन्ट फ़ाइल का नाम बदलने से उसके भीतर का परिवार नाम नहीं बदलता।

क्या resvg मेरे PNG लोगो को संपादन योग्य SVG में बदलता है? यहाँ का उदाहरण SVG को PNG में रेंडर करता है। यह रास्टर लोगो वेक्टराइज़ नहीं करता। ज़रूरत हो तो वेक्टराइज़ेशन प्रक्रिया से प्रतीक वापस प्राप्त करें, फिर संपादन योग्य टेक्स्ट जोड़ें और उस SVG को मूल प्रति रखें।

स्रोत

1. resvg-js — संस्करण 2.6.2 README — नेटिव Node इस्तेमाल और स्पष्ट फ़ॉन्ट लोडिंग।
2. resvg-js — संस्करण 2.6.2 टाइप परिभाषाएँ — फ़ॉन्ट कॉन्फ़िगरेशन और रेंडर इमेज API।
3. MDN — SVG font-family — परिवार सूची और CSS प्राथमिकता।
4. Google Fonts — Abel — इच्छित लेबल के लिए इस्तेमाल सामान्य फ़ॉन्ट और लाइसेंस।
5. Google Fonts — Anton — प्रतिस्थापन की नियंत्रित तुलना में इस्तेमाल फ़ॉन्ट और लाइसेंस।

रास्टर प्रतीक के कारण कलाकृति रुक रही हो तो लोगो कलाकृति वेक्टराइज़ करें, अपने संपादक में उसके किनारे जाँचें और लेबल संपादन योग्य टेक्स्ट में जोड़ें। फिर स्पष्ट फ़ॉन्ट फ़ाइल से रेंडर करें और देने से पहले PNG की मूल प्रति से तुलना करें।