SVG-Dateien in C# erstellen, laden und lesen

Diese Anleitung zeigt, wie Sie SVG-Dateien in C# mit Aspose.SVG for .NET erstellen, laden und lesen. Sie lernen, wie Sie ein SVGDocument aus einem leeren Dokument, String-Inhalt, Stream, einer lokalen Datei oder URL initialisieren und wie Sie SVG-Dokumente mit externen Ressourcen asynchron laden.

Die Klasse SVGDocument ist der Einstiegspunkt für die Arbeit mit SVG-Inhalten in Aspose.SVG for .NET. Sie stellt die Wurzel der SVG-DOM-Hierarchie dar, enthält den gesamten Dokumentinhalt und folgt 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 Speicherstream oder einer Datei,
• aus dem Web.

Die folgenden C#-Beispiele zeigen die wichtigsten SVGDocument-Konstruktoren und Ladeszenarien.

Schnellstart: SVG-Dokument in C# erstellen

Der schnellste Weg zum Erstellen eines SVG-Dokuments besteht darin, SVG-Markup als String an den SVGDocument-Konstruktor zu übergeben. Das ist nützlich, wenn SVG-Inhalte in Ihrer Anwendung dynamisch erzeugt werden:

using Aspose.Svg;
...

    string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\"><circle cx=\"50\" cy=\"50\" r=\"40\" /></svg>";

    using (SVGDocument document = new SVGDocument(svgContent, "."))
    {
        document.Save("circle.svg");
    }

Leeres SVG-Dokument erstellen

Aspose.SVG for .NET API stellt die Klasse SVGDocument bereit, mit der Sie über den Standardkonstruktor ein leeres Dokument erstellen können. Nachdem das Dokumentobjekt erstellt wurde, 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 (SVGDocument 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;

// Create an empty SVG document using C#

// Prepare an output path to save a document
string documentPath = Path.Combine(OutputDir, "empty.svg");

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

    // Save the document to a file
    document.Save(documentPath);
}

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

SVG aus einem Speicherstring erstellen

Verwenden Sie den Konstruktor SVGDocument(string, string), wenn SVG-Markup bereits im Speicher vorhanden ist, zum Beispiel nachdem es von Ihrer Anwendung erzeugt oder aus einer Datenbank, API oder Benutzereingabe empfangen wurde.

Das zweite Konstruktorargument ist der Basis-URI. Aspose.SVG verwendet ihn, um relative Pfade im SVG aufzulösen, zum Beispiel verknüpfte Bilder, CSS-Dateien oder Schriftarten. Wenn das SVG-Markup keine externen Ressourcen referenziert, können Sie "." übergeben, wie im Schnellstartbeispiel oben gezeigt. Andernfalls übergeben Sie den Ordner oder die URL, in dem bzw. der sich diese Ressourcen befinden:

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

    // SVG markup contains a relative reference to an external image
    string documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"200\" height=\"120\"><image href=\"images/logo.png\" width=\"200\" height=\"120\" /></svg>";

    // Relative paths in the SVG are resolved against this base URI
    string baseUri = Path.Combine(DataDir, "assets") + Path.DirectorySeparatorChar;

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

SVG aus einem Stream laden

Um SVG aus einem Stream zu laden, verwenden Sie einen der SVGDocument()-Konstruktoren, die ein Stream-Objekt akzeptieren. Dieses Muster eignet sich zum Lesen von SVG aus hochgeladenen Dateien, eingebetteten Ressourcen, Speicherpuffern oder anderen Quellen, die keine Dateien sind:

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 (FileStream stream = new FileStream(documentPath, FileMode.Open, FileAccess.Read))
	{
	    // Initialize an SVG document from the stream
		using (SVGDocument document = new SVGDocument(stream, "."))
	    {
	        // Work with the document
	    }
	}

Benutzerdefinierte SVG-Dokumente mit der SVG Builder API erstellen

Die SVG Builder API bietet eine leistungsstarke und flexible Möglichkeit, SVG-Dokumente programmgesteuert zu erstellen. Mit der Klasse SVGSVGElementBuilder können Entwickler komplexe SVG-Grafiken mit detaillierten Anpassungsoptionen erstellen. Weitere Informationen finden Sie unter Erweiterte SVG-Erstellung und -Änderung mit Aspose.SVG Builder API.

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

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

// Create SVG using Builder API

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement 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(Path.Combine(OutputDir, "face.svg"));
}

Dieser Codeausschnitt erstellt ein SVG-Dokument mit einem komplexen Design und zeigt die Flexibilität und Leistungsfähigkeit der SVG Builder API beim programmgesteuerten Erzeugen benutzerdefinierter SVG-Grafiken. Im obigen C#-Code erstellen wir ein SVG-Dokument mit Elementen wie Kreisen, Ellipsen, Pfaden und Farbverläufen. Das generierte SVG-Bild stellt ein Gesicht mit einem Lächeln dar:

SVG aus einer lokalen Datei laden

Um SVG aus einer Datei bezier-curves.svg zu laden, verwenden Sie den Standardkonstruktor der Klasse SVGDocument und übergeben 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 (SVGDocument document = new SVGDocument(documentPath))
	{
	    // Work with the document 
	}

SVG aus dem Web laden

Sie können SVG auch direkt aus einer URL laden. Die folgenden Beispiele zeigen, wie Sie ein SVGDocument aus einer Webadresse erstellen, die auf eine SVG-Datei verweist:

using Aspose.Svg;
...

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

using Aspose.Svg;
...

    // Load SVG from the Web at its URL
    using (SVGDocument 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 angeben, die nicht erreichbar ist, löst die Bibliothek eine DOMException mit dem speziellen Code NetworkError aus, um mitzuteilen, dass die ausgewählte Ressource nicht gefunden werden kann.

SVG mit externen Ressourcen asynchron laden

Wenn ein SVG-Dokument externe Ressourcen wie Bilder, Schriftarten, CSS-Dateien oder Skripte referenziert, kann das Laden zusätzliche Zeit benötigen und den Hauptthread der Anwendung blockieren. In einem asynchronen Lademodell können Sie die Ereignisse Load und ReadyStateChange abonnieren und Ihre Anwendung benachrichtigen, sobald das SVG-Dokument und seine Ressourcen bereit sind.

Die Methode Navigate(Url) der Klasse SVGDocument lädt das Dokument von der angegebenen URL in die aktuelle Instanz.

using Aspose.Svg;
using System.Threading;

// Load SVG asynchronously using C#

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

SVGDocument document = new SVGDocument();

// 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 an 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 Ausführen der Beispiele finden Sie im Abschnitt So führen Sie die Beispiele aus.

FAQ

1. Warum werden Bilder, Schriftarten oder CSS-Dateien nicht geladen, wenn ich SVG aus einem String oder Stream erstelle?
Wenn SVG aus einem String oder Stream erstellt wird, werden relative Ressourcenpfade gegen den Basis-URI aufgelöst, der an den SVGDocument-Konstruktor übergeben wird. Wenn verknüpfte Bilder, Schriftarten oder CSS-Dateien nicht geladen werden, prüfen Sie, ob der Basis-URI auf den Ordner oder die URL mit diesen Ressourcen zeigt.

2. Was passiert, wenn eine SVG-Datei ungültiges Markup enthält?
Aspose.SVG analysiert SVG als XML-basierten Inhalt. Wenn das Markup fehlerhaft ist oder erforderliche Ressourcen nicht aufgelöst werden können, kann das Laden des Dokuments oder eine spätere Verarbeitung fehlschlagen. Validieren Sie erzeugtes SVG-Markup und behandeln Sie Ladeausnahmen in Produktionscode.

3. Kann ich ein SVGDocument nach dem Laden ändern?
Ja. Nachdem eine SVG-Datei geladen wurde, können Sie ihr DOM durchlaufen und ändern, Elemente hinzufügen oder entfernen, Attribute aktualisieren, Stile anwenden und das Ergebnis speichern. Detaillierte Bearbeitungsbeispiele finden Sie im Artikel SVG-Datei bearbeiten.

4. Ist SVGDocument für serverseitige Anwendungen geeignet?
Ja. Aspose.SVG for .NET kann in Backend-Diensten, ASP.NET-Anwendungen, Batch-Prozessoren und Dokumentautomatisierungs-Workflows verwendet werden, ohne auf Browserautomatisierung angewiesen zu sein.

5. Was ist der Unterschied zwischen SVG Builder API und DOM-Manipulation?
Die SVG Builder API eignet sich gut, um neue SVG-Strukturen in C# Schritt für Schritt zu erstellen. DOM-Manipulation ist besser, wenn Sie mit einem bereits geladenen SVG-Dokument arbeiten und vorhandene Elemente, Attribute oder Stile ändern müssen.

Nächste Schritte

• SVG-Dokument speichern – SVG-Dokumente in Dateien, Streams, ZIP-Archive oder URLs speichern.
• SVG-Datei bearbeiten – SVG-Elemente programmgesteuert hinzufügen, ändern und entfernen.
• SVG inspizieren und navigieren – SVG-Elemente prüfen und das SVG-DOM mit CSS-Selektoren oder XPath durchlaufen.
• SVG-Dateien konvertieren – SVG in PDF, XPS, PNG, JPEG und andere Formate konvertieren.
• So führen Sie die Beispiele aus – Aspose.SVG-Beispielprojekte einrichten und ausführen.