SVG to Data URI Converter

WHAT IT DOES

SVG to Data URI Converter transforms SVG code into Data URI format for use in HTML, CSS, and JavaScript. Paste your SVG code or upload an .svg file, and the tool generates Data URIs in three formats: base64, plain (URI-encoded), and URL-encoded. A preview shows your SVG rendered from the Data URI, and size comparison shows the original, optimized, and Data URI sizes. You can copy any format to your clipboard or download the Data URI as a file. The tool supports SVG optimization to reduce file size and includes MIME type options.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All SVG parsing, encoding, and Data URI generation occur on your machine without any network requests. No SVG data, Data URI output, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. SVG encoding uses the browser's native btoa, encodeURIComponent, and string manipulation.

HOW TO USE

Click the extension toolbar icon to open the SVG to Data URI Converter panel. Paste SVG code into the input area or click the file input to upload an .svg file. Click "Convert" to generate Data URIs in all three formats. The panel displays a preview of your SVG, size comparison information, and separate sections for each encoding format (base64, plain, URL-encoded). Click "Use" on any format to make it the active format for preview and download. Click "Copy" next to any format to copy it to your clipboard. Click "Preview Only" to render the SVG preview without generating all formats. Toggle "Optimize SVG" to remove comments and whitespace from the SVG before encoding. Toggle "Include MIME type" to include the data:image/svg+xml prefix in the Data URI. Select the "Encoding Type" (base64, plain, URL-encoded) to choose the active format. The tool updates automatically when you change settings.

THE SVG ENCODING ENGINE — WHY IT WORKS

Most SVG-to-Data-URI tools only support one encoding format or require external services. This tool generates all three common Data URI formats using pure JavaScript: base64 encoding uses btoa with proper UTF-8 handling via encodeURIComponent; plain encoding uses encodeURIComponent on the SVG string; URL-encoded encoding uses encodeURIComponent for maximum compatibility. The SVG optimization process removes comments, collapses whitespace, and strips unnecessary spaces between tags, reducing the file size before encoding. The preview renders the SVG by setting the Data URI as the src of an img element, which relies on the browser's native SVG rendering engine. Each encoding format is displayed with its size, and the active format is highlighted for easy identification. This approach gives you full flexibility to choose the best Data URI format for your use case.

THE PANEL

The SVG to Data URI Converter panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the input area, preview, and format outputs adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to convert SVG code in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The tool converts SVG code only; it does not rasterize SVGs to other formats. Very large SVG files may produce long Data URI strings; the display is truncated but the copy function copies the full string. SVG optimization is optional and may affect formatting but not rendering. The preview uses the browser's SVG rendering engine; some complex SVGs may not render correctly in preview. All conversion data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.