SVG trong PptxGenJS: Giữ logo sắc nét trên slide

Truyền một SVG thực vào slide.addImage(), đặt nó trong khung có tỷ lệ giống hình và kiểm tra slide xuất ra trong ứng dụng sẽ dùng để trình chiếu. API Images của PptxGenJS nhận path hoặc data được mã hóa của ảnh; các giá trị số x, y, w và h tính bằng inch. SVG bên trong PPTX rất hữu ích, nhưng chỉ tạo tệp thành công không cho biết một trình xem cụ thể có hiển thị đúng hay không.

Ví dụ dưới đây dùng logo gốc hai màu với một lỗ thực. Chúng tôi tạo bộ slide bằng PptxGenJS 4.0.1, kiểm tra media và kết xuất các slide trong LibreOffice. Chúng tôi không thử bộ slide này trong Microsoft PowerPoint. Nếu nhóm của bạn phân phối tệp .pptx, hãy đưa ứng dụng trình chiếu của người nhận vào phép thử.

Bắt đầu từ SVG có đường dẫn, không phải bitmap đổi tên

Lưu đoạn này thành logo.svg. Nó có viewBox tỷ lệ 2:1, hai đường dẫn có màu và một lỗ tròn trong suốt tạo bằng fill-rule="evenodd". Không có ảnh hay phông chữ liên kết cần tải khi mở bộ slide.

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

Chỉ tên tệp .svg chứng minh được rất ít. Tệp có thể chứa ảnh raster nhúng, nên hãy kiểm tra hình nếu phiên bản duy nhất bạn có đến từ bản xuất PNG. Hướng dẫn định dạng tệp logo giúp bạn giữ bản vector gốc có thể tái sử dụng, thay vì luân chuyển những bản chỉ dành cho trình chiếu.

Thêm logo mà không thay tỷ lệ

Cài phiên bản dùng trong phép kiểm tra này bằng npm install pptxgenjs@4.0.1. Lưu đoạn mã Node này thành make-deck.cjs cạnh logo.svg, rồi chạy 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" });

Cả hai khung đều có tỷ lệ 2:1, giống SVG. Vị trí thứ hai tăng gấp đôi mỗi chiều. Trong kết quả kết xuất của chúng tôi, lỗ, màu sắc và đường bao vẫn rõ ở cả hai kích thước. Quan sát đó áp dụng cho mẫu đơn giản và trình kết xuất này; không bảo đảm cho mọi hiệu ứng SVG hay ứng dụng trình chiếu.

Để chủ động tạo lỗi, chúng tôi đặt cùng logo trong khung 3.6 × 1.0 inch. Lỗ tròn trở thành hình bầu dục. Khung 3.6 × 1.8 inch khôi phục tỷ lệ 2:1. Chỉ thay width tính bằng pixel của SVG không sửa được vị trí đặt trên slide có w và h không khớp tỷ lệ của hình.

Kiểm tra gói PPTX và slide được kết xuất

.pptx là một gói ZIP. Xem trong ppt/media/ để xác nhận SVG đã được đưa vào tệp, rồi mở bộ slide trong trình xem đích. Đây là hai phép thử riêng: gói lưu trữ có thể chứa hình trong khi ứng dụng trình chiếu hiển thị thứ khác.

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

Phép thử hai slide, bốn vị trí của chúng tôi chứa bốn mục media .svg. Nó cũng có bốn tệp mang tên .png nhưng những byte đầu là XML SVG, thay vì chữ ký PNG. Vì thế, hậu tố .png trong gói này không chứng minh có bản raster dự phòng. Thảo luận vấn đề SVG trong Node của PptxGenJS ghi lại các vấn đề trước đây về xem trước và trình xem; hãy kiểm tra phiên bản thực tế bạn cài và tệp xuất, thay vì cho rằng thảo luận đó mô tả mọi bản dựng.

Kết xuất LibreOffice thực tế hiển thị cả hai logo đúng kích thước và logo bị ép có chủ đích. Chúng tôi kiểm tra màu nhìn thấy, lỗ trong suốt và khác biệt giữa hình tròn với hình bầu dục. Từ kết xuất này, chúng tôi không thể suy ra Microsoft PowerPoint hoặc trình xem khác xử lý cùng bộ slide thế nào.

Nếu SVG bị mất hoặc hiển thị sai

Với lỗi hiển thị trống chỉ xảy ra ở một tệp, thử bản sao chỉ chứa một đường dẫn tô màu đơn giản. Nếu nó hoạt động, thêm dần những đường dẫn và hiệu ứng còn lại. Đừng dùng bài diễn đàn làm bằng chứng rằng mọi SVG đều lỗi trong một trình xem. Nếu ứng dụng người nhận không thể hiển thị SVG đáng tin cậy, bản PNG đã thử có thể là phương án dự phòng thực tế về diện mạo, dù phải từ bỏ dữ liệu đường dẫn có thể phóng to trong bộ slide đó.

Hình SVG nhập vào cũng khác với các hình Office gốc. Hướng dẫn chỉnh SVG của Microsoft mô tả Convert to Shape để thay đổi từng phần trong quy trình PowerPoint được hỗ trợ. addImage() của PptxGenJS không thực hiện chuyển đổi đó. Để chỉnh thủ công sau bàn giao, dùng hướng dẫn hình SVG trong PowerPoint và xác minh các phần được chọn trong ứng dụng đích.

Quy trình này với PerfectVector

Nếu bản logo gốc đã được duyệt là SVG, hãy dùng nó. Nếu bạn chỉ có logo PNG hoặc JPG nhỏ, phẳng, công cụ vector hóa logo của PerfectVector có thể tái dựng các đường dẫn để đánh giá trước bước PptxGenJS. Kiểm tra màu, chữ nhỏ, nền và các lỗ trong bản xem trước; sửa những gì quan trọng với thương hiệu trước khi đặt SVG tải xuống lên slide. Bộ slide được tạo vẫn cần kiểm tra gói và trình xem như trên. PerfectVector chuẩn bị hình; nó không tạo hay xác minh bài trình chiếu.

Ảnh chụp hoặc ảnh đổ bóng phức tạp có thể nên giữ ở dạng raster. Với biểu trưng rất đơn giản, vẽ lại thủ công hình học đã duyệt trong trình chỉnh sửa vector có thể nhanh và dễ dự đoán hơn đồ lại. Khi người xem cần đối tượng Office chỉnh sửa được thay vì logo chèn vào có thể phóng to, hãy tạo những đối tượng đó trong quy trình slide và thử trực tiếp yêu cầu chỉnh sửa.

Câu hỏi thường gặp

addImage() có biến SVG thành các hình PowerPoint chỉnh sửa được không? Không. Nó chèn một hình đồ họa. Nếu cần đổi màu hay di chuyển từng phần trong PowerPoint, hãy thử quy trình Convert to Shape riêng trên một bản sao trong ứng dụng được hỗ trợ.

Vì sao SVG của tôi trông bị ép trong slide được tạo? So sánh tỷ lệ viewBox SVG với tỷ lệ w:h trên slide. Logo 240 × 120 có tỷ lệ 2:1, nên vị trí rộng 3.6 inch cần chiều cao 1.8 inch để giữ tỷ lệ.

Tìm thấy SVG trong ppt/media/ có đủ để duyệt bộ slide không? Không. Nó xác nhận media SVG đã được đóng gói, nhưng không chứng minh ứng dụng trình chiếu đích hiển thị logo đúng. Mở bộ slide hoàn chỉnh ở đó và kiểm tra kích thước, màu, các lỗ và hiệu ứng.

Nguồn tham khảo

1. PptxGenJS — API Images — Mô tả đầu vào addImage, đơn vị kích thước và hỗ trợ SVG của trình xem.
2. PptxGenJS — Vấn đề SVG trong Node.js — Ghi lại hành vi xem trước và trình xem SVG trước đây, là lý do cần kiểm tra gói và kết xuất thực tế.
3. Microsoft — Chỉnh sửa ảnh SVG trong Microsoft 365 — Phân biệt chèn hình SVG với chuyển thành các hình Office có thể chỉnh sửa.

Bạn chỉ có logo raster? Tạo một bản SVG để đánh giá, kiểm tra đường dẫn và các lỗ, rồi dựng bộ slide thử nhỏ và xác minh kết quả trong ứng dụng mà người xem sử dụng.