React-pdfのSVGロゴ：PDFにパスを描画する

@react-pdf/renderer に小さなSVGロゴを入れる場合は、その Svg、Path、その他の対応するコンポーネントで図形を構築します。外側の Svg に明示的なサイズを与え、元の viewBox を保持してください。レンダラーの Image の説明では入力にPNGとJPGが掲載されています。SVGのURLを Image に渡す方法は、ここで扱うベクターの方法ではありません。

このガイドは、中央に開口部のある正方形の紋章を持つ、完全なNodeの例を使います。依存関係を固定してPDFを描画し、結果を確認しました。混同しやすい3つのもの、元の図形、コンポーネントのツリー、PDFでの配置サイズを分けて示します。

使用しているReact PDFパッケージを確認する

この記事は @react-pdf/renderer で文書を生成します。別の名前の react-pdf パッケージは、既存のPDFを表示するものです。検索結果から解決策をコピーする前に、ファイルのimportを確認してください。

レンダラーの Document の中では、そのレンダラーがエクスポートするコンポーネントを使います。ブラウザーの小文字の svg と path 要素は別の描画環境のものです。公式のSVGコンポーネントリファレンスでは、Svg をビューポートのコンテナーとして定義し、その中にインポートしたReact-pdfの形状を示しています。

Imageリファレンスは、ビットマップ入力を説明しています。複雑な見た目の維持がベクター形状の保持より重要なら、PNGへのフォールバックも役立ちます。納品物が変わるため、ベクターのマスターは別に保持してください。

公式の @react-pdf/svg パッケージもあります。READMEに記載された parseSvg() は、プリミティブノードのツリーを返し、属性名をcamelCaseに変換します。非対応要素は警告付きで省かれるとしています。これはパーサーの契約であり、すべてのブラウザーSVGが同じように描画されるという約束ではありません。以下の例は形状と描画色を確認しやすくするため、明示的なコンポーネントを使います。

自分の図形を読み込む前に最小限のロゴを描画する

この例は @react-pdf/renderer 4.9.0、React 19.2.4、Node 22.19.0 で実行しました。このバージョンはテストした構成を示すもので、別の依存関係ツリーの動作を保証しません。

新しいディレクトリーに、2つの実行時パッケージをインストールします。

npm install --save-exact @react-pdf/renderer@4.9.0 react@19.2.4

次を logo.mjs として保存し、node logo.mjs を実行します。JSXのビルド工程なしでNodeが実行できるよう、React.createElement を使っています。

import React from 'react';
import { fileURLToPath } from 'node:url';
import {
  Document, Page, Svg, Path, Rect, renderToFile,
} from '@react-pdf/renderer';
 
const h = React.createElement;
const ring = 'M10 10H90V90H10Z M30 30H70V70H30Z';
 
const logo = h(
  Svg,
  { width: 144, height: 144, viewBox: '0 0 100 100' },
  h(Rect, {
    x: 0, y: 0, width: 100, height: 100, fill: '#f3ede2',
  }),
  h(Path, { d: ring, fill: '#087f8c', fillRule: 'evenodd' }),
);
 
await renderToFile(
  h(Document, null,
    h(Page, { size: 'A4', style: { padding: 36 } }, logo),
  ),
  fileURLToPath(new URL('./logo.pdf', import.meta.url)),
);

外側と内側の正方形は1つの複合パスを共有します。fillRule: 'evenodd' が内側の正方形を開口部として残し、下の淡い長方形が見えます。中央を覆う白い図形はありません。このため、文字の内部の穴や切り抜きがあるロゴに置き換えるときに、開口部が有用な確認箇所になります。

SVGの座標は両方向に100単位ですが、配置するビューポートは144 × 144です。viewBox は図形の座標系、width と height は表示するビューポートを表します。ロゴのサイズを調整するときは、この違いを維持してください。公式のSvgのprops表では、この制御と preserveAspectRatio を説明しています。

プレビューとともに保存したPDFも確認する

このテストでは、左上近くに青緑色の正方形の輪があるA4の1ページが生成されました。ファイルをPopplerで描画し、淡い背景が開口部から見えることを目視確認しました。Popplerの pdfimages -list logo.pdf は、この独立した文書に埋め込み画像がないと報告しました。

この結果は意図的に限定したものです。今回のパスのみの例を説明しており、写真、埋め込みSVG画像、非対応の効果がある文書全体がベクターであることを示しません。

マシンでPopplerが使えるなら、次のコマンドで2種類の確認ができます。

pdfimages -list logo.pdf
pdftoppm -png -singlefile -scale-to 1000 logo.pdf logo-preview

2つ目のコマンドは目視確認用のラスタープレビューを作るもので、元のPDFをビットマップに変えるものではありません。プレビューで開口部、角、色、配置を確認し、受け取り側が使うビューアーで保存したPDFを開きます。鮮明なプレビューだけでは、元文書にパスがあるとは判断できません。大きなビットマップも鮮明に見える場合があります。

より詳しく調べるには、ロゴ周辺のPDFの描画命令と参照オブジェクトを確認します。複雑なレポートには入れ子のオブジェクトがあるため、レポート全体を診断する前にロゴだけの独立した文書から始めます。PDFKitのSVGガイドでは、別のSVG読み込み手順と保存したPDFの確認を説明しています。

図形の機能を1つずつ移す

例の d 値を自分のパスデータに置き換え、その塗り、塗り規則、ストローク、変換を保持します。形状だけをコピーして描画色を落とすと、パスデータ自体が有効でも結果が変わる場合があります。

小さな静的な記号なら、対応する形状に直接色を付けます。Webページのスタイルシートに依存するロゴは、自己完結した文書コンポーネントになる前に、依存関係を解決する必要があります。元のSVGを描画コードの隣に保管し、後の修正を承認済みの図形と比較できるようにしてください。

公式のSVG概要には利用可能なプリミティブが掲載されています。ブラウザーの完全なSVG機能群ではなく、対応確認の一覧として扱ってください。文字、クリッピング、グラデーションは、本番レポートに加える前にインストール済みのバージョンでテストします。

SVGに埋め込みPNGがある場合、そのコンテナーを変換しても失われた形状は再構築されません。埋め込みラスターのガイドでは、SVGファイル内のパスとビットマップの区別を説明しています。

ロゴがPNGやJPGから始まる場合

元のSVG、AI、その他の編集可能なベクターマスターがあるなら、まずそれを入手してください。ピクセルしか残っていない場合、React-pdfの作業より前にPerfectVectorのロゴベクター化ツールでSVG候補を作れます。対応する形状をPDFコンポーネントに移す前に、輪郭、小さな開口部、別々の色領域を元画像と比較してください。

ベクター化はレンダラーへの統合を修復したり、Reactコンポーネントを作ったり、すべてのSVG機能への対応を保証したりしません。ブランドの正確な形状が必要な文字は、手動の確認対象にしてください。ロゴベクター化ガイドでは、トレース、文字の打ち直し、描き直しの選択を支援しています。

ラスターしかない元データでは、確認したベクター候補と、その後に検証したPDFが有用な成果です。既存のベクター元データなら、直接コンポーネントと配置の確認に進みます。元データの準備についてはブログにもガイドがあります。

よくある質問

React-pdfのImageにSVGファイルを渡せますか？ 文書化されているImageの入力はPNGとJPGです。このガイドのパスを使う手順にはレンダラーのSvgプリミティブを使い、他の入力動作に依存する前にインストール済みのバージョンを確認してください。

すべてのSVGを手で書き換える必要がありますか？ いいえ。公式の@react-pdf/svgパッケージがSVG文字列をプリミティブノードのツリーに解析します。対応する要素と警告を確認し、その出力を描画手順に接続してテストしてください。ここでの明示的なコンポーネントの例は、追加のパーサー工程を避けています。

ロゴの中央が埋まるのはなぜですか？ 複合パスとその塗り規則を確認してください。テストの紋章はevenoddを使い、内側の正方形を開けています。図形を変える前に、元の形状と描画規則を保持します。

鮮明なPDFプレビューは、ロゴがベクターだと証明しますか？ いいえ。見た目とともに、保存したPDFの内容と画像オブジェクトを確認します。このガイドの独立した例には埋め込み画像がありませんでしたが、その結果が別のロゴにも自動で当てはまるわけではありません。

参考資料

1. React-pdf — Svgコンポーネント — ビューポート、寸法、viewBox、縦横比の制御を定義しています。
2. React-pdf — Imageコンポーネント — ビットマップ配置用のPNG・JPG入力形式を説明しています。
3. React-pdf — SVGプリミティブ — レンダラーが対応するSVGコンポーネントを一覧にしています。
4. React-pdf — SVGパーサー — プリミティブノードのツリー、属性変換、非対応要素の警告を説明しています。

PNGやJPGのロゴしかない場合は、PerfectVectorでSVG候補を作成して、輪郭と開口部を元画像と比較してください。その後、対応する形状を移し、保存したPDFを確認します。