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.