Editar archivo SVG – Ejemplos de C#

Aspose.SVG for .NET le permite editar archivos SVG y realizar cambios en su contenido. El modelo de objetos de documento (DOM) de la API es totalmente compatible con las especificaciones SVG oficiales y significa control total sobre los nodos SVG y sus campos para editar. Puede modificar el documento agregando nuevos nodos, eliminando o editando el contenido de los nodos existentes.

En este artículo, mostramos cómo editar SVG usando la biblioteca Aspose.SVG for .NET y consideramos ejemplos detallados de C# sobre cómo agregar elementos a un documento SVG y editarlos.

Agregar elementos a un documento SVG

Aspose.SVG for .NET API le permite agregar varios elementos a un documento. Primero, crearías un nuevo elemento o nodo; luego, puede agregar el elemento al documento.

1. Puede utilizar el método CreateElementNS(namespaceURI, qualifiedName) de la clase SVGDocument para crear una instancia de la clase Element: el elemento requerido del elemento calificado dado. nombre y URI del espacio de nombres. El namespaceURI establece la referencia a la especificación W3C SVG. El qualifiedName debe contener el nombre de la etiqueta de cadena del elemento. Recuerde, debe utilizar la conversión de tipo (conversión explícita) para obtener el elemento correspondiente.

2. Para agregar un elemento al documento SVG, la API proporciona el método InsertBefore(node, child) de la clase Node, que inserta el node antes del nodo secundario existente o al final de la lista de hijos si el child es nulo.

La propiedad RootElement de la clase SVGDocument apunta al elemento raíz <svg> del documento. El siguiente fragmento de código ilustra cómo crear y agregar el elemento <g> como el primer elemento secundario en el documento SVG.

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

Podemos especificar los atributos de los elementos y sus valores usando SetAttribute(name, value), GetAttribute(name), HasAttribute(name), RemoveAttribute(name) métodos de la clase Element. Por ejemplo, si crea un grupo de elementos gráficos y los coloca en el elemento <g>, puede establecer parámetros comunes:

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

Cómo agregar formas básicas a un documento SVG

Las formas SVG básicas se pueden crear usando el método CreateElementNS(namespaceURI, qualifiedName). El qualifiedName debe contener el nombre de la etiqueta de cadena del elemento gráfico SVG.

De esta manera puede crear círculos SVG (clase SVGCircleElement, QualifiedName = “circle”), elipses (clase SVGEllipseElement, QualifiedName = “ellipse”), rectángulos (clase SVGRectElement, QualifiedName = “rect”), líneas (clase SVGLineElement, QualifiedName = " line"), polilíneas (clase SVGPolylineElement, QualifiedName = “polyline”), polígonos (clase SVGPolygonElement, QualifiedName = “polygon”) y curvas de Bézier (clase SVGPathElement, QualifiedName = “path”).

Círculo SVG – SVG Circle

Cada elemento gráfico tiene sus propios atributos (propiedades) específicos, a través de los cuales se pueden controlar sus parámetros y características. Cx, Cy, R son propiedades circulares del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer a través de la construcción: element.X.BaseVal.Value.

El siguiente fragmento de código muestra cómo crear un círculo SVG y agregarlo al elemento <svg> del archivo SVG existente:

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://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"));

La elipse (Cx, Cy, Rx, Ry), el rectángulo (X, Y, Width, Height, Rx, Ry) y la línea (X1, Y1, X2, Y2) tienen sus propios atributos que se puede configurar de manera similar.

Polilínea SVG – SVG Polyline

SVGPolygonElement y SVGPolylineElement tienen la propiedad Points del tipo SVGPointList, que proporciona acceso al contenido básico del atributo points, que coincide de forma única con la sintaxis SVG.

En el siguiente fragmento de código se ilustra un ejemplo sencillo de creación de polilíneas SVG:

    // Set SVG Namespace Url
    string SvgNamespace = "http://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);

El método CreateSVGPoint() produce una instancia de la clase SVGPoint, en la que puede establecer los valores X e Y a través de las propiedades del mismo nombre. El objeto predeterminado se inicializa en el punto (0,0) en el sistema de coordenadas personalizado.

El método AppendItem(T newItem)inserta un nuevo punto al final de la lista. Las líneas rectas conectan estos puntos en la lista y forman una polilínea o polígono, una forma geométrica plana formada por una polilínea cerrada.

El método AppendChild(node) agrega el nuevo hijo al final de la lista de hijos de este nodo. El fragmento de código muestra que se especifican los atributos stroke, stroke-width y fill, y que polylineElement se inserta en el elemento <svg> como último elemento secundario.

Considere un ejemplo de edición de un archivo SVG existente basic-shapes.svg: agregaremos el círculo y la polilínea descritos anteriormente y cambiaremos las propiedades del trazo para todos los círculos y elipses. El siguiente fragmento de código muestra cómo encontrar todos los círculos y elipses en un elemento <svg> y reemplazar sus propiedades de trazo:

    // 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");
        }
    }

La figura muestra la visualización del archivo SVG original basic-shapes.svg y el archivo que fue editado (modificado).

Editar Path SVG – Edit SVG Path

Para crear una ruta SVG usando la API Aspose.SVG, necesita crear una instancia de la clase SVGPathElement usando el método CreateElementNS(namespaceURI, qualifiedName).

Los métodos CreateSVGPathSegMovetoAbs(x, y), CreateSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1) y CreateSVGPathSegCurvetoQuadraticSmoothAbs(x, y) toman parámetros de comandos de datos de ruta M, C y T como sus propios parámetros. La propiedad PathSegList del tipo SVGPathSegList proporciona acceso al contenido del atributo d, en forma de lista de segmentos de ruta, que coincide con la sintaxis SVG (los detalles se encuentran en el artículo Datos de path SVG).

El siguiente fragmento de código muestra cómo crear la ruta SVG y agregarla al elemento <svg>:

    // 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);

Puede utilizar dicho código detallado y completo en términos de DOM, programación, trabajo con el documento y navegación por el archivo. Usando el método SetAttribute(), puede escribir el código en una sola línea para la configuración d de los datos de ruta SVG.

En el siguiente ejemplo, utilizamos el código de una línea para crear la misma ruta (ruta SVG original). Además, editaremos los parámetros de los comandos moveto(x,y) M y T(x,y) en la ruta original para recibir uno nuevo.

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

    // Set SVG Namespace Url
    string SvgNamespace = "http://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"));
    }

La figura ilustra las rutas originales (negras) y modificadas (rojas). Puede ver y guardar el archivo SVG editado siguiendo el enlace: edit-svg-path-data.svg.

Para editar un archivo SVG, primero debe encontrar los elementos a editar en el documento. Hay varias formas de hacer esto, como selectores CSS o consultas XPath. Puede encontrar información detallada sobre cómo editar un archivo SVG navegando por el documento en el artículo Navegación e inspección SVG.

Si desea cambiar los colores SVG de los elementos, consulte los detalles en el artículo Cómo cambiar el color SVG. Aquí aprenderá cómo trabajar con color SVG usando la biblioteca Aspose.SVG for .NET y considerará cómo cambiar el color SVG de los elementos o cambiar el color de fondo en archivos SVG.

Dibujo SVG en un mapa de bits existente

El mapa de bits se puede utilizar como fondo para dibujar. Puede agregar las formas, trazados o texto SVG. Por ejemplo, la siguiente figura se crea agregando un círculo y texto al mapa de bits que actúa como fondo:

<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>

El siguiente código C# crea el documento SVG anterior desde cero. Agregamos al documento algunos elementos SVG, como una imagen, texto y un elemento circular, y luego guardamos el documento SVG en un archivo:

1. Cree un documento SVG usando la clase SVGDocument y acceda al elemento SVG raíz usando la propiedad RootElement.
2. Cree un elemento <image>, establezca los atributos requeridos y agréguelo al elemento <svg>.
   • Utilice el método CreateElementNS(namespaceURI, qualifiedName) de la clase SVGDocument para crear una instancia de la clase SVGImageElement.
   • Utilice propiedades del tipo SVGAnimatedLength, cuyos datos estáticos se pueden configurar o leer a través de la construcción: element.X.BaseVal.Value: establezca href, height, width, x, y atributos y.
3. De manera similar, cree un elemento <text> usando la clase SVGTextElement y establezca los atributos requeridos. Utilice la propiedad Style para establecer el tamaño de fuente y el método SetAttribute(name, value) para especificar atributos como x, y y fill.
4. Cree un elemento <circle> usando la clase SVGCircleElement. Los atributos cx, cy y r definen las coordenadas centrales y el radio del círculo. Otros atributos como stroke, stroke-width, fill y stroke-dasharray se utilizan para diseñar el círculo.
5. Utilice el método AppendChild() para agregar los elementos SVG creados (imageElement, textElement y circleElement) al final de la lista de elementos secundarios del elemento raíz SVG (svgElement).
6. Llame al método Save() para guardar el documento SVG en un archivo nombrado en el directorio de salida especificado.

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"));
    }

Pintamos el círculo SVG con un valor grande de stroke-width. La aplicación del atributo stroke-dasharray convierte el trazo del círculo en una línea discontinua. Al seleccionar valores de las áreas llenas y vacías, puede lograr el efecto visual deseado. Para obtener más información sobre las propiedades de los atributos de estilo, consulte el artículo Rellenos y trazos en SVG.

En el capítulo SVG Builder: creación y modificación avanzada de SVG, encontrará una guía para manipular SVG de manera efectiva utilizando la API Aspose.SVG Builder, que cubre aspectos desde la creación de elementos básicos hasta técnicas avanzadas como mixins. y azúcar sintáctico.

Puede descargar los ejemplos completos y los archivos de datos desde GitHub. Encontrará información sobre la descarga desde GitHub y la ejecución de ejemplos en la sección Cómo ejecutar los ejemplos.