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

jsPDF SVG: ब्राउज़र में बने PDF में लोगो पाथ रखें

jsPDF के साथ svg2pdf.js इस्तेमाल करके SVG लोगो रखें, समर्थित पाथ सुरक्षित रखें, PDF में उसका आकार तय करें और सहेजी गई फ़ाइल की तुलना उसी चित्र के रास्टर निर्यात से करें।

इस पेज पर

jsPDF से ब्राउज़र में बनाए गए PDF में SVG लोगो पाथ रखने के लिए svg2pdf.js लोड करें, await doc.svg(...) को SVG एलिमेंट दें, फिर दस्तावेज़ सहेजें। addSvgAsImage केवल तभी चुनें जब रास्टर छवि स्वीकार्य हो। उसके SVG इनपुट का मतलब यह नहीं कि अंतिम PDF में SVG पाथ होंगे।

svg2pdf.js उपयोग उदाहरण एलिमेंट आधारित, असिंक्रोनस कॉल का दस्तावेज़ देता है। jsPDF का SVG मॉड्यूल कार्यान्वयन दूसरा रास्ता दिखाता है: कैनवस में रेंडर करें, JPEG एन्कोड करें और उस छवि को PDF में जोड़ें।

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

अपनी ज़रूरत का आउटपुट चुनें

रास्ताआप क्या देते हैंक्या जाँचना है
await doc.svg(element, options)SVG DOM एलिमेंट, svg2pdf.js लोड होने के साथसमर्थित ज्यामिति, भरण, खाली हिस्से, स्थिति और एम्बेडेड छवियाँ
await doc.addSvgAsImage(text, x, y, width, height)स्ट्रिंग के रूप में SVG मार्कअपरास्टर रिज़ॉल्यूशन और पृष्ठभूमि, साथ ही स्थिति
मूल डिज़ाइन एप्लिकेशन से PDF निर्यातसंपादन योग्य डिज़ाइन फ़ाइलनिर्यात सेटिंग और अंतिम PDF ऑब्जेक्ट

तीसरा रास्ता तब उपयोगी है जब आपको JavaScript में बनाया गया दस्तावेज़ नहीं, बल्कि तैयार लोगो PDF चाहिए। ब्राउज़र के बाहर के दस्तावेज़ कार्यप्रवाह के लिए LaTeX में SVG मार्गदर्शिका अलग निर्यात और शामिल करने की प्रक्रिया बताती है। Node दस्तावेज़ पाइपलाइन के लिए PDFKit SVG उदाहरण पूरा दस्तावेज़ डालने और एक पाथ पार्स करने का अंतर स्पष्ट करता है।

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

पहले छोटा, तय संस्करण वाला उदाहरण चलाएँ

यह उदाहरण jsPDF 4.2.1 और svg2pdf.js 2.8.1 के साथ ब्राउज़र में चलाया गया था। ये जाँचे गए संस्करण हैं, भविष्य के संस्करणों के बारे में वादा नहीं। पैकेज का नाम svg2pdf.js है, प्रत्यय सहित; समान नाम वाले पैकेज अलग कार्यप्रवाह के लिए हो सकते हैं।

JavaScript बंडलर वाले छोटे ब्राउज़र प्रोजेक्ट में इंस्टॉल करें:

npm install jspdf@4.2.1 svg2pdf.js@2.8.1

इस मौलिक प्रतीक को इनपुट बनाएँ। उसके छल्ले में even-odd भरण नियम से बना वास्तविक खुला हिस्सा है। दूसरा पाथ गोल सिरा वाला शिखर है। इसमें फ़ॉन्ट, लिंक की गई फ़ाइलें, फ़िल्टर या एम्बेडेड रास्टर छवियाँ नहीं हैं।

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
 
const svgText = `<svg xmlns="http://www.w3.org/2000/svg"
  width="240" height="160" viewBox="0 0 240 160">
  <path fill="#174d64" fill-rule="evenodd"
    d="M20 80 C20 15 120 15 120 80 C120 145 20 145 20 80 Z
       M48 80 C48 111 92 111 92 80 C92 49 48 49 48 80 Z"/>
  <path fill="#e66d45"
    d="M130 120 L170 35 Q178 20 188 35 L225 120 Z"/>
</svg>`;
 
async function makeVectorPdf() {
  const svg = new DOMParser()
    .parseFromString(svgText, 'image/svg+xml')
    .documentElement;
  const doc = new jsPDF({
    unit: 'pt',
    format: [300, 220],
    orientation: 'landscape'
  });
  await doc.svg(svg, { x: 30, y: 30, width: 240, height: 160 });
  return doc;
}
 
const doc = await makeVectorPdf();
doc.save('logo-vector.pdf');

इसे ब्राउज़र में चलाएँ, सीधे Node.js स्क्रिप्ट में नहीं। लाइब्रेरी के उपयोग और दायरे के नोट काम करता हुआ ब्राउज़र DOM आवश्यक बताते हैं और सीमित SVG समर्थन का वर्णन करते हैं। सर्वर पर रेंडर होने वाले एप्लिकेशन में यह काम क्लाइंट के निर्यात हैंडलर में रखें।

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

स्थिति को viewBox से अलग तय करें

इस उदाहरण में unit: 'pt' से PDF के माप पॉइंट में होते हैं। पेज 300 गुणा 220 पॉइंट है; चित्र का व्यूपोर्ट बाएँ और ऊपर से 30 पॉइंट पर शुरू होकर 240 गुणा 160 पॉइंट जगह लेता है। jsPDF का कन्स्ट्रक्टर दस्तावेज़ दस्तावेज़ की इकाई, फ़ॉर्मेट और ओरिएंटेशन विकल्प बताता है।

SVG का viewBox="0 0 240 160" उसके अंदरूनी निर्देशांक बताता है। यह PDF पेज का आकार नहीं है। गंतव्य की चौड़ाई और ऊँचाई उसी 3:2 अनुपात में रखने से इच्छित फ़िट जाँचना आसान होता है। रखे गए चित्र को आधा करने के लिए width: 120, height: 80 इस्तेमाल करें; स्रोत पाथ निर्देशांक बदलने की ज़रूरत नहीं।

PDF में स्थिति की समस्या जाँचने से पहले निर्यात किए गए SVG को स्पष्ट आयाम और उचित viewBox दें। अनपेक्षित बड़ा खाली किनारा SVG कैनवस का हिस्सा हो सकता है। x और y बदलने से खाली जगह सहित पूरा SVG व्यूपोर्ट खिसकता है।

दोनों सहेजे गए PDF जाँचें

तुलना के लिए उसी ब्राउज़र रन में यह जानबूझकर रास्टर बनाया गया संस्करण भी बना:

const raster = new jsPDF({
  unit: 'pt',
  format: [300, 220],
  orientation: 'landscape'
});
await raster.addSvgAsImage(svgText, 30, 30, 240, 160);
raster.save('logo-raster.pdf');

उस रास्ते के लिए परीक्षण ने jsPDF की इंस्टॉल हुई canvg निर्भरता 3.0.11 इस्तेमाल की। दोनों PDF सहेजे गए, दोबारा खोले गए और एक ही पैमाने पर रेंडर किए गए। PyMuPDF की ड्रॉइंग और छवि जाँच ने बताया:

सहेजी गई फ़ाइलमिले ड्रॉइंग पाथमिली एम्बेडेड छवियाँ
logo-vector.pdf2 भरे हुए पाथ0
logo-raster.pdf01 JPEG, 240 × 160 पिक्सेल

वेक्टर फ़ाइल की कंटेंट स्ट्रीम में वक्र कमांड और छल्ले के लिए even-odd भरण था। रास्टर फ़ाइल ने छवि ऑब्जेक्ट रखा। ये गिनतियाँ इसी छोटे परीक्षण नमूने के लिए हैं; अधिक जटिल SVG अलग ऑब्जेक्ट बना सकता है या उसमें अपना रास्टर कंटेंट हो सकता है।

एक ही पैमाने पर छल्ले और गोल सिरे वाले शिखर के PDF पूर्वावलोकन, बाईं ओर दो वेक्टर पाथ और दाईं ओर एक JPEG छवि
दो ब्राउज़र निर्यातों के बाद वही मूल प्रतीक। सहेजे गए PDF की जाँच में doc.svg से दो भरे हुए पाथ और addSvgAsImage से एक 240 गुणा 160 पिक्सेल JPEG मिला। रास्टर रास्ते से इस परीक्षण में दिखाई गई काली पृष्ठभूमि भी बनी।

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

केवल ज़ूम करना पर्याप्त प्रमाण नहीं। हर PDF व्यूअर अंततः आपकी स्क्रीन पर पिक्सेल बनाता है। PDF के ऑब्जेक्ट जाँचें और सहेजे गए रूप की तुलना SVG मूल फ़ाइल से करें। Poppler का pdfimages -list logo-raster.pdf जैसा कमांड एम्बेडेड छवियाँ सूचीबद्ध कर सकता है। केवल खाली छवि सूची यह सिद्ध नहीं करती कि इच्छित आकार ठीक से निर्यात हुए: पेज खाली हो सकता है। उसकी ड्रॉइंग सामग्री और रूप भी जाँचें।

निर्यात का खराब हिस्सा ठीक करें

लक्षणउपयोगी पहली जाँच
doc.svg उपलब्ध नहीं हैपुष्टि करें कि निर्यात कॉल से पहले svg2pdf.js आयात चलता है
चित्र आने से पहले फ़ाइल सहेज दी जाती हैसहेजने से पहले SVG रूपांतरण का इंतज़ार करें
लोगो खिसका है या अनपेक्षित छोटा हैPDF इकाइयाँ, गंतव्य आयाम और स्रोत viewBox मिलाएँ
कुछ बारीकियाँ गायब होती हैंएक प्रति में केवल विफल SVG सुविधा रखें और समर्थित कार्यप्रवाह से तुलना करें
कथित वेक्टर लोगो में पिक्सेल हैंस्रोत SVG और PDF के छवि ऑब्जेक्ट जाँचें

SVG पहले से बिटमैप को लपेट सकता है। उस फ़ाइल को वेक्टर समर्थित निर्यातक से गुज़ारने पर उसके पिक्सेल संपादन योग्य आउटलाइन में ट्रेस नहीं होते। PDF सेटिंग बदलने से पहले एम्बेडेड रास्टर जाँच मार्गदर्शिका इस्तेमाल करें।

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

PerfectVector से लोगो स्रोत तैयार करें

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

PerfectVector इस कार्यप्रवाह के लिए रास्टर चित्र तैयार करता है; यह jsPDF में SVG समर्थन नहीं जोड़ता और निर्यातक की असमर्थित सुविधाएँ ठीक नहीं करता। वापस मिले पाथ की तुलना मूल छवि से करें, जहाँ ज़रूरी हो बारीकियाँ सरल करें या दोबारा बनाएँ, फिर PDF जाँच दोहराएँ। यदि ट्रेसिंग से आपकी आवश्यक बारीकी खो जाएगी, तो फ़ोटो को छवि ही रहने दें। विस्तृत छवि वेक्टराइज़ेशन मार्गदर्शिका इस स्रोत चुनाव को समझाती है।

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

क्या addSvgAsImage मेरे SVG को वेक्टर पाथ के रूप में रखता है? नहीं। जाँचा गया jsPDF 4.2.1 कार्यान्वयन SVG को कैनवस से रेंडर करके JPEG एम्बेड करता है। यदि आपको उसकी समर्थित ज्यामिति PDF ड्रॉइंग सामग्री में बदलनी है, तो doc.svg के साथ svg2pdf.js इस्तेमाल करें।

क्या doc.svg SVG फ़ाइल का नाम स्वीकार करता है? दिखाया गया API SVG DOM एलिमेंट लेता है। पहले विश्वसनीय फ़ाइल लोड और पार्स करें, या मौजूद SVG एलिमेंट चुनें, फिर वह एलिमेंट doc.svg को दें और परिणाम का इंतज़ार करें।

क्या हर SVG PDF में वैसा ही दिखेगा? नहीं। svg2pdf.js SVG के सीमित हिस्से का समर्थन करता है। अपने वास्तविक चित्र के फ़ॉन्ट, छवियाँ, प्रभाव, आयाम और पृष्ठभूमियाँ जाँचें तथा इस्तेमाल करने से पहले सहेजा हुआ PDF दोबारा खोलें।

स्रोत

  1. yWorks — svg2pdf.js का उपयोग और दायरा — SVG एलिमेंट API, असिंक्रोनस रूपांतरण, फ़ॉन्ट सेटअप, ब्राउज़र आवश्यकताएँ और समर्थित दायरे की सीमाएँ।
  2. jsPDF — संस्करण 4.2.1 का SVG मॉड्यूल — addSvgAsImage का इस्तेमाल किया गया कैनवस और JPEG कार्यान्वयन।
  3. jsPDF — कन्स्ट्रक्टर संदर्भ — PDF दस्तावेज़ की इकाइयाँ, पेज फ़ॉर्मेट और ओरिएंटेशन विकल्प।
  4. PyMuPDF — पेज जाँच — सहेजी गई परीक्षण फ़ाइलें देखने के लिए इस्तेमाल की गई ड्रॉइंग और छवि जाँच विधियाँ।

केवल रास्टर लोगो है? अपने लोगो से संपादन योग्य SVG तैयार करें, उसके कंटूर और खुले हिस्से जाँचें, फिर चुने हुए PDF रास्ते से निर्यात करें और सहेजे गए ऑब्जेक्ट तथा पृष्ठभूमि देखें।

Blog से और

Matplotlib SVG: प्लॉट और लोगो को पाथ के रूप में रखें

Matplotlib प्लॉट को SVG में एक्सपोर्ट करें, svgutils से अलग लोगो पाथ जोड़ें और वितरण फ़ाइल में एम्बेड किए गए पिक्सेल, स्थिति तथा फ़ॉन्ट बदलाव जाँचें।

React-pdf SVG लोगो: PDF में पाथ रेंडर करें

Svg और Path से React-pdf दस्तावेज़ में SVG लोगो जोड़ें, उसके छेद सुरक्षित रखें, स्पष्ट आयाम सेट करें और अपना चित्र लगाने से पहले सेव किया PDF जाँचें।

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

ज़्यादा साफ़ SVG बनाएँक्रेडिट कार्ड की ज़रूरत नहीं