1. IronPDF
  2. 操作指南
  3. SVG 圖形
如何使用 C# 將 SVG 轉換為 PDF

使用 C# 將 SVG 轉換為 PDF

Curtis Chau
Curtis Chau
更新:
This article was translated from English: Does it need improvement?
Translated
View the article in English

IronPDF 採用 HTML 轉 PDF 的方法將 SVG 圖形轉換為 PDF 文件——請將您的 SVG 嵌入 img 標籤中，並使用明確的 height 樣式，以確保正確渲染。

IronPDF 支援透過 HTML 轉 PDF 方法，將 SVG 圖形渲染至 PDF 文件中。 SVG（可縮放向量圖形）檔案因其可縮放性及在任何尺寸下皆能呈現清晰畫質的特性，廣泛應用於標誌、圖示、插圖及圖表。將 SVG 轉換為 PDF 對於製作可直接列印的文件、檔案歸檔，以及確保跨平台顯示的一致性至關重要。

注意：嵌入 SVG 時，請為 img 元素設定 width 和/或 height 樣式屬性——否則，該元素可能會縮減為零大小，並不會出現在渲染後的 PDF 中。

快速入門：輕鬆將 SVG 轉換為 PDF

使用 C# 透過 IronPDF 將 SVG 檔案轉換為 PDF。 此程式碼片段示範如何透過 HTML img 標籤並指定尺寸來嵌入 SVG，這是成功渲染的關鍵步驟。 請遵循本指南進行快速實作，確保您的 SVG 檔案能準確渲染並儲存為 PDF 檔案。

  1. using NuGet 套件管理員安裝 https://www.nuget.org/packages/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

簡化工作流程（5 個步驟）

  1. 安裝 IronPdf 函式庫以進行 SVG 轉 PDF 轉換
  2. 在 HTML 中使用 img 標籤來載入 SVG 圖片
  3. 利用 IronPdf 的不同渲染方法來產生 PDF
  4. 使用 SaveAs 方法儲存包含 SVG 圖像的 PDF 檔案
  5. 請查閱指定位置的 PDF 檔案

如何將 SVG 渲染為 PDF 並保持適當尺寸？

許多瀏覽器能支援未指定尺寸的 SVG 檔案； 然而，我們的渲染引擎需要這些元件。 IronPDF 所使用的 Chrome 渲染引擎需要明確的尺寸參數，才能正確渲染 SVG 元素。 若未指定尺寸，SVG 圖檔可能不會出現在最終的 PDF 中，或可能以預期之外的尺寸呈現。

在 IronPDF 中處理 SVG 檔案時，您有多種選項可確保正確的渲染效果：

  1. 帶有 style 屬性的內嵌 SVG：請直接在 style 屬性中加入 width 和 height
  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");
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")
$vbLabelText   $csharpLabel

生成的 PDF 檔案長什麼樣子？

此外，或作為替代方案，SVG 節點可被明確賦予 width 和 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")
$vbLabelText   $csharpLabel

嵌入式 SVG 的 Base64 編碼

對於需要將 SVG 資料直接嵌入 HTML 中且不引用外部檔案的情境，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")
$vbLabelText   $csharpLabel

SVG 轉 PDF/A 的最佳實務

1. 務必明確標示尺寸

將 SVG 轉換為 PDF 時最常見的問題是尺寸缺失或為零。 請務必確保您的 SVG 元素具有明確的 width 和 height 值。 針對響應式設計，請考慮使用視口設定來控制 PDF 版面配置。

2. 處理具有渲染延遲的複雜 SVG

包含動畫或 JavaScript 的複雜 SVG 檔案可能需要額外的渲染時間。請使用 RenderDelay 選項以確保完整渲染：

renderer.RenderingOptions.WaitFor.RenderDelay(2000); // Wait 2 seconds
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 問題的疑難排解

SVG 無法顯示於 PDF 中

若您的 SVG 未顯示在生成的 PDF/A 中：

  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);' />";
' 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);' />"
$vbLabelText   $csharpLabel

SVG 中的字型渲染

當 SVG 檔案包含文字元素時，請確保字型已正確嵌入。 進一步了解字型管理與網頁字型支援。

進階 SVG 轉換技術

批次處理多個 SVG 檔案

若要將多個 SVG 檔案轉換為單一 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")
$vbLabelText   $csharpLabel

如需更多關於處理多頁文件的資訊，請參閱我們的 PDF 合併或分割指南。

準備好探索更多可能性了嗎？ 請點此查看我們的教學頁面：進階功能。 您亦可探索如何在包含 SVG 的 PDF 檔案中添加頁首與頁尾，或瞭解如何透過自訂浮水印為文件建立品牌識別。

  • 使用 TextAnnotation 和 AddTextAnnotation

常見問題

如何在 C# 中將 SVG 轉換為 PDF？

IronPDF 透過 HTML 轉 PDF 的方法將 SVG 轉換為 PDF。只需將您的 SVG 嵌入 HTML 的 img 標籤中，並明確設定寬度和高度樣式，然後使用 IronPDF 的 ChromePdfRenderer 將 HTML 渲染為 PDF。關鍵在於確保 img 元素上設定了正確的尺寸屬性。

為什麼我的 SVG 沒有顯示在 PDF 中？

若 SVG 檔案未明確指定寬度和高度，在 IronPDF 生成的 PDF 中可能無法顯示。IronPDF 所使用的 Chrome 渲染引擎要求必須透過樣式屬性，或透過 img 標籤上的 width/height 屬性來設定尺寸。若未設定這些屬性，SVG 可能會縮減為零大小。

PDF 轉換時，有哪些不同的 SVG 嵌入方法？

IronPDF 支援三種主要嵌入 SVG 的方法：1) 內嵌 SVG 並使用 style 屬性指定寬度和高度，2) 透過 URL 或本地檔案路徑引用外部 SVG 檔案，以及 3) 直接將 Base64 編碼的 SVG 嵌入 HTML 中。所有方法均需正確指定尺寸規格。

我可以將本地的 SVG 檔案轉換為 PDF 嗎？

是的，IronPDF 可以將本機的 SVG 檔案轉換為 PDF。請使用檔案路徑方法，透過 img 標籤的 src 屬性引用儲存於專案中的 SVG 資源。請記得包含寬度和高度的規格，以確保正確的渲染效果。

進行 SVG 轉 PDF 轉換時，應使用哪些渲染選項？

using IronPDF 將 SVG 轉換為 PDF 時，請搭配 ChromePdfRenderer 並設定適當的 RenderingOptions。常見的做法是透過 WaitFor.RenderDelay(1000) 加入 RenderDelay，以確保 SVG 在轉換前已完全載入。此舉對於處理複雜的 SVG 或載入外部資源時特別有用。

如何將轉換後的 SVG 儲存為 PDF 檔案？

using IronPDF 的 ChromePdfRenderer 渲染包含 SVG 的 HTML 後，請透過 SaveAs 方法儲存 PDF 檔案。只需對渲染後的 PDF 物件呼叫 SaveAs("filename.pdf")，即可將其儲存至指定位置。

Curtis Chau
Curtis Chau
  立即與工程團隊聯繫
技術撰稿人

Curtis Chau 擁有卡爾頓大學（Carleton University）的電腦科學學士學位，專精於前端開發，並精通 Node.js、TypeScript、JavaScript 及 React。他熱衷於打造直觀且美觀的用戶介面，喜歡運用現代框架，並創建結構完善、視覺上吸引人的手冊。

除了開發工作之外，Curtis 對物聯網（IoT）抱有濃厚興趣，致力於探索整合硬體與軟體的創新方法。閒暇時，他喜歡玩遊戲和開發 Discord 機器人，將對科技的熱愛與創意相結合。

準備開始了嗎？
Nuget 下載 19,014,616 | 版本： 2026.5 just released
Still Scrolling Icon

還在往下捲動嗎？

想要快速確認成果嗎？ PM > Install-Package IronPdf
執行範例 觀看您的 HTML 轉為 PDF。