SVG ใน PptxGenJS: ให้โลโก้คมชัดบนสไลด์

ส่ง SVG จริงให้ slide.addImage() กำหนดกล่องที่มีอัตราส่วนตรงกับภาพ แล้วตรวจสไลด์ส่งออกในแอปที่จะใช้แสดง Images API ของ PptxGenJS รับ path ของภาพหรือ data ที่เข้ารหัส ค่า x, y, w และ h ที่เป็นตัวเลขมีหน่วยนิ้ว การมี SVG ใน PPTX มีประโยชน์ แต่การสร้างไฟล์สำเร็จอย่างเดียวบอกไม่ได้ว่าโปรแกรมดูเฉพาะตัวจะแสดงถูกต้องหรือไม่

ตัวอย่างด้านล่างใช้โลโก้ต้นฉบับสองสีที่มีช่องเปิดจริง เราสร้างชุดสไลด์ด้วย PptxGenJS 4.0.1 ตรวจสื่อภายใน และเรนเดอร์สไลด์ใน LibreOffice เราไม่ได้ทดสอบชุดนี้ใน Microsoft PowerPoint หากทีมแจกไฟล์ .pptx ให้นำแอปนำเสนอของผู้รับมาเป็นส่วนหนึ่งของการทดสอบ

เริ่มจาก SVG ที่เป็นพาธ ไม่ใช่บิตแมปที่เปลี่ยนชื่อ

บันทึกเป็น logo.svg ไฟล์มี viewBox อัตราส่วน 2:1 พาธสีสองพาธ และช่องวงกลมโปร่งใสที่สร้างด้วย 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 เป็น make-deck.cjs ข้าง logo.svg แล้วรัน 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" });

ทั้งสองกล่องเป็น 2:1 เหมือน SVG ตำแหน่งที่สองเพิ่มแต่ละมิติเป็นสองเท่า ในภาพเรนเดอร์ของเรา ช่องเปิด สี และเส้นรอบนอกยังมองเห็นชัดเจนทั้งสองขนาด ข้อสังเกตนี้ใช้กับตัวอย่างง่ายและตัวเรนเดอร์นี้ ไม่ได้รับประกันทุกเอฟเฟกต์ SVG หรือทุกแอปนำเสนอ

เพื่อจงใจให้ผิด เราวางโลโก้เดียวกันในกล่อง 3.6 × 1.0 นิ้ว ช่องวงกลมกลายเป็นวงรี กล่อง 3.6 × 1.8 นิ้ว คืนสัดส่วน 2:1 การเปลี่ยนเฉพาะพิกเซล width ของ SVG ไม่แก้ตำแหน่งบนสไลด์ที่ w กับ h ไม่ตรงอัตราส่วนภาพ

ตรวจแพ็กเกจ PPTX และสไลด์ที่เรนเดอร์

.pptx เป็นแพ็กเกจ ZIP ดูใน ppt/media/ เพื่อยืนยันว่า SVG เข้าไปในไฟล์ แล้วเปิดชุดสไลด์ในโปรแกรมดูปลายทาง เป็นการตรวจคนละอย่าง: แพ็กเกจอาจมีภาพ แต่แอปนำเสนอแสดงสิ่งอื่น

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

ชุดทดสอบสองสไลด์สี่ตำแหน่งของเรามีรายการสื่อ .svg สี่รายการ และมีไฟล์ชื่อ .png อีกสี่ไฟล์ที่ไบต์แรกเป็น XML ของ SVG ไม่ใช่ลายเซ็น PNG ดังนั้นนามสกุล .png ในแพ็กเกจนี้ ไม่ได้ พิสูจน์ว่ามีราสเตอร์สำรอง การสนทนาปัญหา SVG ใน Node ของ PptxGenJS บันทึกปัญหาภาพตัวอย่างและโปรแกรมดูในอดีต ตรวจเวอร์ชันที่ติดตั้งและไฟล์ส่งออกของคุณเอง แทนการคิดว่ากระทู้นั้นอธิบายทุก build

ภาพเรนเดอร์ LibreOffice จริงแสดงทั้งโลโก้ที่ขนาดถูกต้องและโลโก้ที่จงใจบีบ เราตรวจสีที่เห็น ช่องโปร่งใส และความต่างวงกลมกับวงรี จากภาพเรนเดอร์นี้เราอนุมานไม่ได้ว่า Microsoft PowerPoint หรือโปรแกรมดูอื่นจะจัดการชุดเดียวกันอย่างไร

หาก SVG หายหรือดูผิด

สำหรับภาพเรนเดอร์ว่างเฉพาะไฟล์ ทดสอบสำเนาที่มีพาธเติมสีเรียบ ๆ เพียงพาธเดียว หากใช้ได้ ค่อยเพิ่มพาธและเอฟเฟกต์ที่เหลือเป็นขั้น อย่าใช้รายงานในฟอรัมเป็นหลักฐานว่า SVG ทุกไฟล์ใช้ไม่ได้ในโปรแกรมดูหนึ่ง หากแอปผู้รับไม่สามารถแสดง SVG ได้อย่างสม่ำเสมอ สำเนา PNG ที่ทดสอบแล้วอาจเป็นตัวแทนด้าน รูปลักษณ์ ที่เหมาะสม แต่ทำให้ไม่มีสื่อพาธที่ขยายได้ในชุดนั้น

กราฟิก SVG ที่นำเข้าต่างจากรูปร่าง Office โดยตรงด้วย คำแนะนำแก้ SVG ของ Microsoft อธิบาย แปลงเป็นรูปร่าง (Convert to Shape) เพื่อเปลี่ยนแต่ละส่วนในกระบวนการ PowerPoint ที่รองรับ addImage() ของ PptxGenJS ไม่ได้แปลงแบบนั้น สำหรับการแก้ด้วยมือหลังส่งมอบ ใช้คู่มือรูปร่าง SVG ใน PowerPoint และตรวจส่วนที่เลือกในแอปปลายทาง

กระบวนการนี้เกี่ยวข้องกับ PerfectVector อย่างไร

หากไฟล์โลโก้ต้นฉบับที่อนุมัติเป็น SVG อยู่แล้ว ให้ใช้ไฟล์นั้น หากมีเพียงโลโก้ PNG หรือ JPG แบบแบนขนาดเล็ก เครื่องมือแปลงโลโก้เป็นเวกเตอร์ของ PerfectVector สร้างพาธสำหรับประเมินก่อนขั้นตอน PptxGenJS ได้ ตรวจสี ตัวอักษรเล็ก พื้นหลัง และช่องเปิดในภาพตัวอย่าง แก้สิ่งที่สำคัญต่อแบรนด์ก่อนวาง SVG ที่ดาวน์โหลดบนสไลด์ ชุดสไลด์ที่สร้างยังต้องตรวจแพ็กเกจและโปรแกรมดูตามด้านบน PerfectVector เตรียมภาพ ไม่ได้สร้างหรือรับรองงานนำเสนอ

ภาพถ่ายหรือภาพที่มีการไล่โทนแสงเงาซับซ้อนอาจควรเก็บเป็นราสเตอร์ สำหรับสัญลักษณ์เรียบง่ายมาก การวาดเรขาคณิตที่อนุมัติใหม่ด้วยมือในโปรแกรมเวกเตอร์อาจเร็วและคาดการณ์ได้กว่าการไล่เส้น เมื่อผู้ชมต้องการวัตถุ Office ที่แก้ไขได้แทนโลโก้แทรกที่ขยายได้ ให้สร้างวัตถุเหล่านั้นในกระบวนการสไลด์และทดสอบความต้องการแก้ไขโดยตรง

คำถามที่พบบ่อย

addImage() เปลี่ยน SVG เป็นรูปร่าง PowerPoint ที่แก้ไขได้หรือไม่? ไม่ มันแทรกกราฟิกภาพ หากต้องเปลี่ยนสีหรือย้ายแต่ละส่วนใน PowerPoint ให้ทดสอบกระบวนการ Convert to Shape แยกบนสำเนาในแอปที่รองรับ

ทำไม SVG ดูถูกบีบในสไลด์ที่สร้าง? เปรียบเทียบอัตราส่วน viewBox ของ SVG กับอัตราส่วน w:h บนสไลด์ โลโก้ 240 × 120 เป็น 2:1 ตำแหน่งที่กว้าง 3.6 นิ้วจึงต้องสูง 1.8 นิ้วเพื่อรักษาสัดส่วน

พบ SVG ใน ppt/media/ แล้วพอจะอนุมัติชุดสไลด์หรือไม่? ไม่ มันยืนยันว่าสื่อ SVG ถูกจัดแพ็กเกจ แต่ไม่ได้พิสูจน์ว่าแอปนำเสนอปลายทางแสดงโลโก้ถูกต้อง เปิดชุดที่เสร็จแล้วในแอปนั้น และตรวจขนาด สี ช่องเปิด และเอฟเฟกต์

แหล่งอ้างอิง

1. PptxGenJS — Images API — อธิบายขาเข้า addImage หน่วยขนาด และการรองรับ SVG ในโปรแกรมดู
2. PptxGenJS — ปัญหา SVG ใน Node.js — บันทึกพฤติกรรมภาพตัวอย่างและโปรแกรมดู SVG ในอดีต ซึ่งเป็นเหตุผลให้ตรวจแพ็กเกจและภาพเรนเดอร์จริง
3. Microsoft — แก้ภาพ SVG ใน Microsoft 365 — แยกการแทรกกราฟิก SVG ออกจากการแปลงเป็นรูปร่าง Office ที่แก้ไขได้

มีเพียงโลโก้ราสเตอร์ใช่ไหม? สร้าง SVG สำหรับประเมิน ตรวจพาธและช่องเปิด แล้วสร้างชุดทดสอบเล็กและตรวจผลในแอปที่ผู้ชมใช้