HOW TO: Embed RasterImage in SVG Document

#1 Posted : Friday, October 5, 2018 9:58:30 AM(UTC)

Anthony Northrup

Groups: Registered, Tech Support, Administrators
Posts: 199

Was thanked: 28 time(s) in 28 post(s)

SVG documents support embedding images either via a data URI or referencing a file directly. More information about this support can be found in Mozilla's developer documentation:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Below is a complete code snippet for generating an SVG document by embedding a RasterImage into a basic SVG document using a data URI:

Code:

public static void EmbedInSvg(RasterImage image, string outputFile)
{
	// Generate the header information
	var sb = new StringBuilder();
	sb.AppendLine("<?xml version=\"1.0\" standalone=\"no\"?>");
	sb.AppendLine(
		"<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" " +
		"\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">"
	);
	sb.AppendLine(string.Format(
		"<svg width=\"{0}px\" height=\"{1}px\" version=\"1.1\" " +
		"xmlns=\"http://www.w3.org/2000/svg\" " +
		"xmlns:xlink=\"http://www.w3.org/1999/xlink\">",
		image.Width, image.Height
	));

	// Convert to a base64 data URI
	string dataURI;
	using (var codecs = new RasterCodecs())
	using (var ms = new MemoryStream())
	{
		// SVG only required to support JPEG and PNG (or other SVG)
		RasterImageFormat format;
		switch (image.OriginalFormat)
		{
			case RasterImageFormat.Jpeg:
			case RasterImageFormat.Jpeg411:
			case RasterImageFormat.Jpeg422:
			case RasterImageFormat.JpegCmyk:
			case RasterImageFormat.JpegCmyk411:
			case RasterImageFormat.JpegCmyk422:
			case RasterImageFormat.JpegLab:
			case RasterImageFormat.JpegLab411:
			case RasterImageFormat.JpegLab422:
			case RasterImageFormat.JpegRgb:
				format = image.OriginalFormat;
				break;
			case RasterImageFormat.Png:
			default:
				format = RasterImageFormat.Png;
				break;
		}
		codecs.Save(image, ms, format, 0);
		dataURI = string.Format(
			"data:{0};base64,{1}",
			RasterCodecs.GetMimeType(format),
			Convert.ToBase64String(ms.ToArray())
		);
	}

	// Insert the image tag
	sb.AppendLine(string.Format(
		"\t<image x=\"0\" y=\"0\" width=\"{0}px\" " +
		"height=\"{1}px\" xlink:href=\"{2}\" />",
		image.Width, image.Height, dataURI
	));

	// Finish the file
	sb.AppendLine("</svg>");

	// Save
	File.WriteAllText(outputFile, sb.ToString());
}

Additional Remarks:

Since not all image formats are required to be supported, I have limited the formats to either JPEG (with optional compression options) or PNG
While the sample is saving this content out to a file, you can simply access the StringBuilder's content and save/use it however you'd like

Anthony Northrup
Developer Support Engineer
LEAD Technologies, Inc.


	Try the latest version of LEADTOOLS for free for 60 days by downloading the evaluation: https://www.leadtools.com/downloads Wanna join the discussion? Login to your LEADTOOLS Support account or Register a new forum account.

Notification

HOW TO: Embed RasterImage in SVG Document