PptxGenJS में SVG: स्लाइड पर लोगो साफ़ रखें

slide.addImage() को वास्तविक SVG दें, चित्र के आस्पेक्ट अनुपात वाला बॉक्स रखें और एक्सपोर्ट स्लाइड उसी ऐप में जाँचें जिसमें प्रस्तुत होगी। PptxGenJS का Images API इमेज path या एनकोड किया data स्वीकार करता है; उसके संख्यात्मक x, y, w और h मान इंच में हैं। PPTX के अंदर SVG उपयोगी है, लेकिन केवल फ़ाइल सफलतापूर्वक बनने से नहीं पता चलता कि खास व्यूअर उसे सही दिखाएगा।

नीचे का उदाहरण वास्तविक छेद वाला मूल दो रंगों का लोगो इस्तेमाल करता है। हमने PptxGenJS 4.0.1 से डेक बनाया, उसका मीडिया जाँचा और LibreOffice में स्लाइड रेंडर कीं। हमने Microsoft PowerPoint में यह डेक नहीं परखा। टीम .pptx फ़ाइलें बाँटती हो तो प्राप्तकर्ता का प्रेज़ेंटेशन ऐप परीक्षण में शामिल करें।

बदले नाम वाले बिटमैप के बजाय पाथ SVG से शुरू करें

इसे logo.svg नाम से सेव करें। इसमें 2:1 viewBox, दो रंगीन पाथ और fill-rule="evenodd" से बना पारदर्शी गोल छेद है। डेक खुलने पर लाने के लिए लिंक वाली इमेज या फ़ॉन्ट नहीं हैं।

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120" viewBox="0 0 240 120">
  <path fill="#176B68" fill-rule="evenodd" d="M24 10h104a14 14 0 0 1 14 14v72a14 14 0 0 1-14 14H24a14 14 0 0 1-14-14V24a14 14 0 0 1 14-14zm52 25a25 25 0 1 0 0 50 25 25 0 0 0 0-50z"/>
  <path fill="#E5A83D" d="M157 10h17l55 100h-21l-42-77-42 77h-19z"/>
</svg>

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

अनुपात बदले बिना लोगो जोड़ें

इस जाँच में इस्तेमाल संस्करण npm install pptxgenjs@4.0.1 से इंस्टॉल करें। Node स्क्रिप्ट को logo.svg के साथ make-deck.cjs नाम से सेव करें, फिर node make-deck.cjs चलाएँ।

const pptxgen = require("pptxgenjs");
const path = require("node:path");
 
const pptx = new pptxgen();
pptx.layout = "LAYOUT_WIDE";
const slide = pptx.addSlide();
const logo = path.join(__dirname, "logo.svg");
 
slide.addImage({ path: logo, x: 1.1, y: 1.3, w: 2.4, h: 1.2 });
slide.addImage({ path: logo, x: 6.3, y: 1.1, w: 4.8, h: 2.4 });
 
pptx.writeFile({ fileName: "logo-demo.pptx" });

दोनों बॉक्स SVG की तरह 2:1 हैं। दूसरी स्थिति में हर आयाम दोगुना है। हमारे रेंडर में दोनों आकारों पर छेद, रंग और आउटलाइन पहचानने योग्य रहे। वह निष्कर्ष इसी सरल परीक्षण उदाहरण और रेंडरर पर लागू है; हर SVG प्रभाव या प्रेज़ेंटेशन ऐप की गारंटी नहीं।

जानबूझकर विफलता दिखाने के लिए हमने वही लोगो 3.6 × 1.0 इंच बॉक्स में रखा। गोल छेद अंडाकार हुआ। 3.6 × 1.8 इंच बॉक्स ने 2:1 अनुपात वापस रखा। अकेला SVG पिक्सेल width बदलने से ऐसी स्लाइड स्थिति ठीक नहीं होगी जिसका w और h चित्र अनुपात से अलग हो।

PPTX पैकेज और रेंडर स्लाइड जाँचें

.pptx ZIP पैकेज है। SVG फ़ाइल में आया है यह पुष्टि करने के लिए ppt/media/ देखें, फिर लक्ष्य व्यूअर में डेक खोलें। ये अलग परीक्षण हैं: संग्रह में चित्र हो सकता है, जबकि प्रेज़ेंटेशन ऐप कुछ और दिखाए।

unzip -l logo-demo.pptx | grep 'ppt/media/'

हमारे दो-स्लाइड, चार-स्थिति परीक्षण में चार .svg मीडिया प्रविष्टियाँ थीं। चार .png नाम की फ़ाइलें भी थीं जिनके पहले बाइट PNG हस्ताक्षर के बजाय SVG XML थे। इसलिए इस पैकेज का .png प्रत्यय रास्टर विकल्प होने का प्रमाण नहीं था। PptxGenJS की Node SVG समस्या चर्चा पहले की पूर्वावलोकन और व्यूअर समस्याएँ दर्ज करती है; यह मानने के बजाय कि चर्चा हर बिल्ड बताती है, अपना इंस्टॉल संस्करण और एक्सपोर्ट फ़ाइल जाँचें।

वास्तविक LibreOffice रेंडर में सही आकार के दोनों लोगो और जानबूझकर दबाया लोगो दिखे। हमने दृश्य रंग, पारदर्शी छेद और वृत्त-अंडाकार अंतर जाँचा। इससे Microsoft PowerPoint या दूसरा व्यूअर उसी डेक को कैसे संभालेगा, अनुमान नहीं निकाल सकते।

SVG गायब या गलत दिखे तो

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

इंपोर्ट किया SVG ग्राफ़िक Office की अपनी आकृतियों से अलग भी है। Microsoft के SVG संपादन निर्देश समर्थित PowerPoint प्रक्रिया में अलग हिस्से बदलने के लिए Convert to Shape बताते हैं। PptxGenJS का addImage() वह रूपांतरण नहीं करता। वितरण के बाद हाथ से संपादन के लिए PowerPoint SVG आकृति मार्गदर्शिका लें और गंतव्य ऐप में चुने हिस्से सत्यापित करें।

PerfectVector के साथ यह कैसा है

स्वीकृत मूल लोगो पहले से SVG हो तो वही लें। केवल छोटा सपाट PNG या JPG लोगो हो तो PerfectVector का लोगो वेक्टराइज़र PptxGenJS चरण से पहले संभावित पाथ पुनर्निर्मित कर सकता है। पूर्वावलोकन में रंग, छोटे अक्षर, पृष्ठभूमि और छेद जाँचें; डाउनलोड SVG स्लाइड पर रखने से पहले ब्रांड के लिए ज़रूरी चीज़ें ठीक करें। बने डेक को ऊपर की पैकेज और व्यूअर जाँच अब भी चाहिए। PerfectVector चित्र तैयार करता है; प्रेज़ेंटेशन नहीं बनाता या सत्यापित करता।

फ़ोटो या जटिल छायायुक्त इमेज रास्टर रखना बेहतर हो सकता है। बहुत सरल निशान में स्वीकृत ज्यामिति वेक्टर एडिटर में हाथ से फिर बनाना ट्रेसिंग से तेज़ और अधिक अनुमानित हो सकता है। दर्शकों को स्केल योग्य डाले लोगो के बजाय संपादन योग्य Office ऑब्जेक्ट चाहिए तो स्लाइड प्रक्रिया में वे ऑब्जेक्ट बनाएँ और संपादन आवश्यकता सीधे परखें।

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

क्या addImage() SVG को संपादन योग्य PowerPoint आकृतियों में बदलता है? नहीं। वह इमेज ग्राफ़िक डालता है। PowerPoint में अलग हिस्से का रंग बदलना या खिसकाना हो तो समर्थित ऐप में प्रति पर अलग Convert to Shape प्रक्रिया परखें।

बनी स्लाइड में SVG दबा क्यों दिखता है? SVG viewBox अनुपात को स्लाइड w:h से मिलाएँ। 240 × 120 लोगो 2:1 है, इसलिए 3.6 इंच चौड़ी स्थिति को अनुपात रखने के लिए 1.8 इंच ऊँचाई चाहिए।

क्या डेक स्वीकृत करने के लिए ppt/media/ में SVG मिलना पर्याप्त है? नहीं। वह SVG मीडिया पैकेज होने की पुष्टि करता है, लेकिन लक्ष्य प्रेज़ेंटेशन ऐप में लोगो सही दिखना साबित नहीं करता। तैयार डेक वहाँ खोलकर आकार, रंग, छेद और प्रभाव जाँचें।

स्रोत

1. PptxGenJS — Images API — addImage इनपुट, आकार इकाइयाँ और SVG व्यूअर समर्थन बताता है।
2. PptxGenJS — Node.js में SVG समस्या — पुराने SVG पूर्वावलोकन और व्यूअर व्यवहार दर्ज करता है जो वास्तविक पैकेज तथा रेंडर जाँचने की ज़रूरत दिखाते हैं।
3. Microsoft — Microsoft 365 में SVG इमेज संपादित करें — SVG ग्राफ़िक डालने और संपादन योग्य Office आकृतियों में बदलने का अंतर बताता है।

क्या केवल रास्टर लोगो है? संभावित SVG बनाएँ, पाथ और छेद जाँचें, फिर छोटा परीक्षण डेक बनाएँ और दर्शकों के ऐप में परिणाम सत्यापित करें।