Editar SVG em C#

Como editar SVG em C#

A biblioteca Aspose.SVG for .NET fornece um conjunto de classes e métodos para criar, editar, converter e outras manipulações com arquivos SVG. Uma vez criado o objeto de documento, este pode ser preenchido com elementos SVG. Pode personalizar o documento adicionando mais elementos, como formas SVG, textos, filtros, etc. Neste artigo, exploraremos dois exemplos em C# que demonstram diferentes abordagens para construir e editar SVGs: um usando a Aspose.SVG Builder API , e o outro usando manipulação manual do DOM com configuração direta de elementos e atributos.

Primeiro, certifique-se de ter o Aspose.SVG for .NET API instalado em seu projeto. O processo de instalação é bastante simples. Você pode instalá-lo por meio do console do NuGet Package Manager usando o seguinte comando:

Install-Package Aspose.SVG

Adicionar elementos a um arquivo SVG usando Element Builders

Element Builders são classes especializadas da API Aspose.SVG Builder que facilitam a criação e modificação de elementos SVG no código. Eles geralmente usam padrões como o Fluent Builder Pattern para fornecer uma sintaxe limpa e legível para definir atributos e estruturar conteúdo SVG programaticamente. O código seguinte demonstra uma abordagem concisa e elegante à criação de SVGs de raiz utilizando C#. O exemplo utiliza um Fluent Builder Pattern dentro de SVGSVGElementBuilder para construir e adicionar novos elementos ao SVG: um círculo decorado e texto.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.Salmon).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can add elements to SVG!", x: 270, y: 140, fontSize: 30, fill: Color.DarkRed)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Adicionar elementos a um ficheiro SVG

A API do Modelo de Objeto de Documento (DOM) fornece controlo total sobre os nós SVG e os seus atributos e é totalmente compatível com as especificações oficiais do SVG. É possível modificar o documento adicionando novos nós, removendo os existentes ou editando seu conteúdo. Por exemplo, eis como adicionar um círculo decorado e texto a um SVG:

using System.IO;
using Aspose.Html;
...

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

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

        // Create a text element and set its attributes
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "2.0em";
        textElement.SetAttribute("x", "270px");
        textElement.SetAttribute("fill", "darkred");
        textElement.SetAttribute("y", "140px");
        textElement.TextContent = "I can add elements to SVG!";

        // Create a circle element and set its attributes
        var circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
        circleElement.Cx.BaseVal.Value = 130;
        circleElement.Cy.BaseVal.Value = 130;
        circleElement.R.BaseVal.Value = 60;
        circleElement.SetAttribute("stroke", "salmon");
        circleElement.SetAttribute("stroke-width", "70");
        circleElement.SetAttribute("fill", "none");
        circleElement.SetAttribute("stroke-dasharray", "2,14");

        // Add the text and circle elements into svgElement
        svgElement.AppendChild(textElement);
        svgElement.AppendChild(circleElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Vejamos as etapas simples para editar um documento SVG que ilustram o código С# acima. Os elementos SVG <circle> e <text> são adicionados ao documento SVG criado:

1. Para criar um documento SVG programaticamente do zero, use o construtor SVGDocument() sem parâmetros.
2. A propriedade RootElement da classe SVGDocument aponta para o elemento raiz <svg> do documento.
3. Crie elementos <text> e <circle> com atributos e adicione-os ao elemento <svg>:
   • Você pode usar o método CreateElementNS() para criar instâncias das classes SVGTextElement e SVGCircleElement.
   • Chame o método SetAttribute() para definir atributos especificando posição, tamanho, preenchimento, etc.
   • Use o método AppendChild() para adicionar os elementos em <svg>.
4. Salve o arquivo SVG editado usando o método Save() .

O ficheiro resultante que criámos acima é o mesmo para ambos os exemplos de código (svg-from-scratch.svg) e tem o seguinte aspeto:

Recursos úteis

• O artigo de documentação Edit SVG File – C# Examples fornece informações básicas sobre como ler ou editar o Document Object Model usando a API Aspose.SVG for .NET. O artigo explora como criar elementos SVG e como trabalhar com eles – modificar o documento inserindo novos nós, removendo ou editando o conteúdo de nós existentes.
• No capítulo SVG Builder – Criação e modificação avançadas de SVG , encontrará um guia para manipular SVG de forma eficaz utilizando a API Aspose.SVG Builder, abrangendo aspectos desde a criação de elementos básicos até técnicas avançadas como mixins e açúcar sintático.
• O artigo Element Builders aborda os Element Builders usados na API Aspose.SVG Builder. O artigo aborda a classe SVGElementBuilder, seus construtores especializados e como eles simplificam a programação SVG.

Outros recursos suportados

Use a biblioteca Aspose.SVG C# para converter, mesclar, editar documentos SVG, converter códigos de cores, vetorizar imagens e muito mais!