Scalable Vector Graphics (SVG) je výkonný formát obrázků, který lze použít k vytváření vysoce kvalitních a škálovatelných obrázků pro web. Obrázky SVG jsou vytvářeny pomocí kódu XML, což usnadňuje jejich vytváření a úpravy. V určitých případech možná budeme muset do SVG vložit zdroje, jako jsou obrázky PNG nebo JPG. V tomto příspěvku na blogu vám ukážeme, jak vytvořit SVG s obrázkem uvnitř pomocí C#.
Tento článek se zabývá následujícími tématy:
- C# API pro vytvoření SVG s obrázkem uvnitř
- Vložit PNG do SVG
- Vložit SVG do SVG
- Získat bezplatnou licenci
- Bezplatné výukové zdroje
C# API pro vytvoření SVG s obrázkem uvnitř
K vytvoření SVG s obrázkem uvnitř použijeme Aspose.SVG for .NET. Umožňuje vývojářům pracovat se soubory SVG v aplikacích .NET. API umožňuje načítat, analyzovat, vykreslovat, vytvářet a převádět soubory SVG do populárních formátů bez softwarových závislostí.
Prosím stáhněte si DLL rozhraní API nebo ji nainstalujte pomocí NuGet.
PM> Install-Package Aspose.SVG
Vložit PNG do SVG pomocí C#
Bitmapové obrázky můžeme snadno vložit do objektu SVG pomocí SVG <image>
prvek. SVG <image>
element je schopen vykreslovat obrázky v různých formátech, jako je JPEG, PNG a dokonce grafika SVG. Atributy <image>
prvek definuje, jak má být bitmapa zobrazena. Mezi primární atributy patří:
- x a y: Označují souřadnice levého horního rohu obrázku.
- šířka a výška: Tyto určují šířku a výšku „okna“, ve kterém se bude obrázek zobrazovat. Oba tyto atributy jsou povinné.
- href a xlink:href: Tyto atributy ukazují na URL souboru obrázku.
- zachovatAspectRatio: Tento atribut určuje, jak je obrázek proporcionálně zmenšen.
SVG s PNG uvnitř můžeme snadno vytvořit podle následujících kroků:
- Zadejte obsah SVG jako řetězec.
- Poté vytvořte instanci třídy SVGDocument z obsahu řetězce.
- Nakonec uložte obrázek pomocí metody Save().
Následující ukázka kódu ukazuje, jak vložit obrázek PNG do SVG pomocí C#.
// Určete obsah SVG s vloženým obrázkem PNG.
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>";
// Inicializujte dokument SVG pomocí SVGDocument.
SVGDocument document = new SVGDocument(content, ".");
// Uložte dokument do souboru s výčtem SVGSaveFormat.
document.Save("C:\\Files\\EmbedPNG.svg", SVGSaveFormat.SVG);
Vložit SVG do SVG pomocí C#
Podobně můžeme vytvořit SVG s obrázkem SVG uvnitř podle výše uvedených kroků.
Následující ukázka kódu ukazuje, jak vložit obrázek SVG do SVG pomocí C#.
// Určete obsah SVG s vloženým obrázkem SVG.
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>";
// Inicializujte dokument SVG pomocí SVGDocument.
SVGDocument document = new SVGDocument(documentContent, ".");
// Uložte dokument do souboru s výčtem SVGSaveFormat.
document.Save("C:\\Files\\EmbedSVG.svg", SVGSaveFormat.SVG);
Získejte bezplatnou licenci
Můžete získat bezplatnou dočasnou licenci a vyzkoušet Aspose.SVG for .NET bez omezení hodnocení.
SVG s obrázkem uvnitř – zdroje zdarma
Více o různých funkcích knihovny se můžete dozvědět pomocí níže uvedených zdrojů:
Závěr
Závěrem lze říci, že vytváření obrázků SVG s vloženými obrázky pomocí C# je relativně jednoduchý proces. Podle kroků v tomto tutoriálu si můžete vytvořit své vlastní obrázky SVG, které lze použít na vašem webu nebo ve vašich aplikacích. Využitím Aspose.SVG for .NET, výkonné a všestranné knihovny SVG, můžete snadno vytvářet obrázky SVG s vloženými obrázky, které lze použít na jakémkoli zařízení. V případě jakýchkoliv nejasností nás neváhejte kontaktovat na našem bezplatném fóru podpory.