Efeito de sombra SVG C#

As imagens SVG são imagens vetoriais amigáveis para a Web que podem ser pesquisadas, indexadas, compactadas e roteirizadas. Considerando que as sombras são um recurso de design comum usado para tornar as imagens esteticamente atraentes e proeminentes. Às vezes, pode ser necessário adicionar um efeito de sombra a uma imagem SVG, como um ícone ou texto, etc. Assim, este artigo explica como criar um efeito de sombra em uma imagem SVG programaticamente em C#.

Efeito de sombra na imagem SVG – Download gratuito da API C#

Aspose.SVG for .NET suporta trabalhar com imagens SVG, pois oferece muitos recursos para editar, atualizar ou converter Scalable Vector Graphics programaticamente em C#. Basta acessar os arquivos DLL de referência na página New Releases ou executar o comando NuGet abaixo para configurá-lo na galeria NuGet, juntamente com todas as dependências, se houver.

PM> Install-Package Aspose.SVG

Como criar efeito de sombra na imagem SVG em C

As etapas a seguir descrevem todo o processo de adição de um efeito de sombra em uma imagem SVG:

  1. Crie um objeto da classe SVGDocument.
  2. Defina o URL do namespace SVG e obtenha o elemento SVG raiz.
  3. Crie um elemento defs e um filterElement para anexar a primitiva de filtro feOffset.
  4. Crie um filtro feBlend e um elemento de texto.
  5. Salve a imagem SVG de saída com o efeito Drop Shadow chamando o método Save.

Criar efeito de sombra na imagem SVG programaticamente em C

Siga as etapas abaixo para criar um efeito de sombra na imagem SVG programaticamente em C#:

  1. Crie um objeto da classe SVGDocument.
  2. Defina o URL do namespace SVG e obtenha o elemento SVG raiz.
  3. Crie um elemento defs e um filterElement para anexar a primitiva de filtro feOffset.
  4. Crie um filtro feBlend e um elemento de texto.
  5. Salve a imagem SVG de saída com um efeito Drop Shadow chamando o método Save.

O trecho de código abaixo mostra como criar um efeito de sombra em uma imagem SVG em C#:

// Inicialize um objeto da classe SVGDocument
Aspose.Svg.SVGDocument document = new Aspose.Svg.SVGDocument();

// Definir URL do namespace SVG
string SvgNamespace = "http://www.w3.org/2000/svg";

// Obter elemento svg raiz do documento
Aspose.Svg.SVGSVGElement svgElement = document.RootElement;

// Crie um elemento defs e adicione ao svgElement
Aspose.Svg.SVGDefsElement defsElement = (Aspose.Svg.SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
svgElement.AppendChild(defsElement);

// Crie um elemento de filtro e adicione ao defsElement
var filterElement = (Aspose.Svg.SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
filterElement.Id = "shadow";
filterElement.SetAttribute("x", "-20px");
filterElement.SetAttribute("y", "-20px");
filterElement.SetAttribute("height", "150px");
filterElement.SetAttribute("width", "150px");
defsElement.AppendChild(filterElement);

// Crie uma primitiva de filtro feOffset e adicione ao filterElement
var feOffsetElement = (Aspose.Svg.Filters.SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
feOffsetElement.In1.BaseVal = "SourceAlpha";
feOffsetElement.SetAttribute("result", "offset");
feOffsetElement.SetAttribute("dx", "3");
feOffsetElement.SetAttribute("dy", "3");
filterElement.AppendChild(feOffsetElement);

//// Cria uma primitiva de filtro feGaussianBlur e adiciona ao filterElement
//var feGaussianBlurElement = (Aspose.Svg.Filters.SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
//feGaussianBlurElement.In1.BaseVal = "deslocamento";
//feGaussianBlurElement.StdDeviationX.BaseVal = 3;
//feGaussianBlurElement.StdDeviationY.BaseVal = 3;
//feGaussianBlurElement.SetAttribute("resultado", "desfoque");
//filterElement.AppendChild(feGaussianBlurElement);

// Crie uma primitiva de filtro feBlend e adicione ao filterElement
var feBlendElement = (Aspose.Svg.Filters.SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
feBlendElement.In1.BaseVal = "SourceGraphic";
feBlendElement.In2.BaseVal = "blur";
feBlendElement.SetAttribute("mode", "normal");
filterElement.AppendChild(feBlendElement);

// Crie um elemento de texto e adicione ao svgElement
var textElement = (Aspose.Svg.SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
textElement.Style.FontSize = "5em";
textElement.SetAttribute("x", "20px");
textElement.SetAttribute("fill", "#C0C0C0");
textElement.SetAttribute("y", "100px");
textElement.TextContent = "Aspose.SVG API";
textElement.SetAttribute("filter", "url(#shadow)");
svgElement.InsertBefore(textElement, svgElement.FirstChild);

// Salve o documento SVG
document.Save(Path.Combine(dataDir, "DropShadow.svg"));

Observe que algumas linhas de código estão comentadas no trecho de código acima. Você pode optar por descomentá-lo para aplicar o efeito de desfoque gaussiano na sombra se preferir um efeito de sombra desfocado que faz com que a saída se destaque com uma sombra mais suave.

Obtenha Licença Temporária Gratuita

Você pode solicitar uma licença temporária gratuita para testar a capacidade total da API.

Conclusão

Neste artigo, você aprendeu como criar um efeito de sombra em uma imagem SVG programaticamente em C#. Você pode processar uma imagem SVG existente carregando-a ou criar uma nova imagem SVG do zero, dependendo de seus requisitos. Além disso, você pode visitar a seção documentação para conhecer muitos outros recursos da API. Se você precisar discutir alguma dúvida ou preocupação conosco, não hesite em entrar em contato conosco por meio do fórum.

Veja também