SVG con imagen interior en C# | PNG en SVG | JPG en SVG

Gráficos vectoriales escalables (SVG) es un potente formato de imagen que se puede utilizar para crear imágenes escalables de alta calidad para la web. Las imágenes SVG se crean utilizando código XML, lo que las hace fáciles de crear y modificar. En ciertos casos, es posible que necesitemos incrustar recursos como imágenes PNG o JPG dentro de SVG. En esta publicación de blog, le mostraremos cómo crear un SVG con una imagen dentro usando C#.

Este artículo cubre los siguientes temas:

  1. API de C# para crear SVG con imagen dentro
  2. Incrustar PNG en SVG
  3. Incrustar SVG dentro de SVG
  4. Obtenga una licencia gratuita
  5. Recursos de aprendizaje gratuitos

API de C# para crear SVG con imagen dentro

Usaremos Aspose.SVG for .NET para crear un SVG con una imagen dentro. Permite a los desarrolladores trabajar con archivos SVG en aplicaciones .NET. La API permite cargar, analizar, renderizar, crear y convertir archivos SVG a formatos populares sin dependencias de software.

Por favor descargue la DLL de la API o instálela usando NuGet.

PM> Install-Package Aspose.SVG

Incrustar PNG en SVG usando C#

Podemos incrustar fácilmente imágenes de mapa de bits dentro de un objeto SVG usando SVG <image> elemento. El SVG<image> El elemento es capaz de representar imágenes en varios formatos, como JPEG, PNG e incluso gráficos SVG. Los atributos del <image> El elemento define cómo se debe mostrar el mapa de bits. Los atributos principales incluyen:

  • x e y: indican las coordenadas de la esquina superior izquierda de la imagen.
  • ancho y alto: Determinan el ancho y alto de la “ventana” en la que se mostrará la imagen. Ambos atributos son obligatorios.
  • href y xlink:href: estos atributos apuntan a la URL del archivo de imagen.
  • preserveAspectRatio: este atributo gobierna cómo se escala proporcionalmente la imagen.

Podemos crear fácilmente un SVG con un PNG dentro siguiendo los pasos a continuación:

  1. Especifique el contenido SVG como una cadena.
  2. Después de eso, cree una instancia de la clase SVGDocument a partir del contenido de la cadena.
  3. Finalmente, guarde la imagen usando el método Save().

El siguiente ejemplo de código muestra cómo incrustar una imagen PNG dentro de un SVG usando C#.

// Especifique contenido SVG con imagen PNG incrustada.
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>";

// Inicialice un documento SVG usando SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Guarde el documento en un archivo con enumeración SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Incrustar PNG en SVG usando C#

Incruste PNG en SVG usando C#.

Incrustar SVG dentro de SVG usando C#

De manera similar, podemos crear un SVG con una imagen SVG en su interior siguiendo los pasos mencionados anteriormente.

El siguiente ejemplo de código muestra cómo incrustar una imagen SVG dentro de un SVG usando C#.

// Especifique contenido SVG con imagen SVG incrustada.
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>";

// Inicialice un documento SVG usando SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Guarde el documento en un archivo con enumeración SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Incrustar SVG dentro de SVG usando C#

Incruste SVG dentro de SVG usando C#.

Obtenga una licencia gratuita

Puede obtener una licencia temporal gratuita para probar Aspose.SVG for .NET sin limitaciones de evaluación.

SVG con imagen en el interior – Recursos gratuitos

Puede obtener más información sobre las diversas funciones de la biblioteca utilizando los recursos a continuación:

Conclusión

En conclusión, crear imágenes SVG con imágenes incrustadas usando C# es un proceso relativamente simple. Siguiendo los pasos de este tutorial, puede crear sus propias imágenes SVG personalizadas que pueden usarse en su sitio web o en sus aplicaciones. Al aprovechar Aspose.SVG for .NET, una biblioteca SVG potente y versátil, puede crear fácilmente imágenes SVG con imágenes incrustadas que se pueden usar en cualquier dispositivo. En caso de cualquier ambigüedad, no dude en contactarnos en nuestro foro de soporte gratuito.

Ver también