在 C# 中创建 SVG

了解如何从头开始创建 SVG 以及如何编辑其内容

如何在 C# 中创建 SVG

可缩放矢量图形 (SVG) 是一种用于创建二维矢量图形的 XML 语言，SVG 文档是一种文本文件，将图像描述为几何基元：直线、曲线、形状、文本等。如果您开发网站，则创建数据SVG 为图形创建提供了多功能且高效的解决方案。 Aspose.SVG for .NET 库提供了一组用于创建、编辑、转换和对 SVG 文件进行其他操作的类和方法。那么，让我们创建一个新的 SVG 文档！

首先，确保您的项目中安装了 Aspose.SVG for .NET API。安装过程非常简单。您可以使用以下命令通过 NuGet 包管理器控制台安装它：

安装 Aspose.SVG for .NET

Install-Package Aspose.SVG

创建一个空的 SVG 文档

Aspose.SVG for .NET API 提供了 SVGDocument 类，可用于创建 SVG 文档。 SVGDocument 是 SVG 层次结构的根，包含整个内容。以下 C# 代码片段显示了如何使用默认的SVGDocument()构造函数来创建空文档：

使用 SVGDocument() 构造函数从头开始创建 SVG 文档。
使用 Save() 方法之一保存 SVG 文件。

创建空 SVG 文档的 C# 代码

using System.IO;
using Aspose.Svg;
...

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "empty.svg"));
    }

从内存字符串创建 SVG

如果您想动态生成 SVG，从内存字符串生成 SVG 会很有用。从字符串创建 SVG 允许您轻松更新和表示可视化中不断变化的数据集。您可以使用 SVGDocument(string, string) 构造函数从字符串内容创建 SVG：

从字符串创建 SVG 的 C# 代码

using System.IO;
using Aspose.Svg;
...

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

如何将元素添加到 SVG 文件

Aspose.SVG for .NET 允许您编辑 SVG 文件并更改其内容。 API 的文档对象模型 (DOM) 提供对 SVG 节点及其属性的完全控制，并且完全符合官方 SVG 规范。

一旦创建了文档对象，就可以用 SVG 元素填充它。您可以使用 Aspose.Svg 命名空间提供的适当类添加更多元素(如 SVG 形状、文本、过滤器等)来自定义文档。例如，以下是添加装饰圆圈和文本的方法：

编辑 SVG 的 C# 代码

using System.IO;
using Aspose.Html;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

让我们看一下编辑 SVG 文档的简单步骤，以说明上面的 С# 代码。 SVG <circle> 和 <text> 元素将添加到创建的 SVG 文档中：

要以编程方式从头开始创建 SVG 文档，请使用不带参数的 SVGDocument() 构造函数。
SVGDocument 类的RootElement属性指向文档的根<svg>元素。
创建带有属性的 <text> 和 <circle> 元素，并将它们添加到 <svg> 元素：
- 您可以使用 CreateElementNS() 方法创建 SVGTextElement 和 SVGCircleElement 类的实例。
- 调用 SetAttribute() 方法设置指定位置、大小、填充等的属性。
- 使用 AppendChild() 方法将元素添加到 <svg> 中。
使用 Save() 方法保存编辑后的SVG文件。

我们上面创建的结果文件 (svg-from-scratch.svg) 如下所示：

文本“带有圆圈和文本的 SVG 图像”

有用的资源

要了解有关 Aspose.SVG for .NET API 的更多信息，请访问我们的文档。
从在 C# 中创建 SVG、加载和读取 SVG 文章中，您将了解如何从文件、流或内存字符串创建 SVG；如何从 Web 加载 SVG，并使用资源异步读取 SVG。
编辑 SVG 文件 - C# 示例文档文章为您提供有关如何使用 Aspose.SVG for .NET API 读取或编辑文档对象模型的基本信息。您将探索如何创建 SVG 元素以及如何使用它们 - 通过插入新节点、删除或编辑现有节点的内容来修改文档。本文考虑了在 SVG 中添加和编辑新元素以及将 SVG 滤镜应用于位图的详细示例。
如果您想了解更多有关 SVG 规则和语法的信息，我们建议您访问我们的指南 SVG 绘图 – 基础教程。在这里，我们通过简单的示例解释了从头开始创建 SVG 的一般规则和标准步骤。

其他支持的 Aspose.SVG for .NET API 功能

使用 Aspose.SVG C# 库来转换、合并、编辑 SVG 文档、转换颜色代码、矢量化图像等等！