What is an SVG data URI?

A data URI embeds the whole SVG in a text string that starts with data:image/svg+xml;base64. You can use it directly in CSS or HTML without loading a separate file.

How do I use the result in CSS?

Use it as a background image, for example background-image: url("data:image/svg+xml;base64,..."). The tool generates this snippet ready to paste.

How do I use the result in HTML?

Put the data URI in the src attribute of an img tag. The tool also generates the ready-to-paste HTML snippet.

When should I avoid Base64?

Base64 makes a file about 33 percent larger and the browser cannot cache it separately, so it works best for small icons. Keep large illustrations as separate .svg files.

Is my SVG uploaded to a server?

No. The encoding runs entirely in your browser. Your file is never uploaded to a server, no account is required and nothing is stored after you close the tab.

SVG to Base64 Encoder

Convert any SVG into a Base64 data URI. Get ready-to-use snippets for CSS and HTML. Free, runs entirely in your browser.

or paste SVG code

What is SVG Base64 encoding?

Base64 encoding converts binary data into a text string that can be embedded directly into HTML, CSS or JavaScript. When applied to an SVG file, the result is a data URI that works as a drop-in replacement for a file URL, without any HTTP request.

When to use SVG Base64

✓Inline icons in CSS without extra HTTP requests
✓Email templates where external URLs are blocked
✓Single-file HTML exports that must be self-contained
✓JavaScript-generated UI where injecting a file URL is not practical
✓Open Graph or meta images that require a data URI

Limitations

Base64 encoding increases the file size by roughly 33 percent compared to the original SVG. For large or frequently used icons, serving the SVG as a separate file is more efficient. Base64 is best suited for small icons and one-off use cases.

Frequently asked questions

View all FAQs →

What is an SVG data URI?: A data URI embeds the whole SVG in a text string that starts with data:image/svg+xml;base64. You can use it directly in CSS or HTML without loading a separate file.
How do I use the result in CSS?: Use it as a background image, for example background-image: url("data:image/svg+xml;base64,..."). The tool generates this snippet ready to paste.
How do I use the result in HTML?: Put the data URI in the src attribute of an img tag. The tool also generates the ready-to-paste HTML snippet.
When should I avoid Base64?: Base64 makes a file about 33 percent larger and the browser cannot cache it separately, so it works best for small icons. Keep large illustrations as separate .svg files.
Is my SVG uploaded to a server?: No. The encoding runs entirely in your browser. Your file is never uploaded to a server, no account is required and nothing is stored after you close the tab.

More free SVG tools

Everything you need to work with SVG files.

SVG Converter

Convert PNG, JPG, WEBP, GIF, AVIF, TIFF or BMP to a crisp SVG vector file.

SVG Editor

Edit shapes, paths, text and colors of any SVG online, then download the result.

SVG Color Editor

Edit any color in an SVG file in real-time and download the result instantly.

SVG Palette Swapper

Apply one of 10 curated color palettes to your SVG in a single click.

SVG Optimizer

Compress and clean SVG markup, removing redundant code to reduce file size.

SVG to PNG

Export any SVG as a PNG at 1x, 2x, 3x or 4x resolution, fully in the browser.

SVG to PDF

Convert any SVG into a sharp vector PDF. Fit to the SVG or use A4, Letter, Legal or A3.

SVG to React

Convert any SVG into a typed TypeScript React component with one click.

SVG to DXF

Convert any SVG file to DXF format for laser cutters, CNC routers and vinyl cutters.

JPG to DXF

Vectorize a JPG image and export it as DXF for laser cutting or CNC.

Image to DXF

Vectorize any PNG, JPG, WEBP, GIF, AVIF, TIFF or BMP image and export it as DXF.

PNG to DXF

Vectorize a PNG image and export it as DXF for laser cutting or CNC.

SVG to Favicon

Convert any SVG into a favicon.ico, SVG favicon, and apple-touch-icon PNG in one click.

SVG Pattern Maker

Turn any SVG into a seamless repeating tile pattern. Download as SVG or copy the CSS snippet.

SVG Animator

Animate any SVG stroke by stroke, then export an animated SVG or an MP4 video.

SVG to JPG

Export any SVG as a JPG at 1x to 4x with your choice of background color and quality.

SVG to WebP

Export any SVG as a WebP image at 1x, 2x, 3x or 4x. Smaller files than PNG, fully in your browser.

SVG QR Code

Generate a scalable vector QR code. Custom colors, transparent background, download as SVG or PNG.

SVG to Embroidery

Convert SVG outlines to Tajima DST embroidery format for use with embroidery machines.