ブラウザーでSVGが印刷されない？印刷レイアウトを確認する
画面では見えるSVGがブラウザーの印刷結果から消える原因を調べます。絵柄を変更する前に、印刷CSS、背景設定、実際のPDFを確認しましょう。
目次
画面には見えるSVGがウェブページの印刷時に消える場合は、まずページの印刷CSSと、その画像がCSS背景かどうかを確認します。同じSVGでも、画像要素では残る一方、印刷ルールでインラインのコピーが非表示になったり、背景設定で装飾用のコピーが省略されたりする場合があります。絵柄を作り直しても、どちらの原因も直りません。
ページとSVGのコピーで作業してください。HTMLとスタイル、使う予定のブラウザーの印刷設定、保存したPDFまたは印刷プレビューにアクセスできる必要があります。サイトを編集できない場合、管理者へ渡すと役立つ情報は、ページのURL、ブラウザーのバージョン、消える画像、背景を有効にすると結果が変わるかどうかです。
印刷の問題と空のSVGを区別する
まず、通常のページで絵柄が見えることを確認します。そこでも元データが空なら、空白のSVGの診断から始めてください。そのガイドでは、形状、塗り、クリッピング、ビューポートの問題を扱っています。
画面から印刷へ移るときの問題では、ページが画像をどう配置しているかを特定します。
| 見つかったもの | 次に確認すること |
|---|---|
ページ内のインライン<svg> | SVG、その形状、祖先要素の印刷ルール |
<img src="artwork.svg"> | 画像の読み込み、画像要素の印刷スタイル、レイアウトボックス |
background-image: url(...) | 背景の印刷設定と、要素の印刷スタイル |
| 絵柄はあるが一部が切れる | 印刷寸法、コンテナーのクリッピング、ページレイアウト |
これらは異なるレンダリング経路であり、ベクターの品質の種類ではありません。インラインSVGとimgのガイドでは、それぞれの形式でどのページスタイルが絵柄に届くかを説明しています。
印刷時に使われるルールを調べる
印刷用スタイルシートや@media printブロックは、紙やPDFの出力に合わせてページを変えられます。MDNの印刷ガイドでは両方の方法を説明し、CSSの詳細度は引き続き適用されるとしています。
ブラウザーに印刷メディアをエミュレートする機能があれば、開発者ツールでそれを使って画像を調べます。適用されたルールと、計算後のdisplay、visibility、opacity、寸法、塗りを確認してください。コンテナー要素も調べます。display: noneは子孫要素も描画から除外します。子のSVGをdisplay: blockにしても、非表示のままの祖先要素は復元できません。
変更する前に、出力を変えるルールを記録します。印刷用スタイルシートがナビゲーションアイコンを意図的に消す一方で、文書のロゴにも誤って一致している場合があります。そのセレクターを限定するか、該当コンポーネントの印刷ルールを変えてください。非表示の要素をすべて表示する全体的な上書きは避けます。
印刷メディアのエミュレーションは、CSSの動作を特定する助けになります。実際に書き出したPDFを開く代わりにはなりません。
同じ独自SVGで2つの原因を再現する
この小さな例では絵柄を固定し、印刷時だけの表示ルールと、背景の印刷という独立した2つの設定を変えます。独自のマークをmark.svgとして保存します。
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
<circle cx="60" cy="40" r="28" fill="#087f8c"/>
<path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>以下の完全なページを、同じフォルダーにbroken.htmlとして保存します。インラインのコピーにも、同じ円と三角形が含まれます。画像と背景は、どちらもmark.svgを読み込みます。
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG print check</title>
<style>
@page { size: A4; margin: 12mm; }
body { margin: 0; font: 16px/1.4 sans-serif; color: #111; }
h1 { margin: 0 0 12px; font-size: 22px; }
p { margin: 0 0 16px; }
.row { display: grid; grid-template-columns: 160px 120px;
gap: 16px; align-items: center; height: 100px;
border-bottom: 1px solid #ccc; }
.slot, .slot svg, .slot img { width: 120px; height: 80px; }
.slot svg, .slot img { display: block; }
.background { background: url("mark.svg") center / contain no-repeat; }
@media print { .inline svg { display: none; } }
</style>
<h1>SVG print check</h1>
<p>The same original SVG in three placements.</p>
<div class="row"><span>Inline SVG</span><div class="slot inline">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="80" viewBox="0 0 120 80">
<circle cx="60" cy="40" r="28" fill="#087f8c"/>
<path d="M60 18L82 54H38Z" fill="#f28e2b"/>
</svg>
</div></div>
<div class="row"><span>Image element</span><div class="slot image">
<img src="mark.svg" width="120" height="80" alt="Original geometric mark">
</div></div>
<div class="row"><span>CSS background</span><div class="slot background"></div></div>
</html>ローカルのプレビューサーバーでページを開きます。Python 3がインストールされているなら、両ファイルが入ったフォルダーで、空いているポートを使って次のコマンドを実行してください。
python3 -m http.server 8000 --bind 127.0.0.1http://127.0.0.1:8000/broken.htmlへアクセスします。画面には3つのマークがすべて表示されるはずです。ブラウザーの印刷プレビューを開き、背景グラフィックを無効にしたPDFと、有効にしたPDFを保存します。設定の名前と場所はブラウザーによって異なります。
次に、ページをfixed.htmlへコピーします。変えるのは次のルールだけです。
@media print { .inline svg { display: block; } }修正後のページを再読み込みし、両方のPDF書き出しを繰り返します。この変更は、例で意図的に設定したdisplay: noneを反転させます。実際のページでは、コンポーネントが意図する印刷レイアウトに基づき、問題のルールを削除するか適用範囲を限定してください。
実際のPDF書き出しで分かったこと
これらのファイルをPlaywright 1.56.1でヘッドレスChromium 141.0.7390.37上で実行しました。ローカル画像の読み込みを待ち、A4で1ページのPDFを4つ書き出して、Popplerでレンダリングし確認しました。画面のキャプチャは両方とも、3つのマークをすべて表示していました。
| 元ファイル | 背景の印刷 | インラインSVG | 画像要素 | CSS背景 |
|---|---|---|---|---|
broken.html | 無効 | なし | 表示 | なし |
broken.html | 有効 | なし | 表示 | 表示 |
fixed.html | 無効 | 表示 | 表示 | なし |
fixed.html | 有効 | 表示 | 表示 | 表示 |
書き出しには印刷メディア、倍率1、ページのCSS用紙サイズを使い、ヘッダーとフッターは付けていません。PlaywrightのprintBackgroundをfalseとtrueで切り替えました。PDFのドキュメントは、このオプションと標準の印刷メディアの動作を説明しています。どちらのファイルにもprint-color-adjustはありません。
背景を有効にすると背景のコピーは戻りましたが、隠れたインラインSVGは戻りませんでした。印刷ルールを直すとインラインSVGは戻りましたが、背景の印刷は有効になりませんでした。元の絵柄は一度も変更していません。
このテストが示すのは、記載したChromium環境と単純な独自形状での結果です。すべてのブラウザーで同じ動作をすること、実際のプリンターの出力、厳密な色の一致を示すものではありません。
原因を直してから保存ファイルを確認する
**印刷ルールが絵柄を隠している場合：**問題が始まる要素や祖先要素のルールを修正します。画面と印刷の両表示を再確認し、文書の修正によってインターフェースの操作部品が意図せず現れないようにしてください。
**CSS背景だけがない場合：**背景の印刷を有効にして出力を比較します。画像が重要な内容なら、装飾背景だけに依存せず、印刷レイアウトでは意味のある画像要素やインラインSVGとして配置することを検討します。条件を管理した例では、背景が無効でも画像要素は表示されましたが、自分のページでも別途確認が必要です。
**画像自体を読み込めない場合：**パスを変える前に、要求したURLとリソースのエラーを確認します。MDNはSVGを画像として使う際の制限を説明しており、スクリプトや外部リソースの制約を含みます。単独のSVGタブとページに埋め込んだ画像は、同じ依存関係のテストではありません。サーバー生成のWeasyPrint出力には、別のSVGリソース解決ガイドを使ってください。
**結果が切れたり一部欠けたりする場合：**ページを問題の画像とコンテナーだけに絞ります。印刷されたボックス、はみ出し、SVGの範囲を比較し、その後、既存の空白SVGガイドで形状を確認してください。クリッピング全般の修正として、背景の切り替えを使ってはいけません。
変更するたびに新しく保存したPDFを開き直し、予定サイズで画像を確認します。周囲の内容、改ページ、意味のあるラベルも確認してください。ブラウザーのバージョンと関連する書き出し設定を記録します。ディスクにPDFが存在するだけでは、絵柄が含まれる証拠にはなりません。
別の元データの問題にだけベクター化を使う
使えるパスを持つ既存のSVGは、ページを修正する間もそのパスを保持します。元データがラスターのクリップアートしかなく、編集可能な形状が必要なら、PerfectVectorでクリップアートをSVGへ変換します。プレビューを確認してから、SVGの編集と書き出しのために結果をアンロックしてください。埋め込む前に、シルエット、穴、小さな細部をラスターと比較します。
PerfectVectorは周囲の印刷用スタイルシートを修正したり、ブラウザーの背景設定を選んだりしません。絵柄の素材を差し替えた後は、同じページからPDFへのテストを繰り返します。
意図した設定の保存出力で必要な絵柄が見え、切れていなければ完了です。ラスターから編集可能な形状も復元する必要があるなら、PerfectVectorでSVGを準備し、その後に最終ページで確認してください。納品物が紙の出力なら、実物の校正を使います。この例でテストしたのはデジタルPDFだけです。
よくある質問
print-color-adjust: exactならSVG背景の印刷が保証されますか？ いいえ。意図した見た目を保つようブラウザーに求めますが、ユーザーの設定で上書きできます。MDNのprint-color-adjustのリファレンスは、その限界を明示しています。また、要素を隠すdisplayルールを解除することもありません。
印刷を直すためにSVGをPNGへ変換すべきですか？ まず原因を特定します。形式を変えても、印刷メディアのルールは消えず、背景の印刷も有効になりません。ページと出力設定を確認しながら、使えるSVG形状は保持してください。
画像版は印刷されるのに、インライン版が印刷されないのはなぜですか？ ページが異なるセレクターを適用している場合があります。条件を管理した例では、印刷時だけのルールでインラインSVGが隠れ、画像要素は表示されたままでした。ある埋め込み方法が常に印刷に優れると考えず、実際のルールを確認してください。
出典
- MDN：印刷 — 印刷用スタイルシート、印刷メディア、引き続き適用されるCSSカスケードを説明しています。
- MDN：display — 表示の抑制が要素と子孫に与える影響を定義しています。
- Playwright：page.pdf — 実際のテストで使った印刷メディアと背景書き出しの設定を説明しています。
- MDN：画像としてのSVG — 画像の埋め込みと単独SVGドキュメントを区別する制限を説明しています。
- MDN：print-color-adjust — 見た目の指定と、ユーザーの印刷設定が優先されることを説明しています。
