如何使用 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 元素的 width 和/或 height 样式属性,否则,它可能会折叠为零大小,并且不会出现在渲染的 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

如何以正确的尺寸将 SVG 渲染为 PDF?

许多浏览器允许使用 SVG,但没有尺寸规格; 然而,我们的渲染引擎需要它们。 IronPDF 使用的 Chrome 渲染引擎需要明确的尺寸才能正确渲染 SVG 元素。 如果没有指定尺寸,SVG 可能不会出现在最终的 PDF 中,或者在渲染时出现意外尺寸。

在 IronPDF 中处理 SVGs 时,有几种方法可以确保正确渲染:

1.使用样式属性的内联 SVG:直接在样式属性中添加宽度和高度 2.外部 SVG 文件:通过 URL 或本地文件路径引用 SVG 文件 3.Base64 Encoded SVGs:将 SVGs 作为 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 编码

对于需要将 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");
$vbLabelText   $csharpLabel

将 SVG 转换为 PDF 的最佳实践

1.始终指定尺寸

将 SVG 转换为 PDF 时最常见的问题是尺寸缺失或为零。 始终确保您的 SVG 元素具有明确的宽度和高度值。 对于响应式设计,可考虑使用 viewport 设置 来控制 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 问题的疑难解答

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 包含文本元素时,确保正确嵌入字体。 了解有关 字体管理web 字体支持的更多信息。

高级 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 中添加页眉和页脚,或了解自定义水印,以便为您的文档打上品牌。

  • 使用 TextAnnotationAddTextAnnotation

常见问题解答

如何用 C# 将 SVG 转换为 PDF?

IronPDF 使用 HTML 转 PDF 的方法将 SVG 转换为 PDF。只需将 SVG 嵌入带有明确宽度和高度样式的 HTML img 标签中,然后使用 IronPDF 的 ChromePdfRenderer 将 HTML 呈现为 PDF。关键是要确保在 img 元素上设置适当的尺寸属性。

为什么我的 SVG 没有出现在 PDF 中?

如果缺乏明确的宽度和高度规范,IronPDF 生成的 PDF 中可能不会出现 SVG。IronPDF 使用的 Chrome 渲染引擎要求通过样式属性或 img 标签上的宽度/高度属性来设置尺寸。如果没有这些属性,SVG 可能会折叠为零。

嵌入 SVGs 进行 PDF 转换的不同方法有哪些?

IronPDF 支持三种主要的 SVG 嵌入方法:1)带有宽度和高度样式属性的内联 SVG;2)通过 URL 或本地文件路径引用的外部 SVG 文件;3)直接嵌入 HTML 中的 Base64 编码 SVG。所有方法都需要适当的尺寸规格。

能否将本地 SVG 文件转换为 PDF?

是的,IronPDF 可以将本地 SVG 文件转换为 PDF。使用文件路径方法,通过 img 标签的rc 属性引用存储在项目中的 SVG 资产。切记要包含宽度和高度规格,以便正确渲染。

将 SVG 转换为 PDF 时应使用哪些渲染选项?

使用 IronPDF 将 SVG 转换为 PDF 时,请使用带有适当 RenderingOptions 的 ChromePdfRenderer。一种常见的方法是使用 WaitFor.RenderDelay(1000)添加渲染延迟(RenderDelay),以确保 SVG 在转换前完全加载。这有助于处理复杂的 SVG 或加载外部资源。

如何将转换后的 SVG 保存为 PDF 文件?

使用 IronPDF 的 ChromePdfRenderer 渲染包含 SVG 的 HTML 后,使用 SaveAs 方法保存 PDF 文件。只需在渲染的 PDF 对象上调用 SaveAs("filename.pdf") 即可将其保存到指定位置。

Curtis Chau
技术作家

Curtis Chau 拥有卡尔顿大学的计算机科学学士学位,专注于前端开发,精通 Node.js、TypeScript、JavaScript 和 React。他热衷于打造直观且美观的用户界面,喜欢使用现代框架并创建结构良好、视觉吸引力强的手册。

除了开发之外,Curtis 对物联网 (IoT) 有浓厚的兴趣,探索将硬件和软件集成的新方法。在空闲时间,他喜欢玩游戏和构建 Discord 机器人,将他对技术的热爱与创造力相结合。

准备开始了吗?
Nuget 下载 17,803,474 | 版本: 2026.3 刚刚发布
Still Scrolling Icon

还在滚动吗?

想快速获得证据? PM > Install-Package IronPdf
运行示例看着你的HTML代码变成PDF文件。