SVG com imagem interna em C# | PNG em SVG | JPG em SVG

Scalable Vector Graphics (SVG) é um formato de imagem poderoso que pode ser usado para criar imagens escalonáveis e de alta qualidade para a web. As imagens SVG são criadas usando código XML, o que as torna fáceis de criar e modificar. Em certos casos, poderemos precisar incorporar recursos como imagens PNG ou JPG dentro do SVG. Nesta postagem do blog, mostraremos como criar um SVG com uma imagem interna usando C#.

Este artigo cobre os seguintes tópicos:

  1. API C# para criar SVG com imagem interna
  2. Incorporar PNG em SVG
  3. Incorpore SVG dentro de SVG
  4. Obtenha uma licença gratuita
  5. Recursos de aprendizagem gratuitos

API C# para criar SVG com imagem interna

Usaremos Aspose.SVG for .NET para criar um SVG com uma imagem dentro. Ele permite que os desenvolvedores trabalhem com arquivos SVG em aplicativos .NET. A API permite carregar, analisar, renderizar, criar e converter arquivos SVG em formatos populares sem dependências de software.

Por favor baixe a DLL da API ou instale-a usando NuGet.

PM> Install-Package Aspose.SVG

Incorporar PNG em SVG usando C#

Podemos incorporar facilmente imagens bitmap em um objeto SVG usando o SVG <image> elemento. O SVG <image> element é capaz de renderizar imagens em vários formatos, como JPEG, PNG e até mesmo gráficos SVG. Os atributos do <image> elemento define como o bitmap deve ser exibido. Os atributos principais incluem:

  • x e y: denotam as coordenadas do canto superior esquerdo da imagem.
  • largura e altura: determinam a largura e a altura da “janela” na qual a imagem será exibida. Ambos os atributos são obrigatórios.
  • href e xlink:href: Esses atributos apontam para a URL do arquivo de imagem.
  • preserveAspectRatio: Este atributo controla como a imagem é dimensionada proporcionalmente.

Podemos criar facilmente um SVG com um PNG dentro seguindo as etapas abaixo:

  1. Especifique o conteúdo SVG como uma string.
  2. Depois disso, crie uma instância da classe SVGDocument a partir do conteúdo da string.
  3. Por fim, salve a imagem usando o método Save().

O exemplo de código a seguir mostra como incorporar uma imagem PNG dentro de um SVG usando C#.

// Especifique o conteúdo SVG com imagem PNG incorporada.
string content = "<svg height=\"500\" width=\"600\" xmlns=\"http://www.w3.org/2000/svg\">\r\n    " +
                "<circle cx=\"120\" cy=\"100\" r=\"90\" style=\"fill:blue; stroke-width:3; stroke:rgb(0,0,0); fill-opacity:0.7\"  />" +
                "<image href=\"https://www.aspose.cloud/templates/aspose/App_Themes/V3/images/svg/272x272/aspose_svg-for-net.png\" x=\"70\" y=\"50\" height=\"100\" width=\"100\" />\r\n    \t" +
                "<text x=\"40\" y=\"250\">Embedded PNG image</text>\r\n    \t" +
        "</svg>";

// Inicialize um documento SVG usando SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Salve o documento em um arquivo com enumeração SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Incorporar PNG em SVG usando C#

Incorpore PNG em SVG usando C#.

Incorporar SVG dentro de SVG usando C#

Da mesma forma, podemos criar um SVG com uma imagem SVG dentro seguindo as etapas mencionadas anteriormente.

O exemplo de código a seguir mostra como incorporar uma imagem SVG dentro de um SVG usando C#.

// Especifique o conteúdo SVG com imagem PNG incorporada.
string documentContent = "<svg height=\"500\" width=\"500\" xmlns=\"http://www.w3.org/2000/svg\">\r\n\t" +
        "<image href=\"https://docs.aspose.com/svg/net/navigation-inspection/shapes.svg\" x=\"250\" y=\"10\" height=\"350\" width=\"350\" />\r\n    \t" +
        "<text x=\"300\" y=\"250\">Embedded SVG image</text>    \r\n" +
    "</svg>";

// Inicialize um documento SVG usando SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Salve o documento em um arquivo com enumeração SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Incorporar SVG dentro de SVG usando C#

Incorpore SVG dentro de SVG usando C#.

Obtenha uma licença gratuita

Você pode obter uma licença temporária gratuita para experimentar o Aspose.SVG for .NET sem limitações de avaliação.

SVG com imagem interna – recursos gratuitos

Você pode aprender mais sobre os vários recursos da biblioteca usando os recursos abaixo:

Conclusão

Concluindo, criar imagens SVG com imagens incorporadas usando C# é um processo relativamente simples. Seguindo as etapas deste tutorial, você pode criar suas próprias imagens SVG personalizadas que podem ser usadas em seu site ou em seus aplicativos. Ao aproveitar o Aspose.SVG for .NET, uma biblioteca SVG poderosa e versátil, você pode criar facilmente imagens SVG com imagens incorporadas que podem ser usadas em qualquer dispositivo. Em caso de qualquer ambigüidade, sinta-se à vontade para nos contatar em nosso fórum de suporte gratuito.

Veja também