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

@react-pdf/renderer में छोटे SVG लोगो के लिए उसके Svg, Path और दूसरे समर्थित कंपोनेंट से चित्र बनाएँ। बाहरी Svg को स्पष्ट आकार दें और मूल viewBox रखें। रेंडरर के Image दस्तावेज़ PNG और JPG इनपुट बताते हैं; SVG URL को Image में रखना यहाँ बताया वेक्टर तरीका नहीं है।

इस मार्गदर्शिका में चौकोर प्रतीक और बीच में छेद वाला पूरा Node उदाहरण है। हमने तय निर्भरताओं के साथ PDF रेंडर करके परिणाम जाँचा। उदाहरण आसानी से उलझने वाली तीन बातें अलग करता है: मूल चित्र, कंपोनेंट ट्री और PDF में रखने का आकार।

जाँचें कि कौन-सा React PDF पैकेज इस्तेमाल कर रहे हैं

यह लेख @react-pdf/renderer से दस्तावेज़ बनाता है। अलग नाम वाला react-pdf पैकेज मौजूदा PDF दिखाता है। खोज परिणाम से समाधान कॉपी करने से पहले फ़ाइल का इंपोर्ट जाँचें।

रेंडरर के Document के अंदर उसी रेंडरर से एक्सपोर्ट किए कंपोनेंट इस्तेमाल करें। ब्राउज़र के छोटे अक्षर वाले svg और path तत्व अलग रेंडरिंग परिवेश के हैं। आधिकारिक SVG कंपोनेंट संदर्भ Svg को व्यूपोर्ट कंटेनर बताता है और उसके अंदर इंपोर्ट की गई React-pdf आकृतियाँ दिखाता है।

Image संदर्भ बिटमैप इनपुट समझाता है। जटिल रूप बनाए रखना वेक्टर ज्यामिति से अधिक अहम हो तो PNG विकल्प उपयोगी हो सकता है। इससे वितरण बदलता है, इसलिए मूल वेक्टर अलग रखें।

आधिकारिक @react-pdf/svg पैकेज भी है। उसका README parseSvg() बताता है, जो प्रिमिटिव नोड ट्री लौटाता है और एट्रिब्यूट नाम camelCase में बदलता है। उसके अनुसार असमर्थित तत्व चेतावनी के साथ छोड़ दिए जाते हैं। यह पार्सर का अनुबंध है, हर ब्राउज़र SVG के हूबहू रेंडर होने का वादा नहीं। नीचे का उदाहरण स्पष्ट कंपोनेंट इस्तेमाल करता है, ताकि ज्यामिति और रंग आसानी से जाँचे जा सकें।

अपना लोगो इंपोर्ट करने से पहले न्यूनतम लोगो रेंडर करें

हमने यह उदाहरण @react-pdf/renderer 4.9.0, React 19.2.4 और Node 22.19.0 से चलाया। ये संस्करण परीक्षण सेटअप बताते हैं; दूसरी निर्भरता संरचना के व्यवहार की गारंटी नहीं देते।

नई डायरेक्टरी में दोनों रनटाइम पैकेज इंस्टॉल करें:

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

इसे logo.mjs नाम से सेव करें और node logo.mjs चलाएँ। यह React.createElement इस्तेमाल करता है, ताकि Node बिना JSX बिल्ड चरण के चला सके।

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

बाहरी और अंदरूनी चौकोर हिस्से एक संयुक्त पाथ में हैं। fillRule: 'evenodd' अंदरूनी चौकोर भाग खुला रखता है और नीचे का हल्का आयत दिखता है। बीच को ढकने वाला सफ़ेद हिस्सा नहीं है। इसलिए छेद या अक्षरों के अंदर खाली जगह वाले लोगो से परीक्षण उदाहरण बदलते समय यह छेद उपयोगी जाँच है।

SVG निर्देशांक हर दिशा में 100 इकाइयाँ हैं, जबकि रखा गया व्यूपोर्ट 144 गुणा 144 है। viewBox आरेख की निर्देशांक प्रणाली बताता है; width और height प्रदर्शित व्यूपोर्ट बताते हैं। लोगो आकार बदलते समय यह अंतर रखें। आधिकारिक Svg प्रॉप्स टेबल ये नियंत्रण और preserveAspectRatio बताती है।

पूर्वावलोकन के साथ सेव किया PDF भी जाँचें

हमारे परीक्षण में ऊपर-बाएँ कोने के पास नीले-हरे चौकोर छल्ले वाला एक A4 पेज बना। हमने फ़ाइल को Poppler से रेंडर किया और देखकर जाँचा कि हल्की पृष्ठभूमि छेद से दिखाई देती है। Poppler के pdfimages -list logo.pdf ने इस अलग दस्तावेज़ में कोई एम्बेडेड इमेज नहीं बताई।

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

आपके कंप्यूटर में Poppler हो तो ये कमांड दो अलग जाँच देते हैं:

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

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

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

एक बार में एक सुविधा लेकर अपना चित्र स्थानांतरित करें

परीक्षण उदाहरण का d अपने पाथ डेटा से बदलें और संबंधित फ़िल, फ़िल नियम, स्ट्रोक तथा ट्रांसफ़ॉर्म रखें। केवल पाथ आकृति कॉपी करके रंग छोड़ देने से परिणाम बदल सकता है, भले ही पाथ डेटा सही हो।

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

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

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

जब लोगो PNG या JPG से शुरू हो

मूल SVG, AI या दूसरा संपादन योग्य वेक्टर मूल हो तो पहले वही माँगें। केवल पिक्सेल बचें तो PerfectVector का लोगो वेक्टराइज़र React-pdf काम से पहले संभावित SVG तैयार कर सकता है। PDF कंपोनेंट के लिए समर्थित आकृतियाँ अपनाने से पहले उसके कंटूर, छोटे छेद और अलग रंग क्षेत्र मूल से मिलाएँ।

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

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

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

क्या React-pdf Image को SVG फ़ाइल दे सकते हैं? दस्तावेज़ीकृत Image इनपुट PNG और JPG हैं। इस मार्गदर्शिका के पाथ आधारित तरीके के लिए रेंडरर के Svg प्रिमिटिव इस्तेमाल करें और दूसरे इनपुट व्यवहार पर निर्भर होने से पहले इंस्टॉल संस्करण जाँचें।

क्या हर SVG हाथ से बदलना होगा? नहीं। आधिकारिक @react-pdf/svg पैकेज SVG स्ट्रिंग को प्रिमिटिव नोड ट्री में पार्स करता है। उसके समर्थित तत्व और चेतावनी देखें, फिर उस आउटपुट को अपनी रेंडरिंग प्रक्रिया से जोड़कर परखें। यहाँ का स्पष्ट कंपोनेंट उदाहरण अतिरिक्त पार्सर चरण से बचता है।

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

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

स्रोत

1. React-pdf — Svg कंपोनेंट — व्यूपोर्ट, आयाम, viewBox और आस्पेक्ट अनुपात नियंत्रण परिभाषित करता है।
2. React-pdf — Image कंपोनेंट — बिटमैप रखने के PNG और JPG इनपुट रूप बताता है।
3. React-pdf — SVG प्रिमिटिव — रेंडरर के समर्थित SVG कंपोनेंट सूचीबद्ध करता है।
4. React-pdf — SVG पार्सर — प्रिमिटिव नोड ट्री, एट्रिब्यूट रूपांतरण और असमर्थित तत्व चेतावनी बताता है।

क्या केवल PNG या JPG लोगो है? PerfectVector से संभावित SVG तैयार करें, उसके कंटूर और छेद मूल से मिलाएँ, फिर समर्थित आकृतियाँ अपनाएँ और सेव किया PDF जाँचें।