SVG-Datei bearbeiten – C#-Beispiele

Mit Aspose.SVG für .NET können Sie SVG-Dateien bearbeiten und Änderungen an deren Inhalt vornehmen. Das Document Object Model (DOM) der API ist vollständig kompatibel mit den offiziellen SVG-Spezifikationen und bedeutet vollständige Kontrolle über SVG-Knoten und deren Felder zur Bearbeitung. Sie können das Dokument ändern, indem Sie neue Knoten anhängen, entfernen oder den Inhalt vorhandener Knoten bearbeiten.

In diesem Artikel zeigen wir, wie man SVG mit der Bibliothek Aspose.SVG für .NET bearbeitet und betrachten detaillierte C#-Beispiele, wie man Elemente zu einem SVG-Dokument hinzufügt und bearbeitet.

Fügen Sie Elemente zu einem SVG-Dokument hinzu

Mit der Aspose.SVG für .NET-API können Sie einem Dokument verschiedene Elemente hinzufügen. Zuerst würden Sie ein neues Element oder einen neuen Knoten erstellen; Anschließend können Sie das Element zum Dokument hinzufügen.

1. Sie können die Methode CreateElementNS(namespaceURI, qualifizierterName) der Klasse SVGDocument verwenden, um eine Instanz der Klasse Element zu erstellen – das erforderliche Element der angegebenen Qualifikation Name und Namespace-URI. Der namespaceURI legt den Verweis auf die Spezifikation W3C SVG fest. Der qualifiedName muss den String-Tag-Namen des Elements enthalten. Denken Sie daran, dass Sie die Typumwandlung (explizite Konvertierung) verwenden müssen, um das entsprechende Element zu erhalten.

2. Um dem SVG-Dokument ein Element hinzuzufügen, stellt die API die Methode InsertBefore(node, child) der Klasse Node bereit, die den node vor dem vorhandenen untergeordneten Knoten bzw. einfügt am Ende der Liste der Kinder, wenn das child null ist.

Die Eigenschaft RootElement der Klasse SVGDocument zeigt auf das Stammelement <svg> des Dokuments. Der folgende Codeausschnitt veranschaulicht, wie das Element <g> als erstes untergeordnetes Element im SVG-Dokument erstellt und hinzugefügt wird.

    var svgElement = document.RootElement;
    var gElement = (SVGGElement)document.CreateElementNS("https://www.w3.org/2000/svg", "g");
    svgElement.InsertBefore(gElement, svgElement.FirstChild);

Wir können Elementattribute und ihre Werte mit SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) Methoden der Klasse Element. Wenn Sie beispielsweise eine Gruppe grafischer Elemente erstellen und diese in das Element <g> einfügen, können Sie allgemeine Parameter festlegen:

    gElement.SetAttribute("fill", "#8A8D8F");
    gElement.SetAttribute("stroke", "magenta");
    gElement.SetAttribute("stroke-width", "4");

So fügen Sie Grundformen zu einem SVG-Dokument hinzu

Die grundlegenden SVG-Formen können mit der Methode CreateElementNS(namespaceURI, qualifizierterName) erstellt werden. Der qualifiedName muss den String-Tag-Namen des SVG-Grafikelements enthalten.

Auf diese Weise können Sie SVG-Kreise (Klasse SVGCircleElement, qualifizierterName = “circle”), Ellipsen (Klasse SVGEllipseElement, qualifizierteName = “ellipse”), Rechtecke (Klasse SVGRectElement, qualifizierteName = “rect”), Linien (Klasse SVGLineElement, qualifizierteName = “line”), Polylinien (SVGPolylineElement-Klasse, QualifiedName = “polyline”), Polygone (SVGPolygonElement-Klasse, QualifiedName = “polygon”) und Bezier-Kurven (SVGPathElement-Klasse, QualifiedName = “path”).

SVG-Kreis – SVG Circle

Jedes Grafikelement verfügt über seine eigenen spezifischen Attribute (Eigenschaften), über die Sie seine Parameter und Eigenschaften steuern können. Cx, Cy, R sind Kreiseigenschaften vom Typ SVGAnimatedLength, deren statische Daten über die Konstruktion element.X.BaseValue festgelegt oder gelesen werden können.

Der folgende Codeausschnitt zeigt, wie man einen SVG-Kreis erstellt und ihn dem <svg>-Element der vorhandenen SVG-Datei hinzufügt:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Dom;
using Aspose.Svg.Paths;
...

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    string documentPath = Path.Combine(DataDir, "basic-shapes.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Get root <svg> element of the document
        var svgElement = document.RootElement;

        // Create a <circle> element and set attributes values
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 100F;
        circleElement.Cy.BaseVal.Value = 100F;
        circleElement.R.BaseVal.Value = 50F;
        circleElement.SetAttribute("fill", "Salmon");
    
        // Add the <circle> element as the first child to <svg> element
        svgElement.InsertBefore(circleElement, svgElement.FirstChild);

    	// Work with the document here...
    	// Add a polyline and change stroke attributes for all circle and ellipse elements (see later)
    }
    // Save the document
    document.Save(Path.Combine(OutputDir, "basic-shapes_out.svg"));

Die Ellipse (Cx, Cy, Rx, Ry), das Rechteck (X, Y, Width, Height, Rx, Ry) und die Linie (X1, Y1, X2, Y2) haben ihre eigenen Attribute kann ähnlich eingestellt werden.

SVG-Polylinie

SVGPolygonElement und SVGPolylineElement verfügen über die Eigenschaft Points vom Typ SVGPointList, die Zugriff auf den Grundinhalt des Attributs points bietet, das eindeutig der SVG-Syntax entspricht.

Ein einfaches Beispiel für die Erstellung von SVG-Polylinien wird im folgenden Codeausschnitt veranschaulicht:

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    // Create a <polyline> element and set attributes values:
	var polylineElement = (SVGPolylineElement)document.CreateElementNS(SvgNamespace, "polyline");
    SVGPoint point1 = svgElement.CreateSVGPoint();
    point1.X = 270;
    point1.Y = 240;
    SVGPoint point2 = svgElement.CreateSVGPoint();
    point2.X = 290;
    point2.Y = 220;
    SVGPoint point3 = svgElement.CreateSVGPoint();
    point3.X = 310;
    point3.Y = 240;
    polylineElement.Points.AppendItem(point1);
    polylineElement.Points.AppendItem(point2);
    polylineElement.Points.AppendItem(point3);
    polylineElement.SetAttribute("stroke", "grey");
    polylineElement.SetAttribute("stroke-width", "5");
    polylineElement.SetAttribute("fill", "none");

	// Add the SVG polyline to children of the <svg> element
	svgElement.AppendChild(polylineElement);

Die Methode CreateSVGPoint() erzeugt eine Instanz der Klasse SVGPoint, in der Sie die Werte „X“ und „Y“ über gleichnamige Eigenschaften festlegen können. Das Standardobjekt wird auf den Punkt (0,0) im benutzerdefinierten Koordinatensystem initialisiert.

Die Methode AppendItem(T newItem) fügt einen neuen Punkt am Ende der Liste ein. Gerade Linien verbinden diese Punkte in der Liste und bilden eine Polylinie oder ein Polygon – eine ebene geometrische Form, die durch eine geschlossene Polylinie gebildet wird.

Die Methode AppendChild(node) fügt das neue Kind am Ende der Liste der Kinder dieses Knotens hinzu. Das Code-Snippet zeigt, dass die Attribute stroke, stroke-width und fill angegeben sind und das polylineElement als letztes untergeordnetes Element in das <svg>-Element eingefügt wird.

Betrachten Sie ein Beispiel für die Bearbeitung einer vorhandenen SVG-Datei basic-shapes.svg: Wir fügen den oben beschriebenen Kreis und die Polylinie hinzu und ändern die Stricheigenschaften für alle Kreise und Ellipsen. Der folgende Codeausschnitt zeigt, wie man alle Kreise und Ellipsen in einem <svg>-Element findet und ihre Stricheigenschaften ersetzt:

    // Set stroke attributes for all <circle> and <ellipse> elements
    foreach (Element element in svgElement.Children)
    {
        if (element is SVGCircleElement || element is SVGEllipseElement)
        {
            element.SetAttribute("stroke-width", "6");
            element.SetAttribute("stroke", "#C8102E");
        }
    }

Die Abbildung zeigt die Visualisierung der ursprünglichen SVG-Datei basic-shapes.svg und der Datei, die bearbeitet (modifiziert) wurde.

Bearbeiten Sie den SVG-Pfad – Edit SVG Path

Um einen SVG-Pfad mit der Aspose.SVG-API zu erstellen, müssen Sie eine Instanz der Klasse SVGPathElement mit der Methode CreateElementNS(namespaceURI, qualifizierterName) erstellen.

Die Methoden CreateSVGPathSegMovetoAbs(x, y), CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) und CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) nehmen Parameter von an Pfaddatenbefehle M, C und T als eigene Parameter. Die Eigenschaft PathSegList des Typs SVGPathSegList bietet Zugriff auf den Inhalt des Attributs d in Form einer Pfadsegmentliste, die der SVG-Syntax entspricht (Details finden Sie im Artikel SVG-Pfaddaten).

Der folgende Codeausschnitt zeigt, wie der SVG-Pfad erstellt und in das Element <svg> eingefügt wird:

    // Create a <path> element
    var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

	// Set d attribute parameters - SVG path data
	SVGPathSeg pathSeg1 = pathElement.CreateSVGPathSegMovetoAbs(10, 200);
	SVGPathSeg pathSeg2 = pathElement.CreateSVGPathSegCurvetoQuadraticAbs(180, 200, 25, 210);
	SVGPathSeg pathSeg3 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(300, 250);
	SVGPathSeg pathSeg4 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(420, 250);
	SVGPathSeg pathSeg5 = pathElement.CreateSVGPathSegCurvetoQuadraticSmoothAbs(490, 150);
	pathElement.PathSegList.AppendItem(pathSeg1);
	pathElement.PathSegList.AppendItem(pathSeg2);
	pathElement.PathSegList.AppendItem(pathSeg3);
	pathElement.PathSegList.AppendItem(pathSeg4);
	pathElement.PathSegList.AppendItem(pathSeg5);

	// Set fill and stroke attributes
	pathElement.SetAttribute("stroke", "magenta");
	pathElement.SetAttribute("fill", "none");
	pathElement.SetAttribute("stroke-width", "4");

	// Add the path as the first child in the <svg> element
	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

Sie können solch detaillierten und ausführlichen Code in Bezug auf das DOM, die Programmierung, die Arbeit mit dem Dokument und die Navigation in der Datei verwenden. Mit der Methode SetAttribute() können Sie den Code für die SVG-Pfaddateneinstellung d in eine einzelne Zeile schreiben.

Im folgenden Beispiel verwenden wir den einzeiligen Code, um denselben Pfad (ursprünglicher SVG-Pfad) zu erstellen. Darüber hinaus werden wir die Parameter der Befehle moveto(x,y) M und T(x,y) im ursprünglichen Pfad bearbeiten, um einen neuen zu erhalten.

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

    // Set SVG Namespace Url
    string SvgNamespace = "https://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <path> element and set SVG path data 
        var pathElement = (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");
        pathElement.SetAttribute("d", "M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150");
        
        // Edit SVG path
        foreach (SVGPathSeg pathSeg in pathElement.PathSegList)
        {
            // Editing T commands parameters
            if (pathSeg is SVGPathSegCurvetoQuadraticSmoothAbs)
            {
                SVGPathSegCurvetoQuadraticSmoothAbs pathSegCurvetoQuadraticSmoothAbs = pathSeg as SVGPathSegCurvetoQuadraticSmoothAbs;
                pathSegCurvetoQuadraticSmoothAbs.X -= 60;
                pathSegCurvetoQuadraticSmoothAbs.Y -= 65;
            }
            //  Editing M command parameters
            if (pathSeg is SVGPathSegMovetoAbs)
            {
                SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;
                pathSegMovetoAbs.X = 200;
                pathSegMovetoAbs.Y = 100;
            }
        }
        // Set fill and stroke attributes
        pathElement.SetAttribute("stroke", "red");
        pathElement.SetAttribute("fill", "none");
        pathElement.SetAttribute("stroke-width", "4");

        // Add the <path> element as the first child to the <svg> element
    	svgElement.InsertBefore(pathElement, svgElement.FirstChild);

    	// Save the document
        document.Save(Path.Combine(OutputDir, "edit-svg-path-data.svg"));
    }

Die Abbildung zeigt den ursprünglichen (schwarz) und den geänderten (rot) Pfad. Sie können die bearbeitete SVG-Datei anzeigen und speichern, indem Sie dem Link edit-svg-path-data.svg folgen.

Um eine SVG-Datei zu bearbeiten, müssen Sie zunächst die zu bearbeitenden Elemente im Dokument finden. Dafür gibt es verschiedene Möglichkeiten, beispielsweise CSS-Selektoren oder XPath-Abfragen. Detaillierte Informationen zum Bearbeiten einer SVG-Datei mithilfe einer Navigation durch das Dokument finden Sie im Artikel Navigation & Inspection SVG.

Wenn Sie die SVG-Farben für Elemente ändern möchten, lesen Sie bitte die Details im Artikel So ändern Sie die SVG-Farbe. Hier erfahren Sie, wie Sie mithilfe der Bibliothek Aspose.SVG für .NET mit SVG-Farben arbeiten und wie Sie die SVG-Farbe von Elementen oder die Hintergrundfarbe in SVG-Dateien ändern.

SVG-Zeichnung auf vorhandener Bitmap

Die Bitmap kann als Hintergrund zum Zeichnen verwendet werden. Sie können die SVG-Formen, Pfade oder Text anhängen. Die folgende Abbildung wurde beispielsweise erstellt, indem der Bitmap, die als Hintergrund fungiert, Kreise und Text hinzugefügt wurden:

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="http://docs.aspose.com/svg/images/api/seaside.jpg" height="480" width="640" x="20" y="20"/>
	<text style="font-size: 1.4em;" x="420px" fill="gold" y="280px">The beach is beautiful...</text>
	<circle cx="520" cy="120" r="60" stroke="gold" stroke-width="70" fill="none" stroke-dasharray="2,14"/>
</svg>

Der folgende C#-Code erstellt das obige SVG-Dokument von Grund auf. Wir fügen dem Dokument einige SVG-Elemente wie ein Bild, Text und ein Kreiselement hinzu und speichern das SVG-Dokument dann in einer Datei:

1. Erstellen Sie ein SVG-Dokument mit der Klasse SVGDocument und greifen Sie über die Eigenschaft RootElement auf das Stamm-SVG-Element zu.
2. Erstellen Sie ein <image>-Element, legen Sie die erforderlichen Attribute fest und fügen Sie es dem <svg>-Element hinzu.
   • Verwenden Sie die Methode CreateElementNS(namespaceURI, qualifizierterName) der SVGDocument-Klasse, um eine Instanz der Klasse SVGImageElement zu erstellen.
   • Verwenden Sie Eigenschaften vom Typ SVGAnimatedLength, deren statische Daten über die Konstruktion festgelegt oder gelesen werden können: element.X.BaseValue.Value: Legen Sie href, height, width, x und fest y-Attribute.
3. Erstellen Sie auf ähnliche Weise ein <text>-Element mit der Klasse SVGTextElement und legen Sie die erforderlichen Attribute fest. Verwenden Sie die Eigenschaft Style, um die Schriftgröße festzulegen, und die Methode SetAttribute(name, value), um Attribute wie x, y und fill anzugeben.
4. Erstellen Sie ein <circle>-Element mit der Klasse SVGCircleElement. Die Attribute cx, cy und r definieren die Mittelpunktkoordinaten und den Radius des Kreises. Andere Attribute wie stroke, stroke-width, fill und stroke-dasharray werden zum Stylen des Kreises verwendet.
5. Verwenden Sie die Methode AppendChild(), um die erstellten SVG-Elemente (imageElement, textElement und CircleElement) am Ende der Liste der untergeordneten Elemente des SVG-Stammelements (svgElement) hinzuzufügen.
6. Rufen Sie die Methode Save() auf, um das SVG-Dokument in einer Datei mit dem Namen im angegebenen Ausgabeverzeichnis zu speichern.

using Aspose.Svg;
using System.IO;
...
    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create an <image> element and add it into svgElement
        var imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
        imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
        imageElement.Height.BaseVal.Value = 480;
        imageElement.Width.BaseVal.Value = 640;
        imageElement.X.BaseVal.Value = 20;
        imageElement.Y.BaseVal.Value = 20;
        svgElement.AppendChild(imageElement);

        // Create a <text> element, set its attributes, and it into svgElement
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "1.4em";
        textElement.SetAttribute("x", "420px");
        textElement.SetAttribute("fill", "gold");
        textElement.SetAttribute("y", "280px");
        textElement.TextContent = "The beach is beautiful...";
        svgElement.AppendChild(textElement);

        // Create a <circle> element, set its attributes, and add it into svgElement
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 520;
        circleElement.Cy.BaseVal.Value = 120;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "gold");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-drawing-on-bitmap.svg"));
    }

Wir haben den SVG-Kreis mit einem großen Wert für stroke-width gemalt. Das Anwenden des Attributs stroke-dasharray wandelt den Strich des Kreises in eine gestrichelte Linie um. Durch die Auswahl der Werte der gefüllten/ungefüllten Bereiche können Sie den gewünschten visuellen Effekt erzielen. Weitere Informationen zu den Eigenschaften von Stilattributen finden Sie im Artikel Füllungen und Striche in SVG.

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.