Data URL Tutorials

1

Optimize Your SVG

Intermediate 20 minutes

Before converting to a Data URL, optimize your SVG by removing unnecessary attributes and whitespace. Here's a simple SVG icon:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"></circle>
  <line x1="12" y1="8" x2="12" y2="16"></line>
  <line x1="8" y1="12" x2="16" y2="12"></line>
</svg>

Before converting SVG to a Data URL, optimize it by removing unnecessary attributes and whitespace. Here's a simple SVG icon:

2

Convert SVG to a Data URL

Convert your SVG to a Data URL by URL-encoding it and prefixing with data:image/svg+xml,. For SVGs, you can often avoid Base64 encoding:

const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>`;

const dataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgContent);

3

Use the SVG Data URL in CSS

Now you can use the SVG Data URL in your CSS as a background image:

.icon-add {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%228%22%20x2%3D%2212%22%20y2%3D%2216%22%3E%3C%2Fline%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2216%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3C%2Fsvg%3E');
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

Note

For SVGs, URL encoding is often more efficient than Base64 encoding. However, if your SVG contains special characters or is complex, Base64 encoding might be more reliable.

1

Prepare Your Font File

Advanced 30 minutes

Start with a web font file (WOFF2 format is recommended for modern browsers due to its smaller size). For this tutorial, we'll use a small icon font.

2

Convert Font to Base64

Use our Data URL converter tool or a Base64 encoder to convert your font file to a Base64 string. For fonts, Base64 encoding is typically used:

// Using FileReader in JavaScript
function fontToDataURL(fontFile, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    callback(e.target.result);
  };
  reader.readAsDataURL(fontFile);
}

3

Use the Font Data URL in CSS

Include the Data URL in your CSS @font-face rule:

@font-face {
  font-family: 'IconFont';
  src: url('data:font/woff2;base64,d09GMgABAAAAAAKAAoAAAAAAABsAAAAIwAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAg') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'IconFont';
  font-size: 24px;
}

Warning

Embedding fonts as Data URLs is only recommended for small icon fonts or subset fonts. Full font files can be quite large and may negatively impact performance.

1

Prepare Your Sprite Images

Beginner 15 minutes

Instead of creating a traditional sprite sheet image, we'll create individual small images and convert each to a Data URL.

2

Convert Images to Data URLs

Use our Data URL converter tool to convert each small image to a Data URL.

3

Create CSS Classes for Each Sprite

Create CSS classes for each sprite using the Data URLs:

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-home {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...');
}

.icon-search {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...');
}

.icon-settings {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...');
}

Now you can use these classes in your HTML:

<span class="icon icon-home"></span>
<span class="icon icon-search"></span>
<span class="icon icon-settings"></span>

Tip

This approach works best when you have a small number of icons that are used on multiple pages. For a large number of icons, consider using a traditional sprite sheet or an icon font.

Optimizing SVG Icons with Data URLs

Embedding Fonts with Data URLs

Creating Efficient CSS Sprites with Data URLs