Question 1

What is an SVG data URI?

Accepted Answer

An SVG data URI is a base64-encoded SVG image embedded directly in a URL string starting with data:image/svg+xml;base64,... You can use it inline in CSS background-image, HTML <img src> or JSON without needing a separate file.

Question 2

Why use a data URI instead of a file?

Accepted Answer

Data URIs eliminate a network request, work offline, simplify deployment, and let you embed icons/illustrations in CSS without extra HTTP calls. Trade-offs: data URIs cannot be cached separately and may bloat your CSS.

Question 3

What's the difference between base64 and URL-encoded?

Accepted Answer

Base64 encoding produces shorter, more reliable strings for any SVG. URL-encoding (percent-encoding) keeps the SVG readable and lets you edit it, but special characters must be escaped. Most CSS uses base64.

Question 4

Is my SVG processed in the browser?

Accepted Answer

Yes. The conversion runs entirely in your browser using btoa()/atob() and DOMParser. No SVG is uploaded to any server.