SVG-Dateien in C# bearbeiten

Aspose.SVG for .NET bearbeitet SVG als strukturiertes Vektordokument. Laden Sie eine SVG-Datei in ein SVGDocument, suchen oder erstellen Sie SVG-Elemente über DOM-APIs, ändern Sie Geometrie, Attribute, Text, Stile oder Pfaddaten und speichern Sie die bearbeitete Datei, ohne sie zu rastern.

Ein typischer Arbeitsablauf zur SVG-Bearbeitung:

1. Laden Sie eine vorhandene SVG-Datei oder erstellen Sie ein neues SVGDocument.
2. Suchen Sie ein Element mit einem CSS-Selektor oder erstellen Sie mit CreateElementNS() ein neues Element.
3. Ändern Sie Eigenschaften oder Attribute und fügen Sie neuen Inhalt in die SVG-Struktur ein.
4. Speichern Sie das bearbeitete SVG-Dokument mit Save().

Schnellstart: Eine Form zu einer SVG-Datei hinzufügen

Das folgende Beispiel lädt eine SVG-Datei, fügt ihrem <svg>-Stammelement einen blauen Kreis hinzu und speichert das geänderte Dokument:

using System.IO;
using Aspose.Svg;

string inputPath = Path.Combine(DataDir, "shapes.svg");
string outputPath = Path.Combine(OutputDir, "shapes-with-circle.svg");
const string SvgNamespace = "http://www.w3.org/2000/svg";

using (SVGDocument document = new SVGDocument(inputPath))
{
    // Access the root <svg> element, which is present in an SVG document.
    SVGSVGElement svgElement = document.RootElement;

    // Create a circle and define its geometry and appearance.
    SVGCircleElement circle = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    circle.SetAttribute("fill", "#3A86FF");

    // Add the circle to the document tree and save the edited SVG file.
    svgElement.AppendChild(circle);
    document.Save(outputPath);
}

Wenn Sie das zu bearbeitende Element zunächst suchen müssen, finden Sie Beispiele mit CSS-Selektoren und XPath im Artikel SVG in C# inspizieren und navigieren. Optionen zum Laden von Dokumenten beschreibt SVG-Dokumente erstellen und laden.

Elemente hinzufügen und Attribute festlegen

Die Eigenschaft RootElement gibt das <svg>-Stammelement zurück. Neue SVG-Elemente werden im SVG-Namespace erstellt und anschließend an einen Container angehängt oder an einer bestimmten Position in die Dokumentstruktur eingefügt.

Dieses Fragment erstellt ein <g>-Element und fügt es als erstes untergeordnetes Element des Stammelements ein:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGGElement groupElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");

// Apply common styles to every graphic element later added to the group.
groupElement.SetAttribute("fill", "#8A8D8F");
groupElement.SetAttribute("stroke", "magenta");
groupElement.SetAttribute("stroke-width", "4");

svgElement.InsertBefore(groupElement, svgElement.FirstChild);

Verwenden Sie SetAttribute(), um SVG-Attribute wie fill, stroke, transform, class oder d für neu erstellte oder vorhandene Elemente festzulegen oder zu ändern.

Attributwerte können mit den Methoden SetAttribute(name, value), GetAttribute(name), HasAttribute(name) und RemoveAttribute(name) der Klasse Element verwaltet werden.

SVG-Formen hinzufügen und ändern

Aspose.SVG for .NET stellt typisierte DOM-Klassen für Standardformen bereit, darunter SVGCircleElement, SVGEllipseElement, SVGRectElement, SVGLineElement, SVGPolylineElement, SVGPolygonElement und SVGPathElement. Mit ihren typisierten Eigenschaften lässt sich Geometrie direkt bearbeiten: Zum Beispiel definieren Cx.BaseVal.Value, Cy.BaseVal.Value und R.BaseVal.Value einen Kreis, während der Inhalt als editierbare Vektorgrafik erhalten bleibt.

Einen Kreis hinzufügen

Ein Kreis wird über die typisierten Eigenschaften Cx, Cy und R gesteuert. Das folgende vollständige Beispiel fügt einem vorhandenen SVG-Dokument einen Kreis hinzu:

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

// Add a circle element to an existing SVG document in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

// Load an SVG document from a file
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "basic-shapes.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a <circle> element
    SVGCircleElement 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_add-circle.svg"));
}

Die Ellipse (Cx, Cy, Rx, Ry), das Rechteck (X, Y, Width, Height, Rx, Ry) und die Linie (X1, Y1, X2, Y2) besitzen eigene Attribute, die auf ähnliche Weise festgelegt werden können.

Eine Polylinie hinzufügen und vorhandene Formen ändern

Das SVG-Element <polyline> speichert seine Scheitelpunktkoordinaten im Attribut points. In Aspose.SVG bietet die Liste SVGPolylineElement.Points typisierten Zugriff auf diese Koordinaten. Mit CreateSVGPoint() können Sie Punkte hinzufügen, ohne die Attributzeichenfolge manuell zusammenzusetzen:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGSVGElement svgElement = document.RootElement;
SVGPolylineElement 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 new polyline to the SVG root element
svgElement.AppendChild(polylineElement);

// Update strokes of circle and ellipse elements already in the SVG document
foreach (Element element in svgElement.Children)
{
    if (element is SVGCircleElement || element is SVGEllipseElement)
    {
        element.SetAttribute("stroke-width", "6");
        element.SetAttribute("stroke", "#C8102E");
    }
}

Das folgende Bild zeigt die ursprüngliche Datei basic-shapes.svg und das Ergebnis nach dem Hinzufügen von Formen und Ändern der Konturattribute.

SVG-Pfaddaten bearbeiten

Die Geometrie eines <path>-Elements wird in seinem Attribut d gespeichert. Erstellen Sie ein typisiertes SVGPathElement, ändern Sie dessen Pfaddaten und fügen Sie es wie jedes andere Element zum SVG-Dokument hinzu:

const string SvgNamespace = "http://www.w3.org/2000/svg";

SVGPathElement pathElement =
    (SVGPathElement)document.CreateElementNS(SvgNamespace, "path");

// Set the path geometry and its visible style.
pathElement.SetAttribute("d", "M 10 200 Q 25 210 180 200 T 300 250 T 420 250 T 490 150");
pathElement.SetAttribute("stroke", "magenta");
pathElement.SetAttribute("fill", "none");
pathElement.SetAttribute("stroke-width", "4");

document.RootElement.InsertBefore(pathElement, document.RootElement.FirstChild);

Wenn der Code Pfadbefehle segmentweise erstellt oder ändert, stellt SVGPathElement auch Operationen für Pfadsegmente bereit. Das folgende Beispiel erstellt einen Pfad und ändert ausgewählte Befehlskoordinaten in einer vorhandenen SVG-Datei:

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

// Edit SVG path data programmatically in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

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

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

    // Set d attribute parameters – SVG path data
    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 vergleicht den ursprünglichen schwarzen Pfad mit dem bearbeiteten roten Pfad. Sie können auch die bearbeitete Beispieldatei öffnen: edit-svg-path-data.svg.

Informationen zur Syntax von Pfadbefehlen und zum Zeichenverhalten finden Sie unter SVG-Pfaddaten.

SVG-Inhalt über einem Bitmap-Bild hinzufügen

Ein SVG-Dokument kann über ein <image>-Element auf ein Rasterbild verweisen und editierbaren Vektortext oder Formen darüber platzieren. Dabei werden die Pixel der Bitmap nicht verändert; Hintergrundbild und SVG-Überlagerung bleiben separate Teile des Vektordokuments.

Dieses Verfahren ist nützlich, wenn ein Foto, ein Scan oder eine andere Rastergrafik Beschriftungen, Markierungen, Badges oder dekorative Grafiken erhalten soll, die weiterhin als SVG bearbeitet werden können. In SVG entspricht die Zeichenreihenfolge der Reihenfolge der Elemente: Wird <image> zuerst und Text oder Formen danach eingefügt, erscheinen die Vektorelemente über dem Bitmap-Hintergrund.

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

So erstellen Sie diese Komposition mit Aspose.SVG for .NET:

1. Erstellen Sie ein SVGDocument und greifen Sie über RootElement auf das <svg>-Stammelement zu.
2. Erstellen Sie mit CreateElementNS() ein SVGImageElement, legen Sie Bildverweis, Position und Größe fest und hängen Sie es als Hintergrund an das Stammelement an.
3. Erstellen Sie ein SVGTextElement, legen Sie Text, Position, Schriftstil und Füllfarbe fest und hängen Sie es nach dem Bild an.
4. Erstellen Sie ein SVGCircleElement, definieren Sie Position, Radius und Konturattribute und hängen Sie es nach dem Hintergrundbild an. In diesem Beispiel erzeugt eine breite gestrichelte Kontur einen sonnenähnlichen Effekt.
5. Rufen Sie Save() auf, um das SVG-Dokument zu schreiben. In der gespeicherten Datei bleiben Bitmap-Verweis, Text und Kreis als editierbare SVG-Elemente erhalten.

Das folgende Beispiel führt diese Schritte aus und speichert die SVG-Ausgabe:

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

// Draw SVG shapes and text on an existing bitmap in C#

// Set the SVG namespace URI
string SvgNamespace = "http://www.w3.org/2000/svg";

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

    // Create an <image> element and add it into svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    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 add it to the <svg> element
    SVGTextElement 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 to the <svg> element
    SVGCircleElement 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"));
}

Weitere Informationen zu Konturbreite, Strichmustern und anderen SVG-Darstellungsattributen finden Sie unter Füllungen und Konturen in SVG.

FAQ

1. Wird eine SVG-Datei beim Bearbeiten mit Aspose.SVG in eine Bitmap konvertiert?

Nein. Bei der Bearbeitung über SVGDocument werden SVG-Elemente, Attribute und Pfaddaten geändert, während das Dokument Vektorinhalt bleibt. Eine Rasterausgabe entsteht nur, wenn SVG ausdrücklich in ein Bildformat wie PNG, JPEG oder WebP konvertiert oder gerendert wird.

2. Wie bearbeite ich ein vorhandenes SVG-Element, anstatt ein neues hinzuzufügen?

Suchen Sie das gewünschte Element mit einem CSS-Selektor oder einer XPath-Abfrage und ändern Sie anschließend seine Attribute oder typisierten SVG-Eigenschaften. Nach Auswahl eines <circle> kann der Code beispielsweise Radius, Position, Füllung oder Kontur ändern. Siehe SVG in C# inspizieren und navigieren und SVG-Farbe ändern.

3. Kann ich ein SVG-Dokument bearbeiten und das geänderte Ergebnis im selben Ablauf konvertieren?

Ja. Laden Sie die Quelle in SVGDocument, nehmen Sie die Änderungen vor, erstellen Sie Speicheroptionen für das Zielformat und rufen Sie Converter.ConvertSVG(document, options, outputPath) auf. Verwenden Sie beispielsweise PdfSaveOptions für PDF oder ImageSaveOptions für PNG, JPEG, TIFF, GIF, BMP oder WebP. Vollständige Beispiele finden Sie unter SVG-Dateien in C# konvertieren.

4. Kann ich eine vorhandene SVG-Form durch ein anderes Element ersetzen?

Ja. Suchen Sie das vorhandene Element mit einem Selektor oder einer XPath-Abfrage, erstellen Sie den Ersatz mit CreateElementNS(), fügen Sie das neue Element in denselben übergeordneten Knoten ein und entfernen Sie den alten Knoten. So können etwa Kreismarkierungen durch Rechtecke ersetzt werden, ohne den Rest des SVG-Dokuments zu verändern. Ein Beispiel finden Sie unter SVG in C# inspizieren und navigieren.

Nächste Schritte

• SVG-Dokumente erstellen und laden – ein Quelldokument erstellen oder SVG aus Dateien, Streams, Zeichenfolgen und URLs laden.
• SVG in C# inspizieren und navigieren – die zu bearbeitenden Elemente finden.
• SVG-Dokumente speichern – geänderte SVG-Inhalte in Dateien oder Streams speichern.
• SVG Builder – Erweiterte SVG-Erstellung und -Änderung – SVG mit der Builder-API erstellen und ändern.
• Beispiele ausführen – die vollständigen Beispiele von GitHub herunterladen und ausführen.