Skip to main content

SVG to Data URI

Convert SVG to a Data URI for CSS or HTML

Create a URL-encoded or Base64 SVG data URI, plus ready-to-use CSS background-image, CSS mask-image, and HTML img snippets. Optimize the markup, preview the result, and copy the format you need without uploading the SVG.

Drop files here

Editing defaults for new files

Encoding

URL-encoding escapes only the characters a URL cannot carry, so for icon-sized files it usually lands 20-30% smaller than Base64 and the markup stays readable. Choose Base64 when a build step or CMS rewrites percent signs.

Also encodes spaces, apostrophes and parentheses, so the URI is safe inside an unquoted url(...) and inside Sass or Less strings. Costs a few bytes. Base64 needs none of it.

Optimization

Runs the safe optimizer preset before the output is generated.

Styling

Replaces fills and strokes so the icon inherits the surrounding text color. Only useful for single-color artwork: it flattens a multi-color SVG to one color.

No preview. Add and select files to see results.

No files yet. Drop files above or click SELECT FILES.

No files yet. Drop files above or click SELECT FILES.

What is SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format. Instead of pixels, an SVG describes shapes, paths, fills, and strokes mathematically, so it can be rendered at any size without losing quality.

SVG is the standard vector format for the web. It is supported natively by every modern browser and can be styled with CSS or animated with JavaScript or SMIL. It is often compact for logos, icons, and illustrations, although complex SVGs can become large.

When to inline an SVG as a data URI

A data URI puts the whole SVG inside the stylesheet or the markup, so the browser needs no second request to draw it. That pays off for small, decorative artwork: bullets, arrows, chevrons, checkbox ticks, or a mark in a footer. URL-encoding is usually more compact for SVG text, while Base64 can be useful when another tool expects it. A CSS mask treats the SVG as a stencil for the element's own background-color, so one monochrome icon can be recolored per state, per theme, or per component with a single CSS declaration.

How to convert an SVG to a data URI online

  1. 1

    Drop your SVG files, or click SELECT FILES, to add them to the queue. Up to 40 at a time.

  2. 2

    Pick URL-encoded or Base64 and decide whether to optimize the markup first. All five outputs, and their byte sizes, update as you change the options.

  3. 3

    Copy the snippet you need, or click SAVE ALL to download one .css file per SVG holding the background and mask rules.

Privacy: your files never leave your browser

Conversion runs locally in your browser using JavaScript and WebAssembly. There is no file upload or server-side conversion, so the files you add stay on your device.

Local processing helps protect confidential logos, internal documents, and unreleased client artwork. Pages and conversion code are cached as you use them, so tools you have already opened can continue working without a network connection.

Frequently asked questions

Is a URL-encoded data URI smaller than Base64?

Usually. Base64 adds encoding overhead to the raw bytes, while URL encoding only expands the characters that must be escaped. The exact difference depends on the SVG markup, so the tool shows both sizes and lets you compare them for the file in front of you.

How does the CSS mask rule recolor an icon?

mask-image uses the SVG as a stencil: the element paints its own background-color, and the mask decides which pixels survive. Because the color comes from CSS, one data URI can be any color, and a hover or dark-mode variant is a single background-color change. It only works for single-color artwork, since a mask keeps the alpha channel and discards the SVG's own colors. Safari still needs the -webkit-mask-image prefix, which the generated rule includes.

When should I not inline an SVG as a data URI?

When the file is large or shared. A data URI is copied into every stylesheet or page that uses it, so it cannot be cached on its own and it is re-downloaded whenever that file changes. For larger artwork or assets reused across many pages, a separate .svg file with its own cache headers is often the better choice. A data URI also cannot be styled from outside, which is why the generated mask rule is useful for monochrome icons.