SVG erstellen, SVG laden und lesen in C#

Um eine Aufgabe auszuführen, müssen Sie ein Dokument erstellen oder laden. Mit der Aspose.SVG für .NET-API können Sie ein SVG-Dokument von Grund auf erstellen und ein vorhandenes SVG aus verschiedenen Quellen laden. Die API stellt die Klasse SVGDocument bereit, die über mehrere Konstruktoren verfügt, mit denen Sie neue Klasseninstanzen erstellen können. Das SVGDocument ist die Wurzel der SVG-DOM-Hierarchie, enthält den gesamten Inhalt und basiert vollständig auf den Spezifikationen W3C SVG 2.0 und WHATWG DOM.

SVG-Dateien können erstellt und geladen werden:

• von Grund auf als leeres Dokument mit SVG-Struktur,
• aus einer vom Benutzer bereitgestellten Zeichenfolge,
• aus einem Speicherstrom oder einer Datei,
• aus dem Internet.

Dieser Artikel enthält einige Beispiele für das Erstellen und Laden von SVG-Dateien mit Aspose.SVG für die .NET-API. Das SVGDocument verfügt über eine Vielzahl überladener Konstruktoren, mit denen Sie ein leeres Dokument erstellen oder es aus einer Datei, URL, einem Stream usw. laden können.

Erstellen Sie ein leeres SVG-Dokument

Aspose.SVG für .NET API stellt die Klasse SVGDocument bereit, die zum Erstellen eines leeren Dokuments mit ihrem Standardkonstruktor verwendet werden kann. Sobald das Dokumentobjekt erstellt ist, kann es später mit SVG-Elementen gefüllt werden. Der folgende C#-Codeausschnitt zeigt die Verwendung des Standardkonstruktors SVGDocument() zum Erstellen eines SVG-Dokuments.

using Aspose.Svg;
...

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

Wenn Sie ein erstelltes leeres SVG-Dokument in einer Datei speichern möchten, verwenden Sie den folgenden C#-Codeausschnitt:

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

    // Prepare output path for a document saving
    string documentPath = Path.Combine(OutputDir, "empty.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(documentPath);
	}

Weitere Einzelheiten zum Speichern von SVG-Dateien finden Sie im Abschnitt SVG-Dokument speichern. Im Artikel SVG-Datei bearbeiten erfahren Sie, wie Sie SVG mit der Aspose.SVG für .NET-Bibliothek bearbeiten und finden detaillierte Beispiele, wie Sie neue Elemente zu SVG-Dokumenten hinzufügen und SVG-Filter auf Bitmaps anwenden.

Erstellen Sie SVG aus einem Speicherstring

Sie können SVG aus einem String-Inhalt mit dem Konstruktor SVGDocument (string, string) erstellen. Wenn Sie ein Dokument aus einer Benutzerzeichenfolge direkt in Ihrem Code erstellen möchten und es nicht in einer Datei speichern müssen, könnte Ihnen das folgende Beispiel helfen: Wir erstellen ein SVG-Dokument, das einen Kreis mit einem Radius von 40 enthält Pixel.

using Aspose.Svg;
...

    // Prepare SVG code
    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";	

	// Initialize an SVG document from a string content
	using (var document = new SVGDocument(documentContent, "."))
	{
	    // Work with the document here...
	}

Erstellen Sie SVG aus einem Stream

Um SVG aus einem Stream zu erstellen, verwenden Sie einen der SVGDocument()-Konstruktoren:

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

    //Prepare a path to a file required for a FileStream object creating
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg");

	// Create a FileStream object
	using (var stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (var document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

Erstellen Sie benutzerdefinierte SVG-Dokumente mit der SVG Builder-API

Die SVG Builder-API bietet eine leistungsstarke und flexible Möglichkeit, SVG-Dokumente programmgesteuert zu erstellen. Durch die Nutzung der Klasse SVGSVGElementBuilder können Entwickler problemlos komplexe SVG-Grafiken mit detaillierten Anpassungsoptionen erstellen. Weitere Informationen zur Verwendung der SVG Builder-API finden Sie im Dokumentationsartikel SVG Builder API – Erweiterte SVG-Erstellung und -Änderung.

Hier ist ein Beispiel, das zeigt, wie man ein benutzerdefiniertes SVG-Dokument mit verschiedenen grafischen Elementen erstellt:

using Aspose.Svg;
using Aspose.Svg.Builder;
using System.Drawing;
...

    // Initialize an SVG document
    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(100).Height(100)
            .ViewBox(-21, -21, 42, 42)
            .AddDefs(def => def
                .AddRadialGradient(id: "b", cx: .2, cy: .2, r: .5, fx: .2, fy: .2, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: .7)
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xff, 0xff, 0xFF), stopOpacity: 0)
                )
                .AddRadialGradient(id: "a", cx: .5, cy: .5, r: .5, extend: ev => ev
                    .AddStop(offset: 0, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .75, stopColor: Color.FromArgb(0xff, 0xff, 0x00))
                    .AddStop(offset: .95, stopColor: Color.FromArgb(0xee, 0xee, 0x00))
                    .AddStop(offset: 1, stopColor: Color.FromArgb(0xe8, 0xe8, 0x00))
                )
            )
            .AddCircle(r: 20, fill: "url( #a)", stroke: Color.FromArgb(0, 0, 0), extend: c => c.StrokeWidth(.15))
            .AddCircle(r: 20, fill: "b")
            .AddG(g => g.Id("c")
                .AddEllipse(cx: -6, cy: -7, rx: 2.5, ry: 4)
                .AddPath(fill: Paint.None, stroke: Color.FromArgb(0, 0, 0), d: "M10.6 2.7a4 4 0 0 0 4 3", extend: e => e.StrokeWidth(.5).StrokeLineCap(StrokeLineCap.Round))
            )
            .AddUse(href: "#c", extend: e => e.Transform(t => t.Scale(-1, 1)))
            .AddPath(d: "M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0", fill:Paint.None, stroke: Color.FromArgb(0,0,0), extend: e => e.StrokeWidth(.75))
            .Build(document.FirstChild as SVGSVGElement);

        // Save the SVG document
        document.Save(OutputFolder + "face.svg");
    }

Dieses Code-Snippet erstellt ein SVG-Dokument mit einem komplexen Design und demonstriert die Flexibilität und Leistungsfähigkeit der SVG Builder-API zum programmgesteuerten Generieren benutzerdefinierter SVG-Grafiken. Im obigen C#-Code erstellen wir ein SVG-Dokument mit Elementen wie Kreisen, Ellipsen, Pfaden und Farbverläufen. Das resultierende SVG-Bild stellt ein lächelndes Gesicht (Smiley) dar:

Laden Sie SVG aus einer Datei

Um SVG aus einer Datei bezier-curves.svg zu laden, verwenden Sie den Standardkonstruktor der Klasse SVGDocument und übergeben Sie ihm den Dateipfad als Eingabeparameter.

using Aspose.Svg;
using System.IO;
...
    
    // Prepare a path to a file loading
    string documentPath = Path.Combine(DataDir, "bezier-curves.svg"); 
	
	// Load an SVG document from the file
	using (var document = new SVGDocument(documentPath))
	{
	    // Work with the document 
	}

Laden Sie SVG aus dem Web

Die folgenden Beispiele könnten Ihnen dabei helfen, ein Dokument aus einer URL zu erstellen, die auf die XML-Datei verweist:

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
    using (var document = new SVGDocument(documentUrl))
    {
        // Work with the SVG document here...
    }

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    using (var document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/basic-shapes.svg")))
    {
        // Work with the SVG document here...
    }

Wenn Sie eine falsche URL festlegen, die derzeit nicht erreichbar ist, löst die Bibliothek die DOMException mit dem speziellen Code „NetworkError“ aus, um Sie darüber zu informieren, dass die ausgewählte Ressource nicht gefunden werden kann.

Lesen Sie SVG mit Resources Async

Wenn SVG externe Ressourcen enthält, kann es einige Zeit dauern, bis alle Ressourcen vollständig geladen sind, was zu einer Blockierung des Hauptanwendungsthreads führen kann. In einem asynchronen Modell können die Ereignisse „Load“ und „ReadyStateChange“ abonniert werden, um die ladende Anwendung über das vollständige Laden der SVG-Datei zu benachrichtigen, wie im folgenden Codebeispiel gezeigt. Die Methode Navigate(Url) der Klasse SVGDocument wird zum Laden des Dokuments unter der angegebenen URL in die aktuelle Instanz verwendet.

using Aspose.Svg;
using System.Threading;
...

    var documentUrl = new Url("https://docs.aspose.com/svg/files/owl.svg");
	var document = new SVGDocument();
	var documentEvent = new ManualResetEvent(false);

	// Subscribe to the event 'OnReadyStateChange' that will be fired once the document is completely loaded
	document.OnReadyStateChange += (sender, ev) =>
	{
	    if (document.ReadyState == "complete")
	    {
	        // Sets the state of the event to signaled to unblock the main thread
	        documentEvent.Set();
	    }
	};
	// Load the SVG document Async
	document.Navigate(documentUrl);

	// Blocks the current thread while the document is loading
	documentEvent.WaitOne();

	// Work with the document

Sie können die vollständigen Beispiele und Datendateien von GitHub herunterladen. Informationen zum Herunterladen von GitHub und zum Ausführen von Beispielen finden Sie im Abschnitt So führen Sie die Beispiele aus.