Crie SVG em C#

Como criar SVG em C#

Scalable Vector Graphics (SVG) é uma linguagem XML para criar gráficos vetoriais bidimensionais, e um documento SVG é um arquivo de texto que descreve imagens como primitivas geométricas: linhas, curvas, formas, texto, etc. visualizações ou trabalhos em materiais impressos, o SVG oferece uma solução versátil e eficiente para criação gráfica. 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. Então, vamos criar um novo documento SVG!

Primeiro, certifique-se de ter 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 Gerenciador de Pacotes NuGet usando o seguinte comando:

Install-Package Aspose.SVG

Crie um documento SVG vazio

A API Aspose.SVG for .NET fornece a classe SVGDocument que pode ser usada para criar um documento SVG. Um SVGDocument é a raiz da hierarquia SVG e contém todo o conteúdo. O seguinte trecho de código C# mostra o uso do construtor padrão SVGDocument() para criar um documento vazio:

1. Crie um documento SVG do zero usando o construtor SVGDocument() .
2. Salve o arquivo SVG usando um dos métodos Save() .

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

    // Initialize an empty SVG document
    using (var document = new SVGDocument())
    {
        // Work with the SVG document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "empty.svg"));
    }

Crie SVG a partir de uma string de memória

Gerar um SVG a partir de uma string de memória pode ser útil se você deseja gerar SVGs dinamicamente. Criar SVG a partir de uma string permite atualizar e representar facilmente conjuntos de dados variáveis ​​em suas visualizações. Você pode criar SVG a partir de um conteúdo de string usando o construtor SVGDocument(string, string) :

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

    var documentContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"70\" cy=\"70\" r=\"60\" fill=\"#ff0000\" /> <polygon points=\"160,10 350,140 210,350 50,199\" style=\"fill: orange\" /></svg>";

    using (var document = new SVGDocument(documentContent, "."))
    {
        // Work with the document here...

        // Save the document to a file
        document.Save(Path.Combine(OutputDir, "from-string.svg"));
    }

Como adicionar elementos a um arquivo SVG

Aspose.SVG for .NET permite editar arquivos SVG e alterar seu conteúdo. O Document Object Model (DOM) da API fornece controle completo sobre os nós SVG e seus atributos e é totalmente compatível com as especificações SVG oficiais.

Depois que o objeto do documento for criado, ele poderá ser preenchido com elementos SVG. Você pode personalizar o documento adicionando mais elementos como formas SVG, textos, filtros etc., usando as classes apropriadas fornecidas pelo namespace Aspose.Svg . Por exemplo, veja como adicionar um círculo decorado e um texto:

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 arquivo resultante que criamos acima (svg-from-scratch.svg) tem a seguinte aparência:

Recursos úteis

• Para saber mais sobre Aspose.SVG para API .NET, visite nossa documentação .
• No artigo Create SVG, Load and Read SVG in C# , você descobre como criar SVG a partir de um arquivo, fluxo ou string de memória; como carregar SVG da Web e ler SVG com recursos assíncronos.
• O artigo de documentação Edit SVG File - C# Examples fornece informações básicas sobre como ler ou editar o modelo de objeto de documento usando Aspose.SVG para API .NET. Você explorará 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 artigo são considerados exemplos detalhados de adição e edição de novos elementos em SVG e aplicação de filtros SVG a bitmaps.
• Recomendamos que você visite nosso guia SVG Drawing – Basics Tutorial se quiser aprender mais sobre regras e sintaxe SVG. Aqui explicamos as regras gerais e as etapas padrão para criar SVG do zero com exemplos simples.

Outros recursos suportados do Aspose.SVG para API .NET

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