SVG in C# erstellen

Erfahren Sie, wie Sie SVG von Grund auf erstellen und dessen Inhalt bearbeiten

So erstellen Sie SVG in C#

Scalable Vector Graphics (SVG) ist eine XML-Sprache zum Erstellen zweidimensionaler Vektorgrafiken, und ein SVG-Dokument ist eine Textdatei, die Bilder als geometrische Grundelemente beschreibt: Linien, Kurven, Formen, Text usw. Wenn Sie Websites entwickeln, erstellen Sie Daten Visualisierungen oder die Arbeit an Druckmaterialien bietet SVG eine vielseitige und effiziente Lösung für die Grafikerstellung. Die Bibliothek Aspose.SVG für .NET bietet eine Reihe von Klassen und Methoden zum Erstellen, Bearbeiten, Konvertieren und für andere Manipulationen mit SVG-Dateien. Also, lasst uns ein neues SVG-Dokument erstellen!


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


Installieren Sie Aspose.SVG für .NET

Install-Package Aspose.SVG



Erstellen Sie ein leeres SVG-Dokument

Aspose.SVG für .NET API stellt die Klasse SVGDocument bereit, die zum Erstellen eines SVG-Dokuments verwendet werden kann. Ein SVGDocument ist die Wurzel der SVG-Hierarchie und enthält den gesamten Inhalt. Der folgende C#-Codeausschnitt zeigt die Verwendung des Standardkonstruktors SVGDocument() zum Erstellen eines leeren Dokuments:

  1. Erstellen Sie ein SVG-Dokument von Grund auf mit dem Konstruktor SVGDocument() .
  2. Speichern Sie die SVG-Datei mit einer der Methoden Save() .

C#-Code zum Erstellen eines leeren SVG-Dokuments

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



Erstellen Sie SVG aus einem Speicherstring

Das Generieren einer SVG-Datei aus einer Speicherzeichenfolge kann nützlich sein, wenn Sie SVGs im Handumdrehen generieren möchten. Durch die Erstellung von SVG aus einer Zeichenfolge können Sie sich ändernde Datensätze in Ihren Visualisierungen problemlos aktualisieren und darstellen. Sie können SVG aus einem String-Inhalt mit dem Konstruktor SVGDocument(string, string) erstellen:


C#-Code zum Erstellen einer SVG-Datei aus einer Zeichenfolge

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



So fügen Sie einer SVG-Datei Elemente hinzu

Mit Aspose.SVG für .NET können Sie SVG-Dateien bearbeiten und deren Inhalt ändern. Das Document Object Model (DOM) der API bietet vollständige Kontrolle über SVG-Knoten und ihre Attribute und ist vollständig mit den offiziellen SVG-Spezifikationen kompatibel.

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 und dabei die entsprechenden Klassen verwenden, die vom Namespace Aspose.Svg bereitgestellt werden. So fügen Sie beispielsweise einen dekorierten Kreis und Text hinzu:


C#-Code zum Bearbeiten von 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"));
    }



Schauen wir uns die einfachen Schritte zum Bearbeiten eines SVG-Dokuments an, die den obigen C#-Code veranschaulichen. Dem erstellten SVG-Dokument werden die SVG-Elemente <circle> und <text> hinzugefügt:

  1. Um ein SVG-Dokument programmgesteuert von Grund auf zu erstellen, verwenden Sie den Konstruktor SVGDocument() ohne Parameter.
  2. Die Eigenschaft RootElement der SVGDocument-Klasse zeigt auf das Stammelement <svg> 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 (svg-from-scratch.svg), sieht folgendermaßen aus:

Text „SVG-Bild mit Kreis und Text“



Nützliche Ressourcen

  • Um mehr über Aspose.SVG für die .NET-API zu erfahren, besuchen Sie bitte unsere Dokumentation .
  • Im Artikel SVG erstellen, SVG in C# laden und lesen erfahren Sie, wie Sie SVG aus einer Datei, einem Stream oder einer Speicherzeichenfolge erstellen. wie man SVG aus dem Web lädt und SVG mit Resources Async liest.
  • Der Dokumentationsartikel SVG-Datei bearbeiten – C#-Beispiele enthält grundlegende Informationen zum Lesen oder Bearbeiten des Dokumentobjektmodells mit Aspose.SVG für die .NET-API. Sie erfahren, wie Sie SVG-Elemente erstellen und mit ihnen arbeiten – ändern Sie das Dokument, indem Sie neue Knoten einfügen, entfernen oder den Inhalt vorhandener Knoten bearbeiten. In dem Artikel werden detaillierte Beispiele für das Hinzufügen und Bearbeiten neuer Elemente in SVG und die Anwendung von SVG-Filtern auf Bitmaps betrachtet.
  • Wir empfehlen Ihnen, unseren Leitfaden SVG-Zeichnen – Grundlagen-Tutorial zu besuchen, wenn Sie mehr über SVG-Regeln und -Syntax erfahren möchten. Hier erklären wir anhand einfacher Beispiele die allgemeinen Regeln und Standardschritte zum Erstellen von SVG von Grund auf.



Weitere unterstützte Aspose.SVG für .NET-API-Funktionen

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