SVG TO Data URI

Why This Tool Exists (The Real Problem with SVG)

When building websites or local apps, you may notice that some SVG images don’t display correctly — especially when using a local server like in Koder, JSBox, or other development environments.

This happens because SVG files are treated as XML, not standard image formats like PNG or JPG. So using:

<img src="icon.svg">

...can fail, even though the file is right there in your project!

So what are the workarounds?

1. Inline SVG:

Makes your HTML long and hard to read.

Cannot be reused easily across different pages.

Not flexible for non-developers or CMS use.

2. External links?

Requires internet connection.

Depends on an external server that may break.

The Smarter Solution: Text-Based Data URI

So instead of using example.svg, we convert it into a Data URI — a single line of text that can be:

Loaded with JavaScript from .txt file (e.g. icon.txt).

Inserted into <img src="..."> like any normal image.

Saved, copied, reused — no dependencies, no broken links.

You now have the freedom of external files, and the reliability of inline SVG, without the mess.

This is the reason this tool was created.

How to Use This Tool

After converting your SVG code into a Data URI using this tool, you will get a result that looks like this:

svg+xml;utf8,%3Csvg%20...%3E...

Now, save that result into a .txt file. For example, you can create a file called icon.txt and paste the Data URI inside it.

To display your SVG in an <img> tag, use this format:

<img class="svg-img" data-src="icon.txt">

Then add this JavaScript snippet to your page to load the external SVG correctly:

<script>
document.querySelectorAll('.svg-img').forEach(img => {
  fetch(img.dataset.src)
    .then(response => response.text())
    .then(dataUri => {
      img.src = dataUri.trim();
    })
    .catch(error => {
      console.error("Failed to load SVG:", error);
    });
});
</script>

To apply custom styles to each SVG image, simply add a unique class to your <img> tag and define its styles in your CSS:

<img class="svg-img my-icon" data-src="icon.txt">

/* CSS */
.my-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 4px #444);
}

This keeps your HTML clean and avoids inline SVG clutter. Plus, you stay offline — no external URLs needed.

SVG to Data URI

Enter SVG Code