SVG to Data URI converter

Paste or drag the contents of a valid SVG document source below and generate the data URI that should work cross-browser

bg:

SVG (Scalable Vector Graphics) images are widely used on the web due to their small file size and ability to scale without losing quality. Sometimes, you may want to embed SVG directly into your HTML or CSS without linking to an external file. This is where Data URIs come in handy. In this post, we’ll explore how to convert SVG to Data URI format and use it in your web projects.

What is a Data URI?

A Data URI is a way to include data inline in web pages as if they were external resources. It allows you to embed images, including SVGs, directly into HTML, CSS, or even JavaScript, without the need for separate image files.

Converting SVG to Data URI

There are several methods to convert SVG to Data URI. Let’s look at a few approaches:

1. Manual Conversion

For quick, one-off conversions, you can manually convert your SVG to a Data URI. Here’s the process:

  1. Start with your SVG code:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

  1. URL-encode the SVG code. You can use an online URL encoder for this step.

  2. Prefix the encoded SVG with data:image/svg+xml,.

The result will look something like this:

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22green%22%20stroke-width%3D%224%22%20fill%3D%22yellow%22%20%2F%3E%0A%3C%2Fsvg%3E

2. Using JavaScript

For more dynamic scenarios, you can use JavaScript to convert SVG to Data URI:

function svgToDataUri(svgString) {
  const encoded = encodeURIComponent(svgString)
    .replace(/'/g, '%27')
    .replace(/"/g, '%22');

  return `data:image/svg+xml,${encoded}`;
}

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>`;

const dataUri = svgToDataUri(svg);
console.log(dataUri);

3. Using Base64 Encoding

Another common approach is to use Base64 encoding:

function svgToBase64DataUri(svgString) {
  const base64 = btoa(svgString);
  return `data:image/svg+xml;base64,${base64}`;
}

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>`;

const dataUri = svgToBase64DataUri(svg);
console.log(dataUri);

Using Data URIs

Once you have your SVG converted to a Data URI, you can use it in various ways:

In HTML

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22green%22%20stroke-width%3D%224%22%20fill%3D%22yellow%22%20%2F%3E%0A%3C%2Fsvg%3E" alt="Yellow circle with green outline">

In CSS

.icon {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22green%22%20stroke-width%3D%224%22%20fill%3D%22yellow%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

Considerations

While Data URIs can be useful, keep in mind:

  1. Data URIs are typically larger than the original SVG file due to encoding.
  2. They can’t be cached separately by browsers like external files.
  3. SVGs used as Data URIs in <img> tags lose their interactivity.

For these reasons, Data URIs are best used for small, frequently used icons or when you need to reduce HTTP requests.

Converting SVG to Data URI can be a powerful technique for optimizing your web projects. Whether you choose manual conversion, JavaScript methods, or Base64 encoding, you now have the tools to embed SVGs directly into your HTML and CSS. Remember to consider the trade-offs and use this technique judiciously in your projects.