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.OverviewIf you've ever needed to embed SVGs directly in your code, you know the process can be tedious:Export the SVG from FigmaOptimise it with a tool like SVGOConvert it to base64Format it properly for CSS or HTMLThis 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 tagsCSS background-image propertiesCSS mask-image properties (with customisable colours)When to Use Base64-Encoded SVGsBase64-encoded SVGs are particularly useful for:Email templates where external images may be blocked or filteredCSS backgrounds and decorative elements when you want to avoid additional HTTP requestsCustom list markers that need to maintain consistency across email clientsIcon systems where you need a small number of icons without the overhead of an icon fontMask images in CSS when you need a shape with a customisable fill colourOffline applications or environments with limited connectivityPerformance optimisation for small, frequently used graphicsIn 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.