PptxGenJSのSVG：スライドでロゴを鮮明に保つ

本物のSVGを slide.addImage() に渡し、図形の縦横比に合う枠を指定して、書き出したスライドを実際にプレゼンするアプリで確認します。PptxGenJSのImages APIは画像の path または符号化した data を受け付け、数値の x、y、w、h はインチ単位です。PPTX内のSVGは有用ですが、ファイル作成の成功だけでは特定のビューアーで正しく表示されるか分かりません。

以下の例では、本当の開口部を持つオリジナルの2色ロゴを使います。PptxGenJS 4.0.1でデッキを生成し、メディアを調べ、LibreOfficeでスライドを描画しました。このデッキをMicrosoft PowerPointではテストしていません。チームが .pptx を配る場合は、受け取り側のプレゼンアプリもテストに含めてください。

名前を変えたビットマップではなくパスのSVGから始める

次を logo.svg として保存します。2:1の viewBox、2つの色付きパス、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です。2つ目の配置は各寸法を2倍にします。今回の描画では、どちらのサイズでも穴、色、輪郭を識別できました。この観察はこの単純な例とレンダラーに対するもので、すべてのSVG効果やプレゼンアプリの保証ではありません。

意図的な失敗として、同じロゴを 3.6 × 1.0インチ の枠に置きました。円の穴は楕円になりました。3.6 × 1.8インチ の枠なら2:1の比率に戻ります。SVGのピクセルの width だけを変えても、スライドの w と h が図形の比率と合わない配置は直りません。

PPTXパッケージと描画スライドを確認する

.pptx はZIPパッケージです。ppt/media/ を調べてSVGが入ったことを確認し、利用先のビューアーでデッキを開きます。これは別々のテストです。アーカイブに図形が入っていても、プレゼンアプリは別のものを表示する場合があります。

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

2スライド、4配置のテストには、4つの .svg メディア項目がありました。また、.png という名前なのに最初のバイトがPNGシグネチャーではなくSVGのXMLだったファイルが4つありました。したがって、このパッケージの .png 接尾辞は、ラスターの代替があることを証明しませんでした。PptxGenJSのNodeのSVG問題の議論には以前のプレビューやビューアーの問題が記録されています。そのスレッドがすべてのビルドを説明すると思わず、自分のインストール済み版と書き出したファイルを確認してください。

実際のLibreOffice描画は、正しいサイズの両ロゴと意図的に圧縮したものを表示しました。見える色、透明な開口部、円と楕円の違いを確認しました。この描画からMicrosoft PowerPointや他のビューアーが同じデッキをどう扱うかは推測できません。

SVGが欠けたり、おかしく見えたりする場合

ファイル固有の空白描画には、単純な塗りのパス1つだけのコピーをテストします。動くなら残りのパスと効果を段階的に加えてください。フォーラムの報告を、あるビューアーですべてのSVGが失敗する証拠に使わないでください。受け取り側のアプリがSVGを確実に表示できないなら、検証したPNGコピーは実用的な見た目の代替ですが、そのデッキでは拡大縮小できるパスメディアを手放します。

読み込んだSVG画像と、Officeのネイティブ形状も別です。MicrosoftのSVG編集の手順は、対応するPowerPointで個別部分を変える Convert to Shape（図形に変換） を説明しています。PptxGenJSの addImage() はその変換をしません。納品後の手動編集には、PowerPointのSVG形状ガイドを使い、利用先アプリで選択した部分を確認します。

PerfectVectorを使う場合

承認されたロゴマスターがすでにSVGなら使ってください。小さな平面的なPNGやJPGしかないなら、PptxGenJS工程の前にPerfectVectorのロゴベクター化ツールでパス候補を再構築できます。プレビューで色、小さな文字、背景、開口部を調べ、ダウンロードした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の問題 — 実際のパッケージと描画の確認が必要な理由となる、過去のプレビューやビューアーの動作を記録しています。
3. Microsoft — Microsoft 365でSVG画像を編集 — SVG画像の挿入と編集可能なOffice形状への変換を区別しています。

ラスターのロゴしかない場合は、SVG候補を作成し、パスと開口部を確認してください。その後、小さなテストデッキを作り、受け取り側が使うアプリで結果を検証します。