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.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

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.

3 reasons Java developers switch to JDeli from ImageIO

ImageIO is build into the JDK and provides basic image support in Java. JDeli is a commercial image library for Java Developers from IDRsolutions....
Mark Stephens
1 min read

Why we wrote our own Java jpeg2000 libraries

JPEG2000 is an important image file format which offers significant benefits over JPEG. For our specific usage it does generate significantly smaller file sizes...
Mark Stephens
52 sec read

How to choose JPG versus JPEG2000 for image files

Since we started to support both JPG and JPG2000 as image file outputs in our software, we have found that this is a very...
Mark Stephens
1 min read

Leave a Reply

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

IDRsolutions Ltd 2019. All rights reserved.