1. IronPDF
  2. 操作指南
  3. SVG圖形
如何使用 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 支援透過 HTML 轉 PDF 方法將 SVG 圖形渲染到 PDF 文件中。 SVG（可縮放向量圖形）檔案因其可縮放性和在任何尺寸下都能清晰呈現的特性而被廣泛用於製作徽標、圖標、插圖和圖表。將 SVG 檔案轉換為 PDF 檔案對於建立可用於列印的文件、存檔以及確保在不同平台上一致顯示至關重要。

注意：嵌入 SVG 時，請設定img元素的寬度和/或高度樣式屬性 - 否則，SVG 可能會縮小到零大小，並且不會出現在渲染的 PDF 中。

快速入門：輕鬆實現 SVG 轉 PDF

使用 IronPDF 在 C# 中將 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

最簡工作流程（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.內嵌 SVG 樣式屬性：直接在樣式屬性中加入寬度和高度。
2.外部 SVG 文件：透過 URL 或本機檔案路徑引用 SVG 文件

  1. 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 在不同作業系統上的渲染效果可能有所不同。 測試轉換率：
Windows 環境
Linux 系統
macOS 平台

解決常見的SVG問題

SVG 未顯示在 PDF 中

如果您的 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中的字體渲染

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

有關處理多頁的更多信息，請參閱我們的合併或分割 PDF 指南。

準備好要看看你還能做什麼了嗎？ 請查看我們的教學頁面：附加功能。 您還可以探索如何為包含 SVG 的 PDF添加頁首和頁腳，或了解如何為文件添加自訂浮水印以建立品牌形象。

  • 使用TextAnnotation和AddTextAnnotation

常見問題解答

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

IronPDF 使用 HTML to PDF 方法將 SVG 轉換為 PDF。只需將 SVG 嵌入具有明確寬度和高度樣式的 HTML img 標籤中，然後使用 IronPDF 的 ChromePdfRenderer 將 HTML 呈現成 PDF。關鍵是確保在 img 元素上設定適當的尺寸屬性。

為什麼我的 SVG 沒有出現在 PDF 中？

如果缺乏明確的寬度和高度規格，SVGs 可能無法出現在 IronPDF 所產生的 PDF 中。IronPdf 使用的 Chrome 渲染引擎要求通過樣式屬性或 img 標籤上的寬/高屬性設定尺寸。如果沒有這些屬性，SVG 可能會折疊為零大小。

嵌入 SVGs 進行 PDF 轉換有哪些不同的方法？

IronPDF 支援三種主要的 SVG 嵌入方法：1）內嵌 SVG，並具有寬度與高度的樣式屬性；2）透過 URL 或本機檔案路徑引用外部 SVG 檔案；以及 3）直接在 HTML 中嵌入 Base64 編碼的 SVG。所有方法都需要適當的尺寸規格。

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

是的，IronPDF 可以將本機 SVG 檔案轉換為 PDF。使用檔案路徑的方法，透過 img 標籤的 src 屬性來引用專案中儲存的 SVG 資產。切記要包含寬度和高度規格，以便正確呈現。

SVG 轉換成 PDF 應該使用何種渲染選項？

使用 IronPDF 將 SVG 轉換成 PDF 時，請使用 ChromePdfRenderer 並搭配適當的 RenderingOptions。一個常見的方法是使用 WaitFor.RenderDelay(1000) 加入一個 RenderDelay，以確保 SVG 在轉換前完全載入。這對於複雜的 SVG 或載入外部資源時有幫助。

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

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

柯蒂斯·週
柯蒂斯·週
  現在就和工程團隊聊天吧
技術撰稿人

Curtis Chau擁有卡爾頓大學電腦科學學士學位，專長於前端開發，精通Node.js、TypeScript、JavaScript和React。他熱衷於打造直覺美觀的使用者介面，喜歡使用現代框架，並擅長撰寫結構清晰、視覺效果出色的使用者手冊。

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

準備好開始了嗎？
Nuget 下載 17,012,929 | 版本： 2025.12 剛剛發布