Helpful resources ▼
  Download   Pricing   Buy

在 C# 中将 SVG 转为图像 – JPG、PNG、WebP、BMP、TIFF 和 GIF

要在 C# 中将 SVG 转为 PNG、JPG、WebP、BMP、TIFF 或 GIF，请使用 SVGDocument 加载 SVG，配置 ImageSaveOptions，在需要时设置输出 Format，然后调用 Converter.ConvertSVG()。当您需要显式渲染控制时，请使用 RenderTo() 和 ImageDevice。

本文介绍如何将 SVG 转换为 JPG、PNG、WebP、BMP、TIFF 和 GIF 等图像文件格式。图像文件转换常用于网站开发、图形设计、摄影和其他场景。选择哪种图像格式取决于图像将用于印刷、电子邮件发送，还是放到网页中。

本文概述 Aspose.SVG for .NET 的转换功能，并说明如何使用 Converter 和 SVGDocument 类完成 SVG 到图像的转换。完整的转换路线图请参阅 在 C# 中转换 SVG 文件 和 支持的文件格式。

SVG 到图像的转换方法

Aspose.SVG for .NET 支持直接转换和基于渲染设备的工作流。两种方法都可以生成 raster 输出，但适合不同的应用程序设计。

场景推荐 API使用原因
将 SVG 文件、stream、URL 或文档转换为图像Converter.ConvertSVG() 和 ImageSaveOptions这是常见 SVG 到 PNG、JPG、WebP、BMP、TIFF 或 GIF 转换的默认选择。
通过图像设备渲染已有文档SVGDocument.RenderTo() 和 ImageDevice、ImageRenderingOptions当应用程序已控制渲染设备或需要显式渲染设置时很有用。
设置图像格式、背景、页面大小、分辨率、抗锯齿或 TIFF 压缩ImageSaveOptions 或 ImageRenderingOptions这些选项可在不修改源 SVG 的情况下控制 raster 输出。
在 Web、批处理或云工作流中转换 SVGSVGDocument 加基于 stream 的输入和输出有助于避免不必要的临时文件，并让错误处理更容易。

应选择哪种图像格式？

输出格式最适合说明
PNG图标、UI 图形、截图、需要透明度的图形无损输出和透明背景是选择 PNG 的常见原因。
JPG/JPEG照片或包含嵌入式照片图像的 SVG 内容不保留透明度；转换透明 SVG 内容时请设置 BackgroundColor。请参阅 更改 SVG 背景颜色。
WebP偏好较小 raster 文件的 Web 交付当消费环境支持 WebP 时，适合面向 Web 的输出。
BMP简单的未压缩 raster 输出文件通常很大，很少是 Web 交付的最佳选择。
TIFF打印、扫描、归档和多工具出版工作流当文件大小重要时，请使用压缩设置。
GIF简单索引色输出和旧式 Web 工作流它不是 SVG 动画渲染的替代方案；当下游系统要求 GIF 时使用。

在线 SVG 转换器

您可以在线或通过编程方式将 SVG 转换为图像和其他常用格式。试用 Aspose.SVG API 功能并实时转换 SVG。请从本地文件系统加载 SVG，选择输出格式并运行示例。在示例中，保存选项使用默认设置。您会立即得到单独文件形式的结果。

如果您想通过编程方式将 SVG 转换为图像格式，请参阅以下转换场景和 C# 示例。

将 SVG 转为 JPG

JPG 是最常用的图像格式之一。它的特点是在压缩过程中可以控制质量损失，因此广泛用于存储和通过 Web 发送数字图形内容，例如照片、扫描副本和数字化图片。使用 Aspose.SVG，您可以通过编程方式将 SVG 转为 JPG、PNG、BMP、GIF 或 TIFF，并完全控制大量转换参数。

使用 ConvertSVG() 方法

使用 ConvertSVG() 方法是将 SVG 转换为各种常用格式的最常见方式。以下代码片段展示如何将 SVG 转为 JPG：

1using System.IO;
2using Aspose.Svg.Saving;
3using Aspose.Svg.Converters;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to JPG in C# using ImageSaveOptions
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-edited.svg")))
 5{
 6    // Initialize ImageSaveOptions
 7    ImageSaveOptions saveOptions = new ImageSaveOptions(ImageFormat.Jpeg);
 8
 9    // Convert SVG to JPG
10    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "owl-edited.jpg"));
11}
Example-ConvertSvgToJpg.cs hosted with ❤ by GitHub

下图展示 owl-edited.jpg 文件。

owl-edited.svg 文件渲染为 JPG

在 使用 CSS 选择器编辑 SVG 一文中，您可以看到如何用 CSS 选择器编辑原始 owl.svg 文件的 C# 示例。

使用 RenderTo() 方法

下面看看如何使用 RenderTo() 方法将文档从 SVG 转换为 JPG：

以下示例展示如何为 SVG 到 JPG 转换应用 Format 和 UseAntialiasing 属性：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Render SVG to JPEG in C# with and without antialiasing
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl.svg")))
 5{
 6    // Set Format and UseAntialiasing for jpgOptions1
 7    ImageRenderingOptions jpegOptions1 = new ImageRenderingOptions(ImageFormat.Jpeg);
 8    jpegOptions1.UseAntialiasing = true;
 9
10    // Set Format and UseAntialiasing for jpgOptions2
11    ImageRenderingOptions jpegOptions2 = new ImageRenderingOptions(ImageFormat.Jpeg);
12    jpegOptions2.UseAntialiasing = false;
13
14    // Initialize an instance of the ImageDevice class
15    using (IDevice device = new ImageDevice(jpegOptions1, Path.Combine(OutputDir, "owl_out1.jpg")))
16    {
17        // Render SVG to JPG
18        document.RenderTo(device);
19    }
20    using (IDevice device = new ImageDevice(jpegOptions2, Path.Combine(OutputDir, "owl_out2.jpg")))
21    {
22        document.RenderTo(device);
23    }
24}
Example-ConvertSvgToJpgUsingRenderToMethod.cs hosted with ❤ by GitHub

ImageRenderingOptions() 构造函数会初始化 ImageRenderingOptions 类的实例，并将其传递给 ImageDevice() 构造函数。 ImageDevice(options, file) 构造函数接收 options 和 file，并创建 ImageDevice 类的实例。 RenderTo(device) 方法接收 ImageDevice 实例并将 SVG 渲染为 JPG。

ImageRenderingOptions 类提供多种属性，可让您完全控制广泛的参数，并改进 SVG 到 JPG 的转换过程。Format 属性设置图像格式。默认情况下，该属性为 Png。要将 SVG 转为 JPG，必须使用 ImageFormat.Jpeg。

生成图像的片段

在上面的示例中，我们使用不同的 UseAntialiasing 值将 SVG 文件 owl.svg 转为 JPG。图中展示放大 250% 的 JPG 图像片段：a) UseAntialiasing 的值为 true；b) UseAntialiasing 的值为 false。

当您想提高应用程序中已渲染形状、文本和图像的视觉质量时，请使用 UseAntialiasing = true，特别是在清晰度和平滑边缘非常重要的情况下。启用抗锯齿会通过混合边缘周围像素的颜色来平滑锯齿边缘，从而获得更柔和、更精细的外观。

虽然 UseAntialiasing = true 可提供更好的视觉质量，但也可能增加处理时间。对于渲染速度优先的应用程序，设置 UseAntialiasing = false 可能更合适。

ImageSaveOptions 类

Aspose.SVG 允许使用默认或自定义保存选项将 SVG 转换为图像文件格式。使用 ImageSaveOptions 可以自定义渲染过程。例如，您可以指定图像格式、页面大小、边距、背景颜色等。

属性说明
Compression设置 TIFF 压缩。默认情况下，此属性为 LZW。
CSS获取用于配置 CSS 属性处理的 CssOptions 对象。
Format设置 ImageFormat，即 JPG、PNG、WebP、BMP、TIFF 或 GIF。默认情况下，此属性为 PNG。
BackgroundColor设置用于填充背景的颜色。默认情况下，此属性为 Transparent。
PageSetup获取页面设置对象，并用它配置输出页面集。
HorizontalResolution设置输出图像的水平分辨率，单位为每英寸像素。默认值为 300 dpi。
VerticalResolution设置输出图像的垂直分辨率，单位为每英寸像素。默认值为 300 dpi。
UseAntialiasing指定是否使用抗锯齿。默认情况下启用抗锯齿。
Text获取用于配置文本渲染的 TextOptions 对象。

注意：通过 ImageSaveOptions 类实现的选项继承自 ImageRenderingOptions 类。

将 SVG 转为 PNG

PNG 格式使用无损压缩算法来存储 raster 图像。它只支持 RGB 颜色模型，并非为图像印刷而设计。PNG 广泛用于通过网络传输图片，以及在网页和云盘存储库中显示照片和图形。

使用 ConvertSVG() 方法

以下代码片段展示如何从头准备 SVG 文件并将其转换为 PNG：

以下示例展示如何使用 ImageSaveOptions 并通过自定义保存选项将 SVG 转为 PNG：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Saving;
4using Aspose.Svg.Converters;
 1// Convert SVG to PNG in C# with a custom background color
 2
 3// Prepare SVG code and save it to a file
 4string code = "<svg xmlns='http://www.w3.org/2000/svg'>" +
 5              "<circle cx='100' cy='150' r='50' stroke='#2F4F4F' stroke-width='4' fill='#FF7F50' />" +
 6              "<circle cx='180' cy='200' r='60' stroke='#2F4F4F' stroke-width='4' fill='#008B8B' />" +
 7              "</svg>";
 8File.WriteAllText("example.svg", code);
 9
10// Initialize an SVG document from the file
11using (SVGDocument document = new SVGDocument("example.svg"))
12{
13    // Initialize an instance of the ImageSaveOptions class and set the BackgroundColor property
14    ImageSaveOptions saveOptions = new ImageSaveOptions();
15    saveOptions.BackgroundColor = System.Drawing.Color.Gainsboro;
16
17    // Convert SVG to PNG
18    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "output.png"));
19}
Example-ConvertSvgToPngWithImageSaveOptions.cs hosted with ❤ by GitHub

在该示例中， ImageSaveOptions() 构造函数会初始化 ImageSaveOptions 类的实例，并将其传递给 ConvertSVG() 方法。 ConvertSVG() 方法接收 document、saveOptions 和输出文件路径，并执行 SVG 到 PNG 的转换。

注意：转换为 PNG 时不需要指定 Format 属性。 ImageSaveOptions() 构造函数默认使用 Png 作为图像格式。

使用 RenderTo() 方法

下面看看如何使用 RenderTo() 方法将 SVG 转换为 PNG：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Render SVG to PNG in C# using ImageDevice
 2
 3// Prepare a path to a source SVG file
 4string documentPath = Path.Combine(DataDir, "snowflake.svg");
 5
 6// Initialize an SVG document from the file
 7using (SVGDocument document = new SVGDocument(documentPath))
 8{
 9    // Create the ImageDevice, set image Format and specify an output file to render
10    using (IDevice device = new ImageDevice(new ImageRenderingOptions(), Path.Combine(OutputDir, "snowflake.png")))
11    {
12        // Render SVG to PNG
13        document.RenderTo(device);
14    }
15}
Example-ConvertSvgToPngViaRenderToMethod.cs hosted with ❤ by GitHub

ImageRenderingOptions() 构造函数会初始化 ImageRenderingOptions 类的实例，并将其传递给 ImageDevice() 构造函数。 ImageDevice(options, file) 构造函数接收 options 和 file，并创建 ImageDevice 类的实例。 RenderTo(device) 方法接收 ImageDevice 实例并将 SVG 渲染为 PNG。

下图展示 snowflake.png 文件。

snowflake.svg 文件渲染为 PNG

将 SVG 转为 BMP

BMP 图像文件会保存图像质量，并在不压缩的情况下为每个像素存储颜色数据，但文件体积较大，因此不适合 Web 使用。该格式也不适合印前制作，因为它仅限于 RGB。

Aspose.SVG API 可以通过多个阶段将文档从 SVG 转换为 BMP 保存格式：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to BMP in C# using ImageDevice
 2
 3// Open a source SVG document
 4using (SVGDocument document = new SVGDocument(documentPath))
 5{
 6    // Create ImageDevice, set image Format and specify an output file to render
 7    using (IDevice device = new ImageDevice(new ImageRenderingOptions(ImageFormat.Bmp), Path.Combine(OutputDir, "conclusion_out.bmp")))
 8    {
 9        // Render SVG to BMP
10        document.RenderTo(device);
11    }
12}
Example-ConvertSvgToBmp.cs hosted with ❤ by GitHub

ImageRenderingOptions() 构造函数会初始化 ImageRenderingOptions 类的实例，并将其传递给 ImageDevice() 构造函数。 ImageDevice(options, file) 构造函数接收 options 和 file，并创建 ImageDevice 类的实例。 RenderTo(device) 方法接收 ImageDevice 实例并将 SVG 渲染为 BMP。

将 SVG 转为 TIFF

TIFF 是一种用于存储 raster 图形图像的格式，支持丰富的颜色范围。TIFF 被扫描、传真、文字处理、光学字符识别、图像处理和页面排版应用程序广泛支持，也常用于印刷和杂志胶印。

Aspose.SVG API 可以通过多个阶段将文档从 SVG 转换为 TIFF 保存格式：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Rendering;
4using Aspose.Svg.Rendering.Image;
 1// Convert SVG to TIFF in C# with custom settings
 2
 3// Open a source SVG document
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "conclusion.svg")))
 5{
 6    // Initialize an instance of the ImageRenderingOptions class and set the Format and Compression properties
 7    ImageRenderingOptions tiffOptions = new ImageRenderingOptions(ImageFormat.Tiff);
 8    tiffOptions.Compression = Compression.None;
 9
10    // Initialize an instance of the ImageDevice class and specify an output file to render
11    using (IDevice device = new ImageDevice(tiffOptions, Path.Combine(OutputDir, "conclusion.tiff")))
12    {
13        // Render SVG to TIFF
14        document.RenderTo(device);
15    }
16}
Example-ConvertSvgToTiff.cs hosted with ❤ by GitHub

ImageRenderingOptions() 构造函数会初始化 ImageRenderingOptions 类的实例，并将其传递给 ImageDevice() 构造函数。 ImageDevice(options, file) 构造函数接收 options 和 file，并创建 ImageDevice 类的实例。 RenderTo(device) 方法接收 ImageDevice 实例并将 SVG 渲染为 TIFF。

ImageRenderingOptions 类提供多种属性，可让您完全控制广泛的参数，并改进 SVG 到 TIFF 的转换过程。例如，Compression 属性允许设置 TIFF 文件格式的压缩方式。在上面的示例中，我们设置了 Compression.None。

将 SVG 转为 GIF

GIF 是一种常用图像格式，支持动画图像，并经常用于 Web 发布。以下代码片段展示如何使用 Aspose.SVG for .NET API 将 SVG 转为 GIF：

以下示例展示如何使用 ImageSaveOptions，并通过自定义 PageSetup 特性创建输出图像：

1using Aspose.Svg;
2using System.IO;
3using Aspose.Svg.Drawing;
4using Aspose.Svg.Saving;
5using Aspose.Svg.Converters;
6using Aspose.Svg.Rendering.Image;
 1// Convert SVG to GIF in C# with custom settings
 2
 3// Initialize an SVG document from a file
 4using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl.svg")))
 5{
 6    // Initialize an instance of the ImageSaveOptions class and set the PageSetup property
 7    ImageSaveOptions saveOptions = new ImageSaveOptions(ImageFormat.Gif);
 8    saveOptions.PageSetup.AnyPage = new Page(new Drawing.Size(400, 600), new Margin(20, 20, 20, 20));
 9
10    // Convert SVG to GIF
11    Converter.ConvertSVG(document, saveOptions, Path.Combine(OutputDir, "owl.gif"));
12}
Example-ConvertSvgToGif.cs hosted with ❤ by GitHub

在 C# 中将 SVGZ 转为 PNG

SVGZ 是压缩 SVG 文件，不是单独的绘图模型。Aspose.SVG for .NET 可以使用 SVGDocument 加载 .svgz 文件；之后，您可以使用与 SVG 相同的 ImageSaveOptions 和 Converter.ConvertSVG() 工作流将文档渲染为 PNG：

1using Aspose.Svg;
2using Aspose.Svg.Converters;
3using Aspose.Svg.Saving;
4
5using (var document = new SVGDocument("input.svgz"))
6{
7    var options = new ImageSaveOptions();
8    Converter.ConvertSVG(document, options, "output.png");
9}

PNG 是 ImageSaveOptions 的默认图像格式，因此 SVGZ 到 PNG 转换不需要设置 Format 属性。当您需要从压缩 SVG 资源生成缩略图、raster 预览或 Web 图像时，请使用此工作流。如果需要在渲染前获得可编辑标记，请参阅 在 C# 中将 SVGZ 转为 SVG。

实用建议

在生产 .NET 应用程序中将 SVG 转换为 raster 图像时，请明确设置输出格式、尺寸、分辨率、背景和资源访问。这有助于让缩略图、预览、报表和 Web 图像在本地开发、服务器和容器中保持一致。

生产任务建议
生成 Web 缩略图使用 PNG 或 WebP，设置 PageSetup，并为透明 SVG 内容选择可预测的背景。请参阅 SVG 转换期间调整文档大小。
转换上传的 SVG 文件从 stream 或受控存储加载，验证 SVG，并将输出图像写入应用程序管理的存储。请参阅 在 C# 中创建、加载和读取 SVG 文件。
保留透明度选择 PNG 或 WebP，并保持 BackgroundColor 透明。当必须保留透明度时避免使用 JPG。关于元素不透明度和透明导出工作流，请参阅 C# 中的 SVG 不透明度和透明颜色。
从透明 SVG 生成 JPG 输出设置 BackgroundColor，因为 JPG 不支持 alpha 透明度。
处理大量 SVG 文件释放 SVGDocument 实例，按文件处理错误，并避免让大型 SVG 或 raster 输出在内存中停留过久。
保持文本输出稳定确保所需字体可用或已嵌入。缺失字体可能改变文本度量和最终图像布局。请参阅 在 C# 中使用 SVG 字体和文本。

常见错误和修复

问题常见原因修复方法
输出图像尺寸错误SVG 没有明确的 width、height 或 viewBox，或者缺少输出页面设置定义 SVG 尺寸，或在 ImageSaveOptions 或 ImageRenderingOptions 中设置 PageSetup。请参阅 SVG viewBox 和 调整文档大小。
透明 SVG 在 JPG 中变黑、变白或出现异常背景JPG 不支持透明度使用 PNG/WebP 保留透明度，或在保存为 JPG 前设置 BackgroundColor。请参阅 C# 中的 SVG 不透明度和透明颜色。
线条或文本看起来有锯齿抗锯齿被禁用或输出分辨率太低使用 UseAntialiasing = true，并设置合适的水平和垂直分辨率。请参阅 SVG 渲染质量和输出一致性。
外部图像、字体或 CSS 缺失转换期间无法访问引用的资源使用可访问的资源路径、嵌入资源，或配置运行环境以便解析依赖项。请参阅 修复 C# 中的 SVG 样式和字体问题。
TIFF 文件太大未压缩 TIFF 输出或高分辨率 raster 内容配置 TIFF Compression，检查所需输出分辨率，并在可能时优化源 SVG。请参阅 为 Web 和性能优化 SVG 文件。
开发机和服务器输出不同字体、文件路径或资源访问因环境而异为 Windows、Linux、Docker 和云部署一致地配置字体和资源位置。请参阅 环境配置。

FAQ

可以转换在内存中创建或编辑的 SVG 吗？
可以。创建或更新 SVGDocument，配置 ImageSaveOptions，并将文档实例传递给 Converter.ConvertSVG()。当您需要在渲染最终图像前编辑 SVG 元素、样式或颜色时，这很有用。

可以在将 SVG 渲染为图像之前更改 SVG 内容吗？
可以。您可以先更新 SVG DOM，例如使用 CSS 选择器，然后渲染修改后的文档。请参阅 在 C# 中使用 CSS 选择器编辑 SVG。

SVG 到图像转换会保留矢量数据吗？
不会。PNG、JPG、WebP、BMP、TIFF 和 GIF 都是 raster 输出。结果是基于像素的图像数据。如果需要保留可编辑的矢量标记，请将文档保存为 SVG，或使用 SVGZ 压缩。

可以在服务器应用程序中使用相同代码吗？
可以。服务器应用程序通常从文件、stream、URL 或生成的字符串加载 SVG，然后将渲染后的图像写入应用程序管理的存储。请显式配置字体、资源路径和输出尺寸，以获得一致结果。

如果渲染图像看起来与源 SVG 不同，应从哪里开始排查？
检查尺寸、viewBox、字体、链接资源、CSS、背景颜色和抗锯齿。上面的 常见错误和修复 表链接到最相关的故障排查文章。

相关资源

您可以试用免费的在线 SVG to JPG Converter，它质量高、简单且快速。只需上传并转换文件，几秒钟即可获得结果。

在线 SVG 转 JPG 转换器

将 SVG 转换为 XPS 将图像转为 SVG