← Back

SVG URL Encoder

SVG can be embedded directly in CSS as a data URI, avoiding an extra HTTP request for small icons and shapes. Browsers require the SVG markup to be percent-encoded first — this tool does that instantly, entirely in your browser.

External quotes: /
About tool

Insert your SVG:

Take encoded:

Ready for CSS:

Preview:

Background:

How to use

  1. Paste your SVG markup into the left box (or click "Example" to try one).
  2. Pick single or double external quotes depending on how you'll use the result.
  3. Copy the encoded value, or the ready-to-use CSS background-image line.
  4. Paste it into your stylesheet — no build step or image file needed.

FAQ

Why does my SVG need encoding?

Raw SVG contains characters like <, >, and # that break a CSS url() value. Percent-encoding those characters lets the browser parse the data URI correctly in every browser, not just Webkit-based ones.

Does this tool send my SVG anywhere?

No — encoding happens entirely in your browser with JavaScript. Nothing is uploaded.

Why is xmlns="http://www.w3.org/2000/svg" added automatically?

A data URI SVG needs that namespace attribute to render correctly. If your markup is missing it, the tool adds it for you.