Editar archivos SVG en C#

Aspose.SVG for .NET edita SVG como un documento vectorial estructurado. Cargue un archivo SVG en un SVGDocument, busque o cree elementos SVG mediante las API DOM, cambie su geometría, atributos, texto, estilos o datos de ruta y guarde el archivo editado sin rasterizarlo.

Un flujo de edición SVG habitual es:

1. Cargar un archivo SVG existente o crear un nuevo SVGDocument.
2. Localizar un elemento con un selector CSS o crear uno nuevo con CreateElementNS().
3. Modificar propiedades o atributos e insertar nuevo contenido en el árbol SVG.
4. Guardar el documento SVG editado con Save().

Inicio rápido: agregar una forma a un archivo SVG

El siguiente ejemplo carga un archivo SVG, agrega un círculo azul a su elemento raíz <svg> y guarda el documento modificado:

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

Si todavía no conoce la ubicación del elemento que debe editar, consulte Inspeccionar y navegar SVG para ver ejemplos con selectores CSS y XPath. Para las opciones de carga, consulte Crear y cargar documentos SVG.

Agregar elementos y establecer atributos

La propiedad RootElement devuelve el elemento raíz <svg>. Los nuevos elementos SVG deben crearse en el espacio de nombres SVG; después puede agregarlos a un contenedor o insertarlos en una posición determinada del árbol del documento.

Este fragmento crea un elemento <g> y lo inserta como primer hijo del elemento raíz:

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

Utilice SetAttribute() para establecer o actualizar atributos SVG como fill, stroke, transform, class o d en elementos creados o existentes.

Puede administrar los valores de atributos con los métodos SetAttribute(name, value), GetAttribute(name), HasAttribute(name) y RemoveAttribute(name) de la clase Element.

Agregar y modificar formas SVG

Aspose.SVG for .NET proporciona clases DOM tipadas para formas SVG estándar, incluidas SVGCircleElement, SVGEllipseElement, SVGRectElement, SVGLineElement, SVGPolylineElement, SVGPolygonElement y SVGPathElement. Sus propiedades tipadas permiten editar la geometría directamente; por ejemplo, Cx.BaseVal.Value, Cy.BaseVal.Value y R.BaseVal.Value definen un círculo, mientras el contenido sigue siendo vectorial y editable.

Agregar un círculo

Un círculo se controla mediante sus propiedades tipadas Cx, Cy y R. El siguiente ejemplo completo agrega un círculo a un documento SVG existente:

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

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

Agregar una polilínea y actualizar formas existentes

El elemento SVG <polyline> almacena las coordenadas de sus vértices en el atributo points. En Aspose.SVG, la lista SVGPolylineElement.Points proporciona acceso tipado a esas coordenadas. Con CreateSVGPoint() puede agregar puntos sin construir manualmente la cadena del atributo:

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

La imagen muestra el archivo original basic-shapes.svg y el resultado después de agregar formas y cambiar los atributos de trazo.

Editar datos de rutas SVG

La geometría de un elemento <path> se almacena en su atributo d. Cree un SVGPathElement tipado, actualice sus datos de ruta y agréguelo al documento SVG como cualquier otro elemento:

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

Si su código crea o ajusta comandos de ruta segmento a segmento, SVGPathElement también expone operaciones para segmentos de ruta. El siguiente ejemplo crea una ruta y cambia las coordenadas de comandos seleccionados en un archivo SVG existente:

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

La figura compara la ruta original en negro y la ruta editada en rojo. También puede abrir el archivo de ejemplo editado: edit-svg-path-data.svg.

Para obtener información sobre la sintaxis de comandos de ruta y su dibujo, consulte Datos de rutas SVG.

Agregar contenido SVG sobre una imagen de mapa de bits

Un documento SVG puede hacer referencia a una imagen ráster mediante un elemento <image> y colocar sobre ella texto vectorial o formas editables. Esto no altera los píxeles del mapa de bits; la imagen de fondo y la superposición SVG continúan siendo partes separadas del documento vectorial.

Esta técnica resulta útil cuando una foto, un escaneo u otro recurso ráster necesita etiquetas, marcadores, insignias o gráficos decorativos que aún puedan editarse como SVG. En SVG, el orden de pintado sigue el orden de los elementos: si <image> se agrega primero y el texto o las formas después, los elementos vectoriales aparecen sobre el fondo ráster.

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

Para crear esta composición con Aspose.SVG for .NET:

1. Cree un SVGDocument y acceda al elemento raíz <svg> mediante RootElement.
2. Cree un SVGImageElement con CreateElementNS(), establezca la referencia de imagen, posición y tamaño, y agréguelo a la raíz como fondo.
3. Cree un SVGTextElement, especifique texto, posición, estilo de fuente y color de relleno, y agréguelo después de la imagen.
4. Cree un SVGCircleElement, defina posición, radio y atributos de trazo, y agréguelo después de la imagen de fondo. En este ejemplo, un trazo discontinuo grueso produce un efecto decorativo similar al sol.
5. Llame a Save() para escribir el documento SVG. El archivo guardado conserva el mapa de bits referenciado, el texto y el círculo como elementos SVG editables.

El siguiente ejemplo realiza estos pasos y guarda la salida SVG:

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

Para obtener más información sobre el ancho de trazo, los patrones discontinuos y otros atributos visuales de SVG, consulte Rellenos y trazos en SVG.

Preguntas frecuentes

1. ¿Editar un archivo SVG con Aspose.SVG lo convierte en un mapa de bits?

No. La edición mediante SVGDocument modifica elementos, atributos y datos de ruta SVG mientras el documento sigue siendo contenido vectorial. La salida ráster solo se produce al convertir o renderizar explícitamente SVG a un formato de imagen como PNG, JPEG o WebP.

2. ¿Cómo edito un elemento SVG existente en lugar de agregar uno nuevo?

Localice el elemento necesario con un selector CSS o una consulta XPath y cambie sus atributos o propiedades SVG tipadas. Por ejemplo, tras seleccionar un <circle>, el código puede actualizar radio, posición, relleno o trazo. Consulte Inspeccionar y navegar SVG y Cómo cambiar el color SVG.

3. ¿Puedo editar un documento SVG y convertir el resultado modificado en el mismo flujo?

Sí. Cargue el origen en SVGDocument, realice los cambios, cree opciones de guardado para el formato de destino y llame a Converter.ConvertSVG(document, options, outputPath). Por ejemplo, utilice PdfSaveOptions para PDF o ImageSaveOptions para PNG, JPEG, TIFF, GIF, BMP o WebP. Consulte Convertir archivos SVG en C# para ver ejemplos completos.

4. ¿Puedo reemplazar una forma SVG existente por un elemento diferente?

Sí. Busque el elemento existente mediante un selector o una consulta XPath, cree el sustituto con CreateElementNS(), inserte el elemento nuevo en el mismo nodo padre y elimine el nodo anterior. Por ejemplo, puede sustituir marcadores circulares por rectángulos sin cambiar el resto del documento SVG. Consulte Inspeccionar y navegar SVG para ver un ejemplo.

Siguientes pasos

• Crear y cargar documentos SVG – crear un documento de origen o cargar SVG desde archivos, secuencias, cadenas y URL.
• Inspeccionar y navegar SVG – localizar los elementos que deben editarse.
• Guardar documentos SVG – guardar contenido SVG modificado en archivos o secuencias.
• SVG Builder – Creación y modificación avanzada de SVG – crear y modificar SVG con la API Builder.
• Cómo ejecutar los ejemplos – descargar y ejecutar los ejemplos completos desde GitHub.