How to embed base64 images in SVG (Tutorial)

When creating SVG files you can include images by several means using local images, external URLs, and using base64 images. This tutorial covers how base64 images can be included and why you would want to.

If you’re working with HTML, you can check out our article on how to display base64 images in HTML.

Why should I embed images as base64?

Embedding images as base64 content will decrease the number of requests required as the images are now part of the SVG file. However, the base64 content will be between 20-25% larger than the image.

This means that this approach will be beneficial for small to medium images but large images would have a much larger impact on performance.

How to embed base64 images in SVG

1. Convert image to base64 string (Java code shown here)
2. Create an img tag with an empty src value
3. Construct a data URI in the src attribute
   • Add a data media type to match the original image
   • Add a charset that matches that used in the encoding
   • Add the base64 data you created previously

and here is the code to embed base64 images in SVG…

final ByteArrayOutputStream os = new ByteArrayOutputStream();

try {

//Can be any support image format

final String formatName = "jpg";


//Convert image data to Base64 and write date to the output stream

final BufferedImage image = ImageIO.read(new File("/path/to/file"));

ImageIO.write(image, formatName, Base64.getEncoder().wrap(os));


//Create Base64 string

final String base64 = os.toString(StandardCharsets.UTF_8.name());


} catch (final IOException ioe) {

throw new UncheckedIOException(ioe);

}

<image href="" alt="Description of the image" />

<image href="data:image/jpeg;" alt="Description of the image" />

<image href="data:image/jpeg;charset=utf-8;" alt="Description of the image" />

<image href="data:image/jpeg;charset=utf-8;base64,<DATA>" alt="Description of the image" />

Our software libraries allow you to