SVG And Image to Data URI Conversion

Data URI (Uniform Resource Identifier) is a way to include data directly in a web page or style sheet, avoiding the need for a separate file. This is useful for reducing the number of HTTP requests and is only useful for small size images.

Embedding resources directly in HTML or CSS reduces the number of HTTP requests required to load a web page. This can lead to faster load times, especially on pages with many small images or icons.

Example Data URI

Here is an example of a data URI that embeds a small PNG image

Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURczMzP///9ONFXYAAAAVSURBVBjTY2CAAkYoYBgggYG2HwoARRAAgb49BTcAAAAASUVORK5CYII=

Usage

How to Use Base64 Encoded Image Data URI in HTML Image

To display an image in HTML using a Base64 encoded image Data URI, you can simply include the encoded image data directly in the src attribute of the <img> tag.

HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURczMzP///9ONFXYAAAAVSURBVBjTY2CAAkYoYBgggYG2HwoARRAAgb49BTcAAAAASUVORK5CYII=" alt="checkerboard pattern">

How to use Base64 encoded image data URI in CSS background image

You can use Data URIs in CSS for embedding background images. Here is an example of how to use it as a background image

CSS

body {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURczMzP///9ONFXYAAAAVSURBVBjTY2CAAkYoYBgggYG2HwoARRAAgb49BTcAAAAASUVORK5CYII=");
}

Although data URIs can provide many benefits, they also have some notable disadvantages

Advantages

Reduced HTTP Requests: Fewer requests can lead to faster load times for web pages.
Performance Improvement: For small resources, Data URIs can improve performance by reducing latency.

Disadvantages

File Size: Data URIs can increase the size of the HTML or CSS file, especially when embedding large files.
Readability and Maintenance: Embedding large amounts of data directly in HTML or CSS can make the code less readable and harder to maintain.

Online Conversion SVG Or image file to data URI

You can convert an image or SVG file to base64 data URI format by uploading it

Note: We do not upload your photos to the server; All processing occurs locally in your browser.

SVG or Image File

SVG Plain text HTML

Upload Image

Choose Image PNG JPEG SVG WEBP:

SVG to Data URI Converter

Pate SVG inline code here. You can use SVGs as CSS background images

Add SVG code

Clear

Output Format

You can convert this URI code into an image tag and a CSS background image code. Select output code type.

Image tag

<img src="data:image/png;base64,j4AAQS...">

CSS code background image

.data-image {
    background-image: url('data:image/png;base64,/9j/j4AAQS...);
}

class name:

data URI string

data:image/png;base64,j4AAQS...

Get data URI code

The result of Base64 encoding will appear here

HTML

Highlight code

Paste this code between the body tag where you want it to appear

Run code

How to decode data URI (SVG) code back to original

This tool can convert data URIs back to original code, which is very helpful. This makes it easier for developers and designers to quickly access and understand the hidden content in these URIs.

Paste data URI encoded code here

Decode URI

Report Problem