How to extract base64 images from an exported SVG

We (Mudbath Digital) have been working on some great new mobile apps that have required us to heavily use SVG graphics.

When we export our SVG’s out of Illustrator the exported file will have numerous base64 encoded images embedded inside the SVG markup. This tends to happen with bitmaps and live effects applied to layers.

I started to manually convert each base64 data into an image and it got me thinking – why don’t I just write a script to do this?

Parsing an SVG in C#

SVG's are xml based, and they can be parsed by HtmlAgilityPack. This gives us the DOM of the SVG just as if it were HTML. Just grab the Nuget package for HtmlAgilityPack, load up your SVG and start traversing the SVG DOM.

PM> Install-Package HtmlAgilityPack

var svgDoc = new HtmlAgilityPack.HtmlDocument();
svgDoc.LoadHtml(svgContents);

Finding the Images

Select the first single root 'svg' node in our SVG document. After we're sure that there is an 'svg' node in our document, we can grab all of the 'image' descendants.

var svgNode = svgDoc.DocumentNode.SelectSingleNode("//svg");
var images = svgNode.Descendants("image"); // Array of images in the svg node

Using Regex to match hrefs with base64 data

I am using a regex pattern to match the base64 data to extract two groups, the mime type of the image and the base64 encoded data.

var patternMatch = @"data:image\/(gif|png|jpeg|jpg);base64,((?s).*)";

Images that have been exported will have an attribute called 'xllink:href'. This attribute contains the value we want to match against.

var hrefAttribute = image.Attributes.FirstOrDefault(i=>i.Name == "xlink:href");
var match = Regex.Match(hrefAttribute.Value, patternMatch);
if (match.Success && match.Groups.Count != 0)
{
   var fileType = match.Groups[1].Value;
   var base64 = match.Groups[2].Value;
   var bytes = Convert.FromBase64String(base64);
}

Putting it all together

I've wrapped everything up into a simple Windows application that allows you to drag and drop SVG's, it will then export the base64 data, swap out the href with the image link and provide a smaller SVG file as an output into the same directory. Source code for the application can be found on github https://github.com/MudbathDigital/SVG-Image-Extraction.

 

***

Mudbath is a 40+ person digital product agency based in Newcastle, NSW. We research, design and develop products for industry leaders.

Are you a developer who's looking to join Newcastle's fastest-growing software agency? Get in touch.