Редагувати SVG на C#

Як редагувати SVG на C#

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

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

Install-Package Aspose.SVG

Додавання елементів до SVG за допомогою Element Builders

Element Builders – це спеціалізовані класи API Aspose.SVG Builder, які полегшують створення та модифікацію 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. Ви можете змінювати документ, додаючи нові вузли, видаляючи існуючі або редагуючи їхній вміст. Наприклад, ось як додати декороване коло і текст до 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 за допомогою API Aspose.SVG Builder, що охоплює аспекти від створення базових елементів до просунутих технік, таких як міксини та синтаксичний цукор.
• У статті Element Builders розглядаються конструктори елементів, що використовуються в Aspose.SVG Builder API. Ви дізнаєтеся про клас SVGElementBuilder, його спеціалізовані білдери і про те, як вони спрощують програмування SVG.

Інші підтримувані функції

Використовуйте бібліотеку Aspose.SVG C# для конвертації, злиття, редагування SVG-документів, перетворення колірних кодів, векторизації зображень і багато іншого!