Kieran France Kieran France is a programmer for IDRSolutions in charge of there internal test suite. In his spare time he enjoys tinkering with gadgets and code.

Embedded base64 images, html and svg differences

1 min read

HTML and SVG files do not have to reference external files should you wish to include an image in your file. Instead you can include them as embedded base64 images.

Base64 encoding is a method used when there is a need to transfer or store binary data via means designed to handle text data. This is done by dividing the binary data into groups of 6 bits. This gives 64 different characters that are used to encode the data. The 64 values are encoded base on a index containing characters common to  most encodings. Should the binary data not be divisible by 6 padding is added to the end of the encoded data. This of course inflates the size of the file by around 1 third of the original size as every 6 bits are replaced by 8 bits.

Both html and svg are able to contain embedded base64 image data. Despite this I have encountered some differences in the use of the base64 encoded data within html and svg.

SVG can handle new lines in the middle of embedded base64 images and will ignore them allowing the data to be split across multiple lines making it easier to read.

HTML can not handle the new lines as svg does. Should the embedded base64 image contain new lines the image will not appear as the binary data being read would be incorrect.

These differences may not seem to great but they are important. Several ways of converting images into base64 strings can leave the string containing new lines. These new lines will cause issues in some cases. For this reason I find it best to ensure any new line characters are removed from embedded base64 images as doing so does not break anything and in fact makes the image usable in both html and svg.


So, whenever you use embedded base64 images, ensure any new lines are removed from the image data. This will make the string reusable regardless of where you plan on using it.

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.

Did you know...

IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?

It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page

Kieran France Kieran France is a programmer for IDRSolutions in charge of there internal test suite. In his spare time he enjoys tinkering with gadgets and code.

How to read HEIC image files in Java with…

In this article, I will explain how to read HEIC files into Java as a BufferedImage. ImageIO does not read HEIC file types so...
Mark Stephens
1 min read

How to convert WMF files to SVG in java…

This article will show you how to convert WMF files into SVG files using our JDeli Java Image library. What is WMF? WMF is...
Amy Pearson
1 min read

How to write WebP images in Java

In this article, I will walk you through how to write out images as WebP images in Java. ImageIO does not support WebP images...
Mark Stephens
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2020. All rights reserved.