C# を使用して SVG を PDF に変換する方法

C#でSVGをPDFに変換する

This article was translated from English: Does it need improvement?
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スタイル属性を設定してください。

見出し:2(クイックスタート: 簡単なSVGからPDFへの変換)

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

Nuget Icon今すぐ NuGet で PDF を作成してみましょう:

  1. NuGet パッケージ マネージャーを使用して IronPDF をインストールします

    PM > Install-Package IronPdf

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

    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");
  3. 実際の環境でテストするためにデプロイする

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

適切なサイズで 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にヘッダーとフッターを追加する方法や、文書をブランディングするためのカスタム透かしについてもご紹介します。

  • TextAnnotationAddTextAnnotationを使用してください。

よくある質問

C#でSVGをPDFに変換するには?

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

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

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

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

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

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

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

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

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

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

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

カーティス・チャウ
テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

開発以外にも、CurtisはIoT(Internet of Things)への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか?
Nuget ダウンロード 17,012,929 | バージョン: 2025.12 リリース