Edit SVG Using CSS Selectors in C#

CSS selectors are a practical way to target specific SVG elements before editing them. With Aspose.SVG for .NET, C# code can use QuerySelector() and QuerySelectorAll() to find elements by tag name, hierarchy, attributes, or position in the SVG tree, then update attributes, replace nodes, or change path data.

This article uses the sample owl.svg illustration. The examples select circles and paths in the SVG DOM and produce edited versions of the original vector image.

CSS Selector Editing Workflow

A selector-based editing workflow usually has four steps:

1. Load the source SVG file into an SVGDocument.
2. Use QuerySelector() for one element or QuerySelectorAll() for a list of elements.
3. Update attributes, styles, text, geometry, or path data of the selected elements.
4. Save the edited SVG document.

For a shorter introduction to DOM navigation, XPath, and node filters, see Inspect and Navigate SVG in C#.

Select and Edit SVG Elements

The first example edits the source owl.svg file. The owl illustration is built from path and circle elements. The code uses CSS selectors to:

• find circle elements and change their attributes to make the eyes larger and blue;
• find the path element that represents the wing and change its appearance.

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

// Edit SVG elements with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Find the first element that matches the specified in selector
    SVGGElement gElement = svgElement.QuerySelector("g") as SVGGElement;

    // Find all <circle> elements in a <g> element
    NodeList circleNodes = gElement.QuerySelectorAll("circle");

    // Make big blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;
        circleElement.R.BaseVal.Value *= 1.5F;
        circleElement.SetAttribute("stroke", "blue");
    }

    // Get a path for the owl's wing
    SVGPathElement wingPath = gElement.QuerySelector("path:nth-child(2)") as SVGPathElement;

    // Apply style attributes to the wing
    wingPath.SetAttribute("stroke-width", "16");
    wingPath.SetAttribute("stroke-dasharray", "2 8");

    document.Save(Path.Combine(OutputDir, "owl-edited1.svg"));
}

You can open the edited SVG file here: owl-edited1.svg.

Replace Selected SVG Elements

The second example continues with the same owl.svg source file. It selects the original round eyes and replaces them with square eyes:

1. Create a new <g> element for the replacement rectangles.
2. Use QuerySelectorAll("g:first-child > circle") to select circles in the first group.
3. Create <rect> elements with the required size and style attributes.
4. Insert the rectangles into the new group.
5. Remove the selected <circle> elements from the document.

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

// Replace SVG circles with rectangles using CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(new Url("https://docs.aspose.com/svg/files/owl.svg")))
{
    // Get the root <svg> element of the document
    SVGSVGElement svgElement = document.RootElement;

    // Create a new <g> element with style attributes and append it as the last child of the <svg> element
    SVGGElement gElement = (SVGGElement)document.CreateElementNS(SvgNamespace, "g");
    gElement.SetAttribute("fill", "none");
    gElement.SetAttribute("stroke-width", "2");
    svgElement.AppendChild(gElement);

    // Find all <circle> elements from the first <g> element
    NodeList circleNodes = svgElement.QuerySelectorAll("g:first-child > circle");

    // Make square sky-blue eyes
    foreach (Node circleNode in circleNodes)
    {
        SVGCircleElement circleElement = circleNode as SVGCircleElement;

        float cx = circleElement.Cx.BaseVal.Value;
        float cy = circleElement.Cy.BaseVal.Value;
        float r = circleElement.R.BaseVal.Value;

        SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = cx - r;
        rectElement.Y.BaseVal.Value = cy - r;
        rectElement.Width.BaseVal.Value = 3 * r;
        rectElement.Height.BaseVal.Value = 3 * r;
        rectElement.SetAttribute("stroke", "SkyBlue");

        // Add a <rectangle> element into the second (new) <g> element and remove <circle> elements
        gElement.AppendChild(rectElement);
        circleElement.Remove();
    }
    // Recolor last rectangle in the second (new) <g> element
    Element lastRect = gElement.LastElementChild;
    lastRect.SetAttribute("stroke", "red");

    document.Save(Path.Combine(OutputDir, "owl-svg-eyes.svg"));
}

Select a Path and Change Its Data

The final part changes the owl wing from a curve to a polyline and recolors it. The example selects the path element, updates path-related data, and saves the result:

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

// Modify SVG path data selected with CSS selectors in C#

// Load an SVG document
using (SVGDocument document = new SVGDocument(Path.Combine(DataDir, "owl-svg-eyes.svg")))
{
    SVGSVGElement svgElement = document.RootElement;

    // Get a path for owl's body from the first <g> element
    Element bodyPath = (svgElement.QuerySelector("g:first-child") as SVGGElement).FirstElementChild;
    bodyPath.SetAttribute("stroke", "Teal");

    // Get a path for the owl's wing from the first <g> element
    SVGPathElement wingPath = svgElement.QuerySelector("g:first-child > path:nth-child(2)") as SVGPathElement;

    // Form new wing path data based on the old
    string d = "";
    foreach (SVGPathSeg pathSeg in wingPath.PathSegList)
    {
        if (pathSeg is SVGPathSegMovetoAbs)
        {
            SVGPathSegMovetoAbs pathSegMovetoAbs = pathSeg as SVGPathSegMovetoAbs;

            d += string.Format(" M {0} {1}", pathSegMovetoAbs.X, pathSegMovetoAbs.Y);
        }
        if (pathSeg is SVGPathSegCurvetoCubicAbs)
        {
            SVGPathSegCurvetoCubicAbs pathSegCurvetoCubicAbs = pathSeg as SVGPathSegCurvetoCubicAbs;

            d += string.Format(
                " L {0} {1} L {2} {3}",
                (pathSegCurvetoCubicAbs.X1 + pathSegCurvetoCubicAbs.X2) / 2F,
                (pathSegCurvetoCubicAbs.Y1 + pathSegCurvetoCubicAbs.Y2) / 2F,
                pathSegCurvetoCubicAbs.X,
                pathSegCurvetoCubicAbs.Y
            );
        }
    }
    // Set d attribute - new path data formation
    wingPath.SetAttribute("d", d.Trim());
    wingPath.SetAttribute("stroke", "Teal");

    document.Save(Path.Combine(OutputDir, "owl-edited2.svg"));
}

The image compares the original owl image and two edited versions.

You can open the second edited SVG file here: owl-edited2.svg.

FAQ

1. When should I use QuerySelector() instead of QuerySelectorAll()?
Use QuerySelector() when only the first matching element is needed. Use QuerySelectorAll() when all matching elements should be inspected or edited, for example all circles in a group.

2. Can CSS selectors change SVG elements by themselves?
No. Selectors only find elements. After an element is selected, use DOM methods and properties such as SetAttribute(), AppendChild(), RemoveChild(), or typed SVG properties to make changes.

3. Can selector-based edits be converted to PDF or images?
Yes. After editing the SVGDocument, call Converter.ConvertSVG(document, options, outputPath) with suitable save options, or save the SVG file first and convert it later.

Next Steps

• Inspect and Navigate SVG in C# – learn DOM traversal, XPath, and custom node filters.
• Edit SVG Files in C# – add shapes, paths, and text to SVG documents.
• Convert SVG Files in C# – convert edited SVG files to PDF, XPS, and image formats.
• How to Run the Examples – download and run the complete examples from GitHub.