C#でSVGをPDFに変換する
IronPDFはSVGグラフィックをPDFドキュメントに変換します。これはHTMLからPDFへのアプローチを使用するもので、heightスタイルを明示的に指定します。
IronPDFはSVGグラフィックをHTMLからPDFに変換する方法をサポートしています。 SVG(Scalable Vector Graphics)ファイルは、スケーラビリティがあり、どのサイズでも鮮明にレンダリングできるため、ロゴ、アイコン、イラスト、チャートなどに広く使用されています。SVGをPDFに変換することは、印刷用ドキュメントの作成、アーカイブ目的、異なるプラットフォーム間での一貫した表示を保証するために不可欠です。
注意: SVGを埋め込む際には、heightスタイル属性を設定してください。そうしないと、サイズがゼロに折りたたまれレンダリングされたPDFに表示されない可能性があります。
C#でIronPDFを使ってSVGファイルをPDFに変換する。 このスニペットは、指定された寸法でHTML imgタグを介してSVGを埋め込むことを示しています。これは成功したレンダリングのための重要なステップです。 SVGが正確にレンダリングされ、PDFとして保存されることを保証する迅速な実装のために、このガイドに従ってください。
-
1Install IronPDF with NuGet Package Manager
-
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");Call New IronPdf.ChromePdfRenderer With { .RenderingOptions = New IronPdf.Rendering.ChromePdfRenderOptions With { .WaitFor = IronPdf.Rendering.WaitFor.RenderDelay(1000) } }.RenderHtmlAsPdf("<img src='https://example.com/logo.svg' style='width:100px;height:100px;'>").SaveAs("svgToPdf.pdf")Call New IronPdf.ChromePdfRenderer With { .RenderingOptions = New IronPdf.Rendering.ChromePdfRenderOptions With { .WaitFor = IronPdf.Rendering.WaitFor.RenderDelay(1000) } }.RenderHtmlAsPdf("<img src='https://example.com/logo.svg' style='width:100px;height:100px;'>").SaveAs("svgToPdf.pdf") -
3実際の環境でテストするためにデプロイする
今日プロジェクトで IronPDF を使い始めましょう無料トライアル
最小限のワークフロー(5ステップ)
- SVGからPDFへの変換のために
IronPdfライブラリをインストールする - HTMLで
imgタグを使用してSVG画像をインポートする - PDFを生成するために
IronPdfでの異なるレンダリングメソッドを利用する - SVG画像を含むPDFファイルを
SaveAsメソッドで保存します。 - 指定された場所でPDFを確認
適切なサイズで SVG を PDF にレンダリングするにはどうすればよいですか?
多くのブラウザは、サイズ指定のないSVGを許容しています; ただし、当社のレンダリングエンジンには必要です。 IronPDFが使用するChromeレンダリングエンジンは、SVG要素を適切にレンダリングするために明確な寸法を必要とします。 指定された寸法がない場合、SVGは最終的なPDFに表示されなかったり、予期しないサイズでレンダリングされる可能性があります。
IronPDFでSVGを扱う場合、適切なレンダリングを保証するためにいくつかのオプションがあります:
- スタイル属性を持つインラインSVG: スタイル属性に
heightを直接追加します。 - 外部SVGファイル:URLまたはローカルファイルパスを介してSVGファイルを参照します
- Base64エンコードされたSVG:SVGをHTMLのBase64文字列として直接埋め込みます
より高度なHTMLレンダリングオプションについては、レンダリングオプションの総合ガイドをご覧ください。
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");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");Imports IronPdf
Private html As String = "<img src='https://ironsoftware.com/img/svgs/new-banner-svg.svg' style='width:100px'>"
Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("svgToPdf.pdf")Imports IronPdf
Private html As String = "<img src='https://ironsoftware.com/img/svgs/new-banner-svg.svg' style='width:100px'>"
Private renderer As New ChromePdfRenderer()
renderer.RenderingOptions.WaitFor.RenderDelay(1000)
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("svgToPdf.pdf")生成されたPDFはどのように見えますか?
または、または代わりに、SVGノードには明示的なheight属性を割り当てることができます。 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");Imports IronPdf
Imports System.IO
' Load SVG file content
Dim svgPath As String = "C:\assets\company-logo.svg"
Dim svgContent As String = File.ReadAllText(svgPath)
' Create HTML with embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.MarginTop = 10
renderer.RenderingOptions.MarginBottom = 10
renderer.RenderingOptions.PrintHtmlBackgrounds = True
' Generate PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("report-with-svg.pdf")Imports IronPdf
Imports System.IO
' Load SVG file content
Dim svgPath As String = "C:\assets\company-logo.svg"
Dim svgContent As String = File.ReadAllText(svgPath)
' Create HTML with embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
renderer.RenderingOptions.MarginTop = 10
renderer.RenderingOptions.MarginBottom = 10
renderer.RenderingOptions.PrintHtmlBackgrounds = True
' Generate PDF
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("report-with-svg.pdf")埋め込み 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");Imports IronPdf
Imports System
Imports System.Text
' SVG content as string
Dim svgContent As String = "<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
Dim svgBytes As Byte() = Encoding.UTF8.GetBytes(svgContent)
Dim base64Svg As String = Convert.ToBase64String(svgBytes)
' Create HTML with Base64 embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("embedded-svg.pdf")Imports IronPdf
Imports System
Imports System.Text
' SVG content as string
Dim svgContent As String = "<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
Dim svgBytes As Byte() = Encoding.UTF8.GetBytes(svgContent)
Dim base64Svg As String = Convert.ToBase64String(svgBytes)
' Create HTML with Base64 embedded SVG
Dim html As String = $"
<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
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("embedded-svg.pdf")SVGからPDFへの変換のベストプラクティス
1.常に寸法を指定する
SVGをPDFに変換する際に最もよくある問題は、寸法の欠落またはゼロ寸法です。 常にSVG要素には明示的なheight値を持たせてください。 レスポンシブデザインの場合、ビューポート設定を使用してPDFレイアウトを制御することを検討してください。
2.レンダリング遅延のある複雑な SVG を処理する
アニメーションやJavaScriptを含む複雑なSVGファイルには追加のレンダリング時間が必要な場合があります。完全なレンダリングを確保するためにRenderDelayオプションを使用してください。
renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 secondsrenderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 secondsrenderer.RenderingOptions.WaitFor.RenderDelay(2000) ' Wait 2 secondsrenderer.RenderingOptions.WaitFor.RenderDelay(2000) ' Wait 2 seconds高度なJavaScriptの取り扱いについては、JavaScriptレンダリングガイドをご覧ください。
3.SVGファイルを最適化する
変換する前に、以下の方法でSVGファイルを最適化してください:
- 不要なメタデータを削除する
- パスを単純化する
- 一貫したレンダリングのためにテキストをパスに変換する
- 適切な圧縮の使用
4.クロスプラットフォームの互換性をテストする
SVGレンダリングは、オペレーティングシステムによって異なる場合があります。 変換テスト
よくある SVG の問題のトラブルシューティング
PDFにSVGが表示されない
SVGが生成されたPDFに表示されない場合:
- 寸法が正しく設定されていることを確認する
- ファイルパスまたはURLがアクセス可能であることを確認する
- 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);' />";' Set custom DPI for better quality
renderer.RenderingOptions.DPI = 300
' Use CSS transforms for scaling
Dim html As String = "
<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
Dim html As String = "
<img src='logo.svg' style='width:200px;height:200px;transform:scale(1.5);' />"SVGにおけるフォントレンダリング
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");Imports IronPdf
Imports System.Collections.Generic
Imports System.Text
Dim svgFiles As New List(Of String) From {
"chart1.svg",
"chart2.svg",
"diagram.svg"
}
Dim htmlBuilder As New StringBuilder()
htmlBuilder.Append("<html><body>")
For Each svgFile As String In svgFiles
htmlBuilder.Append($"
<div style='page-break-after:always;'>
<img src='{svgFile}' style='width:600px;height:400px;' />
</div>")
Next
htmlBuilder.Append("</body></html>")
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlBuilder.ToString())
pdf.SaveAs("multiple-svgs.pdf")Imports IronPdf
Imports System.Collections.Generic
Imports System.Text
Dim svgFiles As New List(Of String) From {
"chart1.svg",
"chart2.svg",
"diagram.svg"
}
Dim htmlBuilder As New StringBuilder()
htmlBuilder.Append("<html><body>")
For Each svgFile As String In svgFiles
htmlBuilder.Append($"
<div style='page-break-after:always;'>
<img src='{svgFile}' style='width:600px;height:400px;' />
</div>")
Next
htmlBuilder.Append("</body></html>")
Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(htmlBuilder.ToString())
pdf.SaveAs("multiple-svgs.pdf")複数ページでの作業に関する詳細は、PDFのマージまたは分割ガイドをご覧ください。
次に何ができるのかを見てみましょうか? チュートリアルのページはこちらをご覧ください:追加機能. また、SVGを含むPDFにヘッダーとフッターを追加する方法や、文書をブランディングするためのカスタム透かしについてもご紹介します。
AddTextAnnotationを使用
よくある質問
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")を呼び出すだけで、指定した場所に保存されます。
How does IronPDF handle font rendering in SVGs?
IronPDF requires that fonts used within SVGs are properly embedded or referenced to ensure correct text rendering. You can manage fonts through IronPDF's font management features to guarantee consistency.
What are best practices for converting SVGs to PDF?
Best practices include specifying SVG dimensions, optimizing SVG files by simplifying paths and removing unnecessary metadata, and testing across different platforms to ensure consistent rendering with IronPDF.
How can I convert multiple SVG files into a single PDF using IronPDF?
To convert multiple SVGs into a single PDF, use IronPDF to embed each SVG in a separate HTML element with a page-break style for continuous PDF generation. This facilitates batch processing of SVGs.
Does IronPDF support responsive design for SVG to PDF conversion?
Yes, IronPDF supports responsive design elements by using viewport settings and CSS transformations. This allows for scalable and dynamically adjusted PDF layouts based on the SVG content you are converting.
Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。