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 標籤中，以確保正確渲染。

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

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

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

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

  1. 使用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.內嵌 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
Curtis Chau
  立即與工程團隊聊天
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位，專注於前端開發，擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面，喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外，Curtis 對物聯網 (IoT) 有著濃厚的興趣，探索將硬體和軟體結合的創新方式。在閒暇時間，他喜愛遊戲並構建 Discord 機器人，結合科技與創意的樂趣。

準備好開始了嗎？
Nuget 下載 17,803,474 | 版本： 2026.3 剛剛發布
Still Scrolling Icon

還在滾動嗎？

想快速取得證據？ PM > Install-Package IronPdf
運行範例看著你的HTML程式碼變成PDF檔。