Scalable Vector Graphics (SVG) is a powerful image format that can be used to create high-quality, scalable images for the web. SVG images are created using XML code, which makes them easy to create and modify. In certain cases, we may need to embed resources such as PNG or JPG images inside SVG. In this blog post, we will show you how to create an SVG with an image inside using C#.
This article covers the following topics:
- C# API to Create SVG with Image Inside
- Embed PNG in SVG
- Embed SVG inside SVG
- Get a Free License
- Free Learning Resources
C# API to Create SVG with Image Inside
We will use Aspose.SVG for .NET to create an SVG with an image inside. It allows developers to work with SVG files in .NET applications. The API enables to load, parse, render, create, and convert SVG files into popular formats without software dependencies.
Please download the DLL of the API or install it using NuGet.
PM> Install-Package Aspose.SVG
Embed PNG in SVG using C#
We can easily embed bitmap images within an SVG object using the SVG <image> element. The SVG <image> element is capable of rendering images in various formats, such as JPEG, PNG, and even SVG graphics. The attributes of the <image> element define how the bitmap should be displayed. The primary attributes include:
- x and y: These denote the coordinates of the upper-left corner of the image.
- width and height: These determine the width and height of the “window” in which the image will be displayed. Both of these attributes are obligatory.
- href and xlink:href: These attributes point to the URL of the image file.
- preserveAspectRatio: This attribute governs how the image is proportionally scaled.
We can easily create an SVG with a PNG inside by following the steps below:
- Specify SVG content as a string.
- After that, create an instance of the SVGDocument class from the string content.
- Finally, save the image using the Save() method.
The following code sample shows how to embed a PNG image inside an SVG using C#.
Embed PNG in SVG using C#.
Embed SVG inside SVG using C#
Similarly, we can create an SVG with an SVG image inside by following the steps mentioned earlier.
The following code sample shows how to embed an SVG image inside an SVG using C#.
Embed SVG inside SVG using C#.
Get a Free License
You can get a free temporary license to try Aspose.SVG for .NET without evaluation limitations.
SVG with Image Inside – Free Resources
You can learn more about the various features of the library using the resources below:
Conclusion
In conclusion, creating SVG images with embedded images using C# is a relatively simple process. By following the steps in this tutorial, you can create your own custom SVG images that can be used on your website or in your applications. By leveraging Aspose.SVG for .NET, a powerful and versatile SVG library, you can easily create SVG images with embedded images that can be used on any device. In case of any ambiguity, please feel free to contact us on our free support forum.