Base64 Encoder

About this plugin

A Figma plugin that streamlines the process of using SVGs in web projects by automating the export, optimisation, and conversion to base64-encoded data URIs for both CSS and HTML.

Overview

If you've ever needed to embed SVGs directly in your code, you know the process can be tedious:

1. Export the SVG from Figma
2. Optimise it with a tool like SVGO
3. Convert it to base64
4. Format it properly for CSS or HTML

This plugin automates the entire workflow with a single click. Select any frame or element in Figma and instantly copy optimised, base64-encoded SVGs ready to use as:

HTML <img> tags

CSS background-image properties

CSS mask-image properties (with customisable colours)

When to Use Base64-Encoded SVGs

Base64-encoded SVGs are particularly useful for:

1. Email templates where external images may be blocked or filtered
2. CSS backgrounds and decorative elements when you want to avoid additional HTTP requests
3. Custom list markers that need to maintain consistency across email clients
4. Icon systems where you need a small number of icons without the overhead of an icon font
5. Mask images in CSS when you need a shape with a customisable fill colour
6. Offline applications or environments with limited connectivity
7. Performance optimisation for small, frequently used graphics

In these scenarios, embedding SVGs directly in your code eliminates HTTP requests, avoids CORS issues, and ensures visual elements display correctly regardless of external resource availability.