C#でSVGをPDFに変換する

Q: C#でSVGをPDFに変換するには？

IronPDFはHTMLをPDFに変換する方法でSVGをPDFに変換します。HTMLのimgタグにSVGを埋め込み、幅と高さのスタイルを指定し、IronPDFのChromePdfRendererを使ってHTMLをPDFとしてレンダリングします。重要なのはimg要素に適切なサイズ属性を設定することです。

Q: 私のSVGがPDFに表示されないのはなぜですか？

SVGはIronPDFで生成されたPDFの幅と高さの指定がない場合、表示されないことがあります。IronPDFが使用するChromeレンダリングエンジンでは、imgタグのstyle属性かwidth/height属性で寸法を設定する必要があります。これらがないと、SVGのサイズがゼロになる可能性があります。

Q: PDF変換にSVGを埋め込むには、どのような方法がありますか？

IronPDF はSVGを埋め込むための3つの主要な方法をサポートしています: 1) 幅と高さのスタイル属性を持つインラインSVG、2) URLまたはローカルファイルパスを通して参照される外部SVGファイル、3) HTMLに直接埋め込まれるBase64エンコードされたSVG。全ての方法は適切なサイズ指定を必要とします。

Q: ローカルのSVGファイルをPDFに変換できますか？

はい、IronPDFはローカルのSVGファイルをPDFに変換することができます。imgタグのsrc属性を通してプロジェクトに保存されているSVGアセットを参照し、ファイルパスのアプローチを使用してください。適切なレンダリングのために幅と高さを指定することを忘れないでください。

Q: SVGからPDFへの変換には、どのようなレンダリングオプションを使用すればよいですか？

IronPDFでSVGをPDFに変換する場合、適切なRenderingOptionsでChromePdfRendererを使用してください。一般的な方法は、WaitFor.RenderDelay(1000)を使ってRenderDelayを追加し、変換前にSVGが完全に読み込まれるようにすることです。これは複雑な SVG や外部リソースを読み込む際に役立ちます。

Q: 変換したSVGをPDFファイルとして保存する方法を教えてください。

SVGを含むHTMLをIronPDFのChromePdfRendererでレンダリングした後、SaveAsメソッドを使ってPDFファイルを保存します。レンダリングされたPDFオブジェクトに対してSaveAs("filename.pdf")を呼び出すだけで、指定した場所に保存されます。

カーティス・チャウ

更新日:2026年1月25日

Translated

View the article in English

IronPdfはHTMLからPDFへのアプローチを使ってSVGグラフィックをPDFドキュメントに変換します - 適切なレンダリングを保証するために、SVGを明示的な幅/高さのスタイルでimgタグに埋め込みます。

IronPDFはSVGグラフィックをHTMLからPDFに変換する方法をサポートしています。 SVG（Scalable Vector Graphics）ファイルは、スケーラビリティがあり、どのサイズでも鮮明にレンダリングできるため、ロゴ、アイコン、イラスト、チャートなどに広く使用されています。SVGをPDFに変換することは、印刷用ドキュメントの作成、アーカイブ目的、異なるプラットフォーム間での一貫した表示を保証するために不可欠です。

注：SVGを埋め込むときは、img要素のwidthおよび/またはheightスタイル属性を設定してください。

クイックスタート: SVG から PDF への簡単な変換

C#でIronPDFを使ってSVGファイルをPDFに変換する。このスニペットは、指定された寸法でHTMLのimgタグを介してSVGを埋め込む方法を示しており、成功するレンダリングのために重要なステップです。 SVGが正確にレンダリングされ、PDFとして保存されることを保証する迅速な実装のために、このガイドに従ってください。

IronPDF をNuGetパッケージマネージャでインストール
PM > Install-Package IronPdf

このコードスニペットをコピーして実行します。

new IronPdf.ChromePdfRenderer { RenderingOptions = { WaitFor = IronPdf.Rendering.WaitFor.RenderDelay(1000) } }
    .RenderHtmlAsPdf("<img src='https://example.com/logo.svg' style='width:100px;height:100px;'>")
    .SaveAs("svgToPdf.pdf");

実際の環境でテストするためにデプロイする

今日プロジェクトで IronPDF を使い始めましょう無料トライアル

最小限のワークフロー(5ステップ)

SVGからPDFへの変換のためのNuGetPDFライブラリをインストールしてください。
HTMLで`img`タグを使用してSVG画像をインポートする
IronPDFのさまざまなレンダリング方法を利用してPDFを生成
SVG画像を含むPDFファイルを`SaveAs`メソッドで保存します。
指定された場所でPDFを確認

適切なサイズで SVG を PDF にレンダリングするにはどうすればよいですか?

多くのブラウザは、サイズ指定のないSVGを許容しています；ただし、当社のレンダリングエンジンには必要です。 IronPDFが使用するChromeレンダリングエンジンは、SVG要素を適切にレンダリングするために明確な寸法を必要とします。指定された寸法がない場合、SVGは最終的なPDFに表示されなかったり、予期しないサイズでレンダリングされる可能性があります。

IronPDFでSVGを扱う場合、適切なレンダリングを保証するためにいくつかのオプションがあります：

1.スタイル属性を使ったインラインSVG：style 属性で幅と高さを直接追加する 2.外部SVGファイル：URLまたはローカルファイルパスを介してSVGファイルを参照する 3.Base64エンコードされたSVG：SVGをBase64文字列としてHTMLに直接埋め込みます。

より高度なHTMLレンダリングオプションについては、レンダリングオプションの総合ガイドをご覧ください。

:path=/static-assets/pdf/content-code-examples/how-to/SVGs-render.cs

using IronPdf;

string html = "<img src='https://ironsoftware.com/img/svgs/new-banner-svg.svg' style='width:100px'>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.WaitFor.RenderDelay(1000);

PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("svgToPdf.pdf");

$vbLabelText $csharpLabel

生成されたPDFはどのように見えますか?

または、あるいは、SVGノードには明示的な幅と高さの属性が割り当てられている可能性があります。 CodePenでのSVGスタイリングの例も参照してください。

SVGをPDFにレンダリングする例

ローカルの SVG ファイルで作業する

ローカルのSVGファイルをPDFに変換する場合は、ファイルパスのアプローチを使用してください。この方法は、プロジェクトに保存されているSVGアセットでうまく機能します：

using IronPdf;
using System.IO;

// Load SVG file content
string svgPath = @"C:\assets\company-logo.svg";
string svgContent = File.ReadAllText(svgPath);

// Create HTML with embedded SVG
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Company Report</h1>
    <img src='file:///{svgPath}' class='logo' />
    <p>Annual financial summary with vector graphics.</p>
</body>
</html>";

// Configure renderer with custom settings
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generate PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("report-with-svg.pdf");

using IronPdf;
using System.IO;

// Load SVG file content
string svgPath = @"C:\assets\company-logo.svg";
string svgContent = File.ReadAllText(svgPath);

// Create HTML with embedded SVG
string html = $@"
<html>
<head>
    <style>
        body {{ margin: 20px; }}
        .logo {{ width: 200px; height: 100px; }}
    </style>
</head>
<body>
    <h1>Company Report</h1>
    <img src='file:///{svgPath}' class='logo' />
    <p>Annual financial summary with vector graphics.</p>
</body>
</html>";

// Configure renderer with custom settings
ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 10;
renderer.RenderingOptions.MarginBottom = 10;
renderer.RenderingOptions.PrintHtmlBackgrounds = true;

// Generate PDF
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("report-with-svg.pdf");

$vbLabelText $csharpLabel

埋め込み SVG のための Base64 エンコーディング

外部ファイル参照なしでHTMLに直接埋め込まれたSVGデータを必要とするシナリオでは、Base64エンコーディングが信頼できるソリューションを提供します。このアプローチについては、画像の埋め込みガイドで詳しく説明しています：

using IronPdf;
using System;

// SVG content as string
string svgContent = @"<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
    <circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' />
</svg>";

// Convert to Base64
byte[] svgBytes = System.Text.Encoding.UTF8.GetBytes(svgContent);
string base64Svg = Convert.ToBase64String(svgBytes);

// Create HTML with Base64 embedded SVG
string html = $@"
<html>
<body>
    <h2>Embedded SVG Example</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Render to PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("embedded-svg.pdf");

using IronPdf;
using System;

// SVG content as string
string svgContent = @"<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
    <circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' />
</svg>";

// Convert to Base64
byte[] svgBytes = System.Text.Encoding.UTF8.GetBytes(svgContent);
string base64Svg = Convert.ToBase64String(svgBytes);

// Create HTML with Base64 embedded SVG
string html = $@"
<html>
<body>
    <h2>Embedded SVG Example</h2>
    <img src='data:image/svg+xml;base64,{base64Svg}' style='width:150px;height:150px;' />
</body>
</html>";

// Render to PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("embedded-svg.pdf");

$vbLabelText $csharpLabel

SVGからPDFへの変換のベストプラクティス

1.常に寸法を指定する

SVGをPDFに変換する際に最もよくある問題は、寸法の欠落またはゼロ寸法です。常にSVG要素の幅と高さの値が明示されていることを確認してください。レスポンシブデザインの場合、ビューポート設定を使用してPDFレイアウトを制御することを検討してください。

2.レンダリング遅延のある複雑な SVG を処理する

アニメーションやJavaScriptを含む複雑なSVGファイルは、レンダリングに時間がかかる場合があります。完全なレンダリングを実現するには、RenderDelayオプションを使用してください。

renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 seconds

renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 seconds

$vbLabelText $csharpLabel

高度なJavaScriptの取り扱いについては、JavaScriptレンダリングガイドをご覧ください。

3.SVGファイルを最適化する

変換する前に、以下の方法でSVGファイルを最適化してください：

不要なメタデータの削除
パスの簡素化
一貫したレンダリングのためのテキストからパスへの変換
適切な圧縮の使用

4.クロスプラットフォームの互換性をテストする

SVGレンダリングは、オペレーティングシステムによって異なる場合があります。変換テスト

よくある SVG の問題のトラブルシューティング

PDFにSVGが表示されない

SVGが生成されたPDFに表示されない場合：

1.寸法が正しく設定されていることを確認する 2.ファイルパスまたはURLにアクセスできることを確認してください。 3.SVGファイルのMIMEタイプが適切であること。 4.ピクセルパーフェクトレンダリングガイドをご覧ください。

スケーリングと解決の問題

さまざまなスケールでの高品質なSVGレンダリング：

// Set custom DPI for better quality
renderer.RenderingOptions.DPI = 300;

// Use CSS transforms for scaling
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";

// Set custom DPI for better quality
renderer.RenderingOptions.DPI = 300;

// Use CSS transforms for scaling
string html = @"
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />";

$vbLabelText $csharpLabel

SVGにおけるフォントレンダリング</font

SVGにテキスト要素が含まれている場合は、フォントが適切に埋め込まれていることを確認してください。フォント管理とウェブフォントサポートについては、こちらをご覧ください。

高度な SVG 変換テクニック

複数の SVG をバッチ処理する

複数のSVGファイルを1つのPDFドキュメントに変換する場合：

using IronPdf;
using System.Collections.Generic;
using System.Text;

List<string> svgFiles = new List<string> 
{
    "chart1.svg",
    "chart2.svg",
    "diagram.svg"
};

StringBuilder htmlBuilder = new StringBuilder();
htmlBuilder.Append("<html><body>");

foreach(string svgFile in svgFiles)
{
    htmlBuilder.Append($@"
        <div style='page-break-after:always;'>
            <img src='{svgFile}' style='width:600px;height:400px;' />
        </div>");
}

htmlBuilder.Append("</body></html>");

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlBuilder.ToString());
pdf.SaveAs("multiple-svgs.pdf");

using IronPdf;
using System.Collections.Generic;
using System.Text;

List<string> svgFiles = new List<string> 
{
    "chart1.svg",
    "chart2.svg",
    "diagram.svg"
};

StringBuilder htmlBuilder = new StringBuilder();
htmlBuilder.Append("<html><body>");

foreach(string svgFile in svgFiles)
{
    htmlBuilder.Append($@"
        <div style='page-break-after:always;'>
            <img src='{svgFile}' style='width:600px;height:400px;' />
        </div>");
}

htmlBuilder.Append("</body></html>");

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlBuilder.ToString());
pdf.SaveAs("multiple-svgs.pdf");

$vbLabelText $csharpLabel

複数ページでの作業に関する詳細は、PDFのマージまたは分割ガイドをご覧ください。

次に何ができるのかを見てみましょうか？チュートリアルのページはこちらをご覧ください：追加機能. また、SVGを含むPDFにヘッダーとフッターを追加する方法や、文書をブランディングするためのカスタム透かしについてもご紹介します。

TextAnnotation と AddTextAnnotation を使用します

よくある質問