Skip to content
SVG Code Tools

SVG to Base64 & Data URI Converter

Turn SVG code into a CSS background-image data URI or a Base64 string. URL-encoded output is smaller than Base64. Copy ready CSS, HTML or a mask.

Preview

Something not working? Report a problem

What is the SVG to Base64 & Data URI Converter?

Putting a small SVG straight into your CSS saves a web request and keeps your icon in one file. This tool makes the data URI for you, as a ready CSS line, an img tag, a CSS mask or the plain string.

You can choose URL-encoded or Base64. URL-encoded is usually about a third smaller and works in every modern browser. A live preview shows your picture, and the sizes of both versions are shown so you can pick.

How to use it

  1. Paste your SVG code, or open an .svg file.
  2. Pick URL-encoded or Base64, and the output style.
  3. Copy the CSS, HTML or string.

Why people like this tool

URL-encoded or Base64

See both sizes and pick the smaller.

Ready CSS

background-image, img tag or mask.

Live preview

Check your SVG before you copy.

Cleans first

Removes comments and extra spaces.

How it works, in one picture

Infographic: how to use the SVG to Base64 & Data URI Converter in 3 easy steps: Paste your code, Choose your options and Copy the result. You get: URL-encoded or Base64, Ready CSS, Live preview and Cleans first.

Frequently asked questions

How do I use SVG as a CSS background?
Copy the CSS line this tool makes, for example background-image: url("data:image/svg+xml,..."), and paste it in your style sheet.
Should I use Base64 or URL-encoded?
URL-encoded. It is shorter and easier to read. Base64 is only needed where URL-encoded does not work, such as some old email apps.
Why does my SVG not show?
Make sure the SVG has xmlns="http://www.w3.org/2000/svg". Without it, browsers will not draw it as an image. This tool adds it for you.
Can I change the colour later?
Not with a background image. Use the CSS mask option with background-color: currentColor, and the icon takes the text colour.

You may also like

SVG Optimizer & Minifier

Make SVG files smaller. Removes comments, editor data and hidden junk, rounds numbers and shortens paths and colours. Free SVGO style optimizer.

Open tool

SVG to React, Vue & Svelte Converter

Turn SVG code into a clean React, Vue or Svelte component with size and colour props. TypeScript option included. Free online SVGR alternative.

Open tool

Base64 Encode & Decode

Encode text to Base64 or decode Base64 back to text. Works with Hindi and emoji, has a URL safe option, and runs in your browser. Free and private.

Open tool

SVG to Canvas Code Converter

Convert SVG shapes into HTML Canvas JavaScript code. Paths, circles, rectangles, gradients, strokes and transforms become ctx drawing commands.

Open tool

SVG to JSON Converter

Convert SVG code into a JSON tree of elements and attributes. Great for animating or changing SVG with code. Free SVG to JSON parser.

Open tool

SVG Security Scanner

Check an SVG for scripts, event handlers and bad links before you upload or show it. Get a plain report and a cleaned copy. Free SVG sanitizer.

Open tool