SVG med Image Inside i C# | PNG i SVG | JPG i SVG

Scalable Vector Graphics (SVG) är ett kraftfullt bildformat som kan användas för att skapa skalbara bilder av hög kvalitet för webben. SVG-bilder skapas med hjälp av XML-kod, vilket gör dem enkla att skapa och ändra. I vissa fall kan vi behöva bädda in resurser som PNG- eller JPG-bilder i SVG. I det här blogginlägget kommer vi att visa dig hur du skapar en SVG med en bild inuti med C#.

Den här artikeln tar upp följande ämnen:

  1. C# API för att skapa SVG med bild inuti
  2. Bädda in PNG i SVG
  3. Bädda in SVG i SVG
  4. Få en gratis licens
  5. Gratis läranderesurser

C# API för att skapa SVG med bild inuti

Vi kommer att använda Aspose.SVG för .NET för att skapa en SVG med en bild inuti. Det låter utvecklare arbeta med SVG-filer i .NET-applikationer. API:et gör det möjligt att ladda, analysera, rendera, skapa och konvertera SVG-filer till populära format utan mjukvaruberoende.

Vänligen ladda ned API:ets DLL eller installera den med NuGet.

PM> Install-Package Aspose.SVG

Bädda in PNG i SVG med C#

Vi kan enkelt bädda in bitmappsbilder i ett SVG-objekt med hjälp av SVG <image> element. SVG <image> element kan rendera bilder i olika format, såsom JPEG, PNG och till och med SVG-grafik. Attributen för <image> element definierar hur bitmappen ska visas. De primära attributen inkluderar:

  • x och y: Dessa anger koordinaterna för bildens övre vänstra hörn.
  • bredd och höjd: Dessa bestämmer bredden och höjden på “fönstret” där bilden kommer att visas. Båda dessa attribut är obligatoriska.
  • href och xlink:href: Dessa attribut pekar på webbadressen till bildfilen.
  • preserveAspectRatio: Det här attributet styr hur bilden skalas proportionellt.

Vi kan enkelt skapa en SVG med en PNG inuti genom att följa stegen nedan:

  1. Ange SVG-innehåll som en sträng.
  2. Efter det skapar du en instans av SVGDocument-klassen från stränginnehållet.
  3. Slutligen sparar du bilden med metoden Save().

Följande kodexempel visar hur man bäddar in en PNG-bild i en SVG med C#.

// Ange SVG-innehåll med inbäddad PNG-bild.
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>";

// Initiera ett SVG-dokument med SVGDocument.
SVGDocument document = new SVGDocument(content, ".");

// Spara dokumentet i en fil med SVGSaveFormat-uppräkning.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Bädda in PNG i SVG med C#

Bädda in PNG i SVG med C#.

Bädda in SVG i SVG med C#

På samma sätt kan vi skapa en SVG med en SVG-bild inuti genom att följa stegen som nämnts tidigare.

Följande kodexempel visar hur man bäddar in en SVG-bild i en SVG med C#.

// Ange SVG-innehåll med inbäddad SVG-bild.
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>";

// Initiera ett SVG-dokument med SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");

// Spara dokumentet i en fil med SVGSaveFormat-uppräkning.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Bädda in SVG i SVG med C#

Bädda in SVG i SVG med C#.

Skaffa en gratis licens

Du kan få en gratis tillfällig licens för att prova Aspose.SVG för .NET utan utvärderingsbegränsningar.

SVG med bild inuti – gratis resurser

Du kan lära dig mer om de olika funktionerna i biblioteket med hjälp av resurserna nedan:

Slutsats

Sammanfattningsvis är att skapa SVG-bilder med inbäddade bilder med C# en relativt enkel process. Genom att följa stegen i den här handledningen kan du skapa dina egna anpassade SVG-bilder som kan användas på din webbplats eller i dina applikationer. Genom att utnyttja Aspose.SVG för .NET, ett kraftfullt och mångsidigt SVG-bibliotek, kan du enkelt skapa SVG-bilder med inbäddade bilder som kan användas på vilken enhet som helst. I händelse av oklarheter är du välkommen att kontakta oss på vårt gratis supportforum.

Se även