SVG dalam PptxGenJS: Jaga Logo Tetap Tajam di Slide

Berikan SVG sungguhan ke slide.addImage(), tetapkan kotak dengan rasio aspek karya, dan periksa slide ekspor dalam aplikasi yang akan menyajikannya. API Images PptxGenJS menerima path gambar atau data yang dienkode; nilai numerik x, y, w, dan h memakai inci. SVG di dalam PPTX berguna, tetapi keberhasilan pembuatan file saja tidak memberi tahu apakah penampil tertentu akan menampilkannya dengan benar.

Contoh di bawah memakai logo asli dua warna dengan bukaan nyata. Kami menghasilkan deck dengan PptxGenJS 4.0.1, memeriksa medianya, dan merender slide di LibreOffice. Kami tidak menguji deck ini di Microsoft PowerPoint. Jika tim Anda mendistribusikan file .pptx, jadikan aplikasi presentasi penerima bagian dari pengujian.

Mulai dengan SVG berbasis path, bukan bitmap yang diganti namanya

Simpan sebagai logo.svg. File memiliki viewBox 2:1, dua path berwarna, dan bukaan lingkaran transparan yang dibentuk dengan fill-rule="evenodd". Tidak ada gambar atau font tertaut yang harus diambil ketika deck dibuka.

<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>

Nama file .svg saja tidak banyak membuktikan. File dapat berisi gambar raster tertanam, jadi periksa karya jika satu-satunya versi yang Anda miliki berasal dari ekspor PNG. Panduan format logo membantu mempertahankan master vektor yang dapat digunakan ulang alih-alih mengedarkan salinan khusus presentasi.

Tambahkan logo tanpa mengubah proporsinya

Instal versi yang digunakan untuk pemeriksaan ini dengan npm install pptxgenjs@4.0.1. Simpan skrip Node ini sebagai make-deck.cjs di samping logo.svg, lalu jalankan 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" });

Kedua kotak berasio 2:1, seperti SVG. Penempatan kedua menggandakan setiap dimensi. Dalam render kami, lubang, warna, dan outline tetap dapat dikenali pada kedua ukuran. Pengamatan itu berlaku untuk contoh sederhana ini dan renderer ini; bukan jaminan untuk setiap efek SVG atau aplikasi presentasi.

Untuk kegagalan yang disengaja, kami menempatkan logo yang sama dalam kotak 3.6 × 1.0 inci. Lubang lingkarannya menjadi oval. Kotak 3.6 × 1.8 inci memulihkan proporsi 2:1. Mengubah width piksel SVG saja tidak memperbaiki penempatan slide yang w dan h-nya tidak sesuai rasio karya.

Periksa paket PPTX dan slide yang dirender

.pptx adalah paket ZIP. Lihat ppt/media/ untuk memastikan SVG masuk ke file, lalu buka deck dalam penampil tujuan. Ini adalah pengujian terpisah: arsip dapat berisi karya sementara aplikasi presentasi menampilkan hal lain.

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

Pengujian kami dengan dua slide dan empat penempatan berisi empat entri media .svg. Paket juga berisi empat file bernama .png yang byte pertamanya adalah XML SVG, bukan signature PNG. Karena itu, akhiran .png dalam paket ini tidak membuktikan adanya raster alternatif. Diskusi masalah SVG Node PptxGenJS mencatat masalah pratinjau dan penampil terdahulu; periksa versi yang Anda instal serta file ekspornya sendiri alih-alih menganggap diskusi itu menjelaskan setiap build.

Render LibreOffice yang sebenarnya menampilkan kedua logo berukuran benar dan logo yang sengaja dimampatkan. Kami memeriksa warna terlihat, bukaan transparan, dan perbedaan lingkaran versus oval. Dari render ini, kami tidak dapat menyimpulkan bagaimana Microsoft PowerPoint atau penampil lain akan menangani deck yang sama.

Jika SVG hilang atau tampak salah

Untuk render kosong yang terkait file tertentu, uji salinan yang hanya berisi satu path dengan isian sederhana. Jika berhasil, tambahkan path dan efek sisanya bertahap. Jangan memakai laporan forum sebagai bukti bahwa semua SVG gagal dalam satu penampil. Jika aplikasi penerima tidak dapat menampilkan SVG Anda secara andal, salinan PNG yang diuji dapat menjadi alternatif tampilan yang praktis, meskipun mengorbankan media path yang dapat diskalakan dalam deck itu.

Grafik SVG impor juga berbeda dari bentuk Office native. Petunjuk penyuntingan SVG Microsoft menjelaskan Convert to Shape untuk mengubah bagian individual dalam alur PowerPoint yang didukung. addImage() PptxGenJS tidak menjalankan konversi itu. Untuk suntingan manual setelah penyerahan, gunakan panduan bentuk SVG PowerPoint dan verifikasi bagian yang dipilih dalam aplikasi tujuan.

Penerapannya dengan PerfectVector

Jika master logo yang disetujui sudah berupa SVG, gunakan file itu. Jika yang Anda miliki hanya logo PNG atau JPG kecil dan datar, vektorisasi logo PerfectVector dapat merekonstruksi kandidat path sebelum tahap PptxGenJS. Periksa warna, tulisan kecil, latar, dan bukaan dalam pratinjau; perbaiki bagian yang penting bagi merek sebelum menempatkan SVG unduhan pada slide. Deck yang dihasilkan tetap memerlukan pemeriksaan paket dan penampil di atas. PerfectVector menyiapkan karya; tidak menghasilkan atau memvalidasi presentasi.

Foto atau gambar dengan shading kompleks mungkin lebih baik tetap sebagai raster. Untuk tanda sangat sederhana, menggambar ulang geometri yang disetujui secara manual dalam editor vektor mungkin lebih cepat dan lebih dapat diprediksi daripada tracing. Ketika audiens memerlukan objek Office yang bisa diedit alih-alih logo sisipan yang dapat diskalakan, buat objek tersebut dalam alur slide dan uji kebutuhan penyuntingannya secara langsung.

FAQ

Apakah addImage() mengubah SVG menjadi bentuk PowerPoint yang bisa diedit? Tidak. Metode ini menyisipkan grafik gambar. Jika Anda perlu mewarnai ulang atau memindahkan bagian individual di PowerPoint, uji alur Convert to Shape terpisah pada salinan dalam aplikasi yang didukung.

Mengapa SVG saya tampak tertekan dalam slide yang dihasilkan? Bandingkan rasio viewBox SVG dengan rasio w:h slide. Logo 240 × 120 berasio 2:1, sehingga penempatan selebar 3.6 inci membutuhkan tinggi 1.8 inci agar proporsinya terjaga.

Apakah menemukan SVG dalam ppt/media/ cukup untuk menyetujui deck? Tidak. Itu mengonfirmasi media SVG dikemas, tetapi tidak membuktikan aplikasi presentasi tujuan menampilkan logo dengan benar. Buka deck akhir di sana dan periksa ukuran, warna, bukaan, serta efeknya.

Sources

1. PptxGenJS — API Images — Mendokumentasikan masukan addImage, satuan ukuran, dan dukungan penampil SVG.
2. PptxGenJS — Masalah SVG dalam Node.js — Mencatat perilaku pratinjau dan penampil SVG terdahulu yang mendasari pemeriksaan paket serta render sebenarnya.
3. Microsoft — Menyunting gambar SVG dalam Microsoft 365 — Membedakan penyisipan grafik SVG dari konversinya menjadi bentuk Office yang bisa diedit.

Hanya punya logo raster? Buat kandidat SVG, periksa path dan bukaannya, lalu buat deck pengujian kecil dan verifikasi hasilnya dalam aplikasi yang digunakan audiens Anda.