Bearbeiten von SVG in C#

Bearbeiten von SVG in C#

Die Bibliothek Aspose.SVG for .NET bietet eine Reihe von Klassen und Methoden zum Erstellen, Bearbeiten, Konvertieren und anderen Manipulationen mit SVG-Dateien. Sobald das Dokumentobjekt erstellt ist, kann es mit SVG-Elementen gefüllt werden. Sie können das Dokument anpassen, indem Sie weitere Elemente wie SVG-Formen, Texte, Filter usw. hinzufügen. In diesem Artikel werden wir zwei C#-Beispiele untersuchen, die verschiedene Ansätze zur Erstellung und Bearbeitung von SVGs demonstrieren: eines unter Verwendung der Aspose.SVG Builder API und das andere unter Verwendung manueller DOM-Manipulation mit direkter Element- und Attributeinstellung.

Stellen Sie zunächst sicher, dass Sie Aspose.SVG for .NET API in Ihrem Projekt installiert haben. Der Installationsprozess ist recht einfach. Sie können es über die NuGet Package Manager Console mit dem folgenden Befehl installieren:

Install-Package Aspose.SVG

Hinzufügen von Elementen zu einer SVG-Datei mit Element Builders

Element Builders sind spezialisierte Klassen der Aspose.SVG Builder API, die das Erstellen und Ändern von SVG-Elementen im Code erleichtern. Sie verwenden häufig Muster wie das Fluent Builder Pattern, um eine saubere, lesbare Syntax für die Einstellung von Attributen und die programmatische Strukturierung von SVG-Inhalten zu bieten. Der folgende Code demonstriert einen prägnanten und eleganten Ansatz für die Erstellung von SVGs von Grund auf mit C#. Das Beispiel verwendet ein Fluent Builder Pattern innerhalb von SVGSVGElementBuilder , um neue Elemente zu konstruieren und dem SVG hinzuzufügen: einen dekorierten Kreis und Text.

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"));
    }

Hinzufügen von Elementen zu einer SVG-Datei

Die Document Object Model (DOM)-API bietet volle Kontrolle über SVG-Knoten und ihre Attribute und ist vollständig mit den offiziellen SVG-Spezifikationen konform. Sie können das Dokument ändern, indem Sie neue Knoten hinzufügen, vorhandene Knoten entfernen oder deren Inhalt bearbeiten. So fügen Sie zum Beispiel einen dekorierten Kreis und Text zu einem SVG hinzu:

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"));
    }

Schauen wir uns die einfachen Schritte zur Bearbeitung eines SVG-Dokuments an, die den obigen С#-Code illustrieren. Ein SVG <circle> und <text> Elemente werden dem erstellten SVG Dokument hinzugefügt:

1. Um ein SVG-Dokument von Grund auf programmatisch zu erstellen, verwenden Sie den Konstruktor SVGDocument() ohne Parameter.
2. Die Eigenschaft RootElement der Klasse SVGDocument zeigt auf das Root-<svg>-Element des Dokuments.
3. Erstellen Sie ein <text>- und ein <circle>-Element mit Attributen und fügen Sie sie dem <svg>-Element hinzu:
   • Sie können die Methode CreateElementNS() verwenden, um Instanzen der Klassen SVGTextElement und SVGCircleElement zu erstellen.
   • Rufen Sie die Methode SetAttribute() auf, um Attribute festzulegen, die Position, Größe, Füllung usw. angeben.
   • Verwenden Sie die Methode AppendChild() , um die Elemente zu <svg> hinzuzufügen.
4. Speichern Sie die bearbeitete SVG-Datei mit der Methode Save() .

Die resultierende Datei, die wir oben erstellt haben, ist für beide Code-Beispiele die gleiche (svg-from-scratch.svg) und sieht wie folgt aus:

Nützliche Ressourcen

• Der Dokumentationsartikel SVG-Datei bearbeiten – C#-Beispiele gibt Ihnen grundlegende Informationen darüber, wie Sie das Document Object Model mit Aspose.SVG for .NET API lesen oder bearbeiten können. Sie erfahren, wie man SVG-Elemente erstellt und wie man mit ihnen arbeitet – das Dokument durch Einfügen neuer Knoten, Entfernen oder Bearbeiten des Inhalts vorhandener Knoten verändert.
• Im Kapitel SVG Builder – Erweiterte SVG-Erstellung und -Änderung finden Sie eine Anleitung zur effektiven Bearbeitung von SVG mit der Aspose.SVG Builder API, die Aspekte von der Erstellung grundlegender Elemente bis hin zu fortgeschrittenen Techniken wie Mixins und syntaktischem Zucker behandelt.
• Der Artikel Element Builders befasst sich mit den Element Builders, die in Aspose.SVG Builder API verwendet werden. Sie erfahren etwas über die SVGElementBuilder-Klasse, ihre spezialisierten Builder und wie sie die SVG-Programmierung vereinfachen.

Andere unterstützte Funktionen

Verwenden Sie die Aspose.SVG C#-Bibliothek zum Konvertieren, Zusammenführen, Bearbeiten von SVG-Dokumenten, Konvertieren von Farbcodes, Vektorisieren von Bildern und mehr!