Crie SVG em C#
Aprenda como criar SVG do zero e como editar seu conteúdo
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:
Instale Aspose.SVG for .NET
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:
- Crie um documento SVG do zero usando o construtor SVGDocument() .
- Salve o arquivo SVG usando um dos métodos Save() .
Código C# para criar um documento SVG vazio
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) :
Código C# para criar um SVG a partir de uma 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:
Código C# para editar 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:
- Para criar um documento SVG programaticamente do zero, use o construtor SVGDocument() sem parâmetros.
- A propriedade
RootElement
da classe SVGDocument aponta para o elemento raiz<svg>
do documento. - 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>
.
- 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!