PDFKit SVG: वेक्टर लोगो को पिक्सेल बनाए बिना रखें

Node से बने PDF में पूरा SVG लोगो रखने के लिए PDFKit के साथ svg-to-pdfkit इस्तेमाल करें और SVG मार्कअप SVGtoPDF(doc, svg, x, y, options) को दें। PDFKit का अंतर्निहित doc.path() SVG पाथ डेटा, जैसे पाथ के d एट्रिब्यूट का मान, स्वीकार करता है। यह आसपास का SVG दस्तावेज़, उसकी दूसरी आकृतियाँ या शैलियाँ इंपोर्ट नहीं करता।

कई रंग और केंद्र में खुली जगह वाले लोगो के लिए यह अंतर महत्वपूर्ण है। एक पाथ कॉपी करने से कुछ कलाकृति छूट सकती है। पूरे लोगो को PNG बनाने से रास्टर रेंडरिंग बचती है, लेकिन जिस पाथ आधारित PDF आउटपुट के लिए आए थे, वह खो जाता है।

इस मार्गदर्शिका में मौलिक प्रतीक, पूरी Node स्क्रिप्ट और सेव PDF की जाँच है। संपादन योग्य वेक्टर लोगो पहले से हो तो उसे स्रोत रखें। रास्टर से वापस प्राप्त करना इस इंपोर्ट चरण से पहले का काम है।

पूरा SVG डालना या एक पाथ चुनें

PDFKit के वेक्टर दस्तावेज़ पाथ पार्सर और उसके आसपास चित्र विधियाँ बताते हैं। अलग SVG-to-PDFKit लाइब्रेरी पूरा SVG मार्कअप सँभालती है।

PDFKit इमेज दस्तावेज़ doc.image() के लिए PNG और JPEG बताते हैं। उस कॉल को पूरा SVG इंपोर्टर न मानें।

मसलन, पाथ API का यह इस्तेमाल सही है:

doc.save();
doc.fillColor('#eeaa42');
doc.path('M125 100L175 20L225 100Z').fill();
doc.restore();

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

PDF ब्राउज़र में jsPDF से बने तो अलग jsPDF SVG प्रक्रिया अपनाएँ। React कॉम्पोनेंट दस्तावेज़ के लिए React-pdf SVG लोगो प्रक्रिया इस्तेमाल करें। Python दस्तावेज़ में ReportLab इंपोर्ट और आकार जाँच की fpdf2 में सीधे SVG रखने से तुलना करें।

निश्चित पैकेज संस्करणों से छोटा उदाहरण चलाएँ

हमने PDFKit 0.20.2 और SVG-to-PDFKit 0.1.8 से यह उदाहरण चलाया। ये परीक्षित पैकेजों के जोड़े की पहचान बताते हैं; किसी पैकेज को अपग्रेड करने के बाद अपना आउटपुट जाँचें।

नए Node प्रोजेक्ट में इंस्टॉल करें:

npm install --save-exact pdfkit@0.20.2 svg-to-pdfkit@0.1.8

इसे logo.svg सेव करें। छल्ला और उसकी खुली जगह fill-rule="evenodd" वाला एक पाथ साझा करते हैं; सुनहरा त्रिकोण और नीली-हरी पट्टी अलग आकृतियाँ हैं। फ़ाइल में फ़ॉन्ट, इमेज या प्रभाव नहीं हैं।

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <path fill="#147d78" fill-rule="evenodd"
    d="M110 60A50 50 0 1 1 10 60A50 50 0 1 1 110 60Z
       M85 60A25 25 0 1 1 35 60A25 25 0 1 1 85 60Z"/>
  <path fill="#eeaa42" d="M125 100L175 20L225 100Z"/>
  <rect x="227" y="20" width="8" height="80" fill="#147d78"/>
</svg>

उसी डायरेक्टरी में नीचे का कोड place-logo.cjs सेव करें, फिर node place-logo.cjs चलाएँ:

const fs = require('node:fs');
const { finished } = require('node:stream/promises');
const PDFDocument = require('pdfkit');
const SVGtoPDF = require('svg-to-pdfkit');
 
async function main() {
  const svg = fs.readFileSync('logo.svg', 'utf8');
  const doc = new PDFDocument({ size: [800, 450], margin: 0 });
  const output = fs.createWriteStream('logo.pdf');
  doc.pipe(output);
  const warnings = [];
  SVGtoPDF(doc, svg, 72, 150, {
    width: 180, height: 90,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  SVGtoPDF(doc, svg, 432, 150, {
    width: 90, height: 45,
    preserveAspectRatio: 'xMinYMin meet',
    warningCallback: message => warnings.push(message),
  });
  doc.end();
  await finished(output);
  fs.writeFileSync('warnings.json', JSON.stringify(warnings, null, 2));
  if (warnings.length) process.stderr.write(warnings.join('\n') + '\n');
}
main().catch(error => {
  process.stderr.write(error.stack + '\n');
  process.exitCode = 1;
});

PDFKit स्ट्रीम बनाता है। doc.end() बुलाने से दस्तावेज़ पूरा होता है; फिर लौटने से पहले स्क्रिप्ट आउटपुट स्ट्रीम पूरा होने की प्रतीक्षा करती है। शुरुआती दस्तावेज़ स्ट्रीम मॉडल और PDF पॉइंट में पेज आयाम बताते हैं, जहाँ एक इंच में 72 पॉइंट हैं।

यहाँ दो स्थान व्यूपोर्ट 180 × 90 pt और 90 × 45 pt, यानी 2.5 × 1.25 इंच और 1.25 × 0.625 इंच हैं। दोनों स्रोत viewBox के 2:1 अनुपात से मेल खाते हैं। बनी आकृतियों के चारों ओर viewBox के अंदर खाली मार्जिन हैं, इसलिए दृश्य सीमा व्यूपोर्ट से छोटी है। पास के टेक्स्ट से लोगो संरेखित करते समय कैनवस और रंगी कलाकृति अलग मापें।

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

PDF जाँचें, फिर उसका रूप जाँचें

हमारे न्यूनतम logo.pdf में एक 800 × 450 pt पेज था। pypdf 6.10.0 से हमने 24 घन वक्र क्रियाएँ, दो सम-विषम भराव क्रियाएँ और शून्य पेज इमेज पाईं। पेज संसाधनों में फ़ॉन्ट या XObjects नहीं थे। इस नमूने के लिए इंपोर्टर ने चेतावनी नहीं दी।

इन परिणामों से सीमित निष्कर्ष मिलता है: यह मौलिक, इमेज रहित प्रतीक परीक्षित संस्करणों में PDF ज्यामिति से बना। इससे यह सिद्ध नहीं कि कोई भी SVG पूरी तरह वेक्टर PDF बनता है। एम्बेडेड फ़ोटो वाले लोगो की अलग जाँच चाहिए।

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

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

अपने लोगो के लिए दोनों जाँचें:

1. PDF निरीक्षण टूल से पेज सामग्री और संदर्भित ऑब्जेक्ट देखें। जहाँ लोगो बना है वहाँ चित्र निर्देश खोजें और इमेज ऑब्जेक्ट का हिसाब रखें। जटिल PDF में सामग्री Form XObjects के भीतर हो सकती है, इसलिए ऊपरी स्तर की गिनती हमेशा पर्याप्त नहीं।
2. सेव PDF इच्छित व्यूअर में खोलें और स्रोत से तुलना करें। वास्तविक वितरण आकार पर छेद, अलग रंग, क्लिपिंग, मार्जिन और छोटे विवरण देखें।

PDF बनाने वाले कोड के पास मूल SVG रखें। स्रोत केवल पिक्सेल लपेटता हो तो SVG एक्सटेंशन को ज्यामिति का प्रमाण मानने से पहले एम्बेडेड इमेज जाँच इस्तेमाल करें।

फ़ॉन्ट और प्रभाव परीक्षित प्रक्रिया में रखें

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

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

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

उदाहरण RGB रंग इस्तेमाल करता है। केवल पाथ बचना प्रिंटर के रंग, PDF/X या प्रिंट तैयारी आवश्यकताओं का प्रमाण नहीं। प्राप्तकर्ता से पुष्टि करें; लोगो फ़ॉर्मैट मार्गदर्शिका संपादन योग्य मूल और वितरण फ़ाइल अलग करने में मदद करती है।

डालने से पहले केवल रास्टर वाला लोगो वापस प्राप्त करें

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

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

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

क्या PDFKit doc.path() से पूरा SVG इंपोर्ट कर सकता है? नहीं। पाथ विधि SVG पाथ डेटा पढ़ती है। इस प्रक्रिया में पूरे दस्तावेज़ के लिए SVG-to-PDFKit इस्तेमाल करें या हर आकृति खुद बनाएँ और शैली दें।

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

दिखता लोगो मेरी चौड़ाई और ऊँचाई से छोटा क्यों है? वे विकल्प इंपोर्ट व्यूपोर्ट तय करते हैं। स्रोत viewBox की खाली जगह लेआउट का हिस्सा रहती है और अनुपात से फ़िट करना अतिरिक्त जगह छोड़ सकता है। माँगा PDF आकार बदलने से पहले कलाकृति सीमा देखें।

स्रोत

1. PDFKit — वेक्टर ग्राफ़िक्स — SVG पाथ डेटा पार्सिंग, रंग क्रियाएँ और ग्राफ़िक्स स्थिति बताता है।
2. SVG-to-PDFKit — इस्तेमाल और सीमाएँ — पूरा SVG डालना, व्यूपोर्ट विकल्प, चेतावनियाँ, फ़ॉन्ट और समर्थित सुविधाएँ परिभाषित करता है।
3. PDFKit — इमेज — इमेज API के स्वीकार्य बिटमैप फ़ॉर्मैट बताता है।
4. PDFKit — शुरुआत — दस्तावेज़ स्ट्रीम, पूरा करना और PDF पॉइंट में पेज आकार समझाता है।
5. PDFKit — फ़ॉन्ट — फ़ॉन्ट एम्बेडिंग और नाम वाला फ़ॉन्ट रजिस्ट्रेशन बताता है।

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