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.

Choose between a HTML or CSS (background/mask)	Embedding as a CSS mask allows you to create things like custom lists

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 colors)

Base64-encoded SVGs are particularly useful for:

• Email templates where external images may be blocked or filtered
• CSS backgrounds and decorative elements when you want to avoid additional HTTP requests
• Custom list markers that need to maintain consistency across email clients
• Icon systems where you need a small number of icons without the overhead of an icon font
• Mask images in CSS when you need a shape with a customisable fill color
• Offline applications or environments with limited connectivity
• 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.

The easiest way to install this plugin is through the Figma Plugin Store.

1. Open Figma
2. Click on "Resources" or "Plugins"
3. Search for "b64-encoder"
4. Click "Install"

If you want to extend or modify the plugin, follow these development setup instructions:

This plugin was created with Plugma using the React framework.

• Node.js
• Figma desktop app

1. Install the dependencies and watch for changes while developing:

   npm install
   npm run dev

2. Open the Figma desktop app and import the plugin:

   • Open a file in Figma.
   • Search for "Import plugin from manifest..." using the Quick Actions bar.
   • Choose the manifest.json file from the dist folder.

3. Manage manifest details from inside package.json.

Run this command to preview your plugin in the browser during development.

npm run preview

Make sure the plugin is open in the Figma desktop app.

Before publishing your plugin, make sure to create a build. If not, it will still point to the dev server and won't work properly for users.

npm run build

Now you can publish the plugin from the Figma desktop app.

See the Plugma docs for further information.

1. Select one or more elements in your Figma document
2. Launch the plugin and choose whether you want HTML or CSS output
3. For CSS, select between background image or mask image (with customisable color)
4. Click the respective button to copy the optimised code to your clipboard
5. Paste directly into your code

Under the hood, the plugin:

1. Exports the selected element as an SVG
2. Runs it through SVGO for optimisation
3. Converts it to a base64 data URI
4. Formats it as either CSS or HTML markup
5. Copies the result to your clipboard

• Built with Plugma
• SVG optimisation powered by SVGO
• Logo font adapted from work by Brian Kent (Ænigma Fonts)