Редактирование SVG на C#

Как редактировать SVG на C#

Библиотека Aspose.SVG for .NET предоставляет набор классов и методов для создания, редактирования, преобразования и других манипуляций с SVG-файлами. После создания объекта документа его можно заполнить элементами SVG. Вы можете настроить документ, добавив в него дополнительные элементы, такие как SVG-фигуры, тексты, фильтры и т. д. В этой статье мы рассмотрим два примера C#, которые демонстрируют различные подходы к созданию и редактированию SVG: один из них использует Aspose.SVG Builder API , а другой – ручные манипуляции с DOM с прямым заданием элементов и атрибутов.

Прежде всего, убедитесь, что в вашем проекте установлен Aspose.SVG for .NET API. Процесс установки довольно прост. Вы можете установить его через консоль менеджера пакетов NuGet, используя следующую команду:

Install-Package Aspose.SVG

Добавить элементы в SVG-файл с помощью Element Builders

Element Builders – это специализированные классы Aspose.SVG Builder API, которые упрощают создание и изменение элементов SVG в коде. Они часто используют шаблоны, такие как Fluent Builder Pattern, чтобы обеспечить чистый, читаемый синтаксис для установки атрибутов и структурирования содержимого SVG программным путем. Следующий код демонстрирует лаконичный и элегантный подход к созданию SVG с нуля с помощью C#. В примере используется паттерн Fluent Builder в SVGSVGElementBuilder для создания и добавления в SVG новых элементов: декорированного круга и текста.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Добавить элементы в файл SVG

API Document Object Model (DOM) обеспечивает полный контроль над узлами SVG и их атрибутами и полностью соответствует официальным спецификациям SVG. Вы можете изменять документ, добавляя новые узлы, удаляя существующие или редактируя их содержимое. Например, вот как можно добавить декорированный круг и текст:

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-документ добавляются элементы SVG <circle> и <text>:

1. Чтобы создать документ SVG программным способом с нуля, используйте конструктор SVGDocument() без параметров.
2. Свойство RootElement класса SVGDocument указывает на корневой элемент документа <svg>.
3. Создайте элементы <text> и <circle> с атрибутами и добавьте их к элементу <svg>:
   • Вы можете использовать метод CreateElementNS() для создания экземпляров классов SVGTextElement и SVGCircleElement.
   • Вызовите метод SetAttribute() , чтобы установить атрибуты, определяющие положение, размер, заливку и т. д.
   • Используйте метод AppendChild() для добавления элементов в <svg>.
4. Сохраните отредактированный SVG-файл с помощью метода Save() .

Результирующий файл, который мы создали выше, одинаков для обоих примеров кода (svg-from-scratch.svg) и выглядит следующим образом:

Полезные ресурсы

• В статье Редактирование файла SVG – примеры C# документации приведены основные сведения о том, как читать или редактировать объектную модель документа с помощью Aspose.SVG for .NET API. Вы узнаете, как создавать элементы SVG и как работать с ними – изменять документ, вставляя новые узлы, удаляя или редактируя содержимое существующих узлов.
• В главе SVG Builder – Расширенное создание и изменение SVG вы найдете руководство по эффективному манипулированию SVG с помощью Aspose.SVG Builder API, охватывающее аспекты от создания базовых элементов до продвинутых техник, таких как миксины и синтаксический сахар.
• Статья Element Builders посвящена конструкторам элементов, используемым в Aspose.SVG Builder API. Вы узнаете о классе SVGElementBuilder, его специализированных конструкторах и о том, как они упрощают программирование SVG.

Другие поддерживаемые функции

Используйте библиотеку Aspose.SVG C# для конвертирования, объединения, редактирования документов SVG, преобразования цветовых кодов, векторизации изображений и многого другого!