# SVG to Data URI

Convert SVG markup to an inline data: URI — URL-encoded or Base64 — with ready-to-paste CSS, mask, img and JSX snippets. Free, runs in your browser.

## Run it

- **CLI:** `gizza tool svg-to-data-uri '<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#0af"/></svg>'`
- **Web:** https://gizza.ai/tools/svg-to-data-uri/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/svg-to-data-uri/tool.json

## Inputs

- `svg` — SVG markup _(field)_
- `encoding` — Encoding _(field)_
- `output` — Snippet _(field)_
- `quotes` — Attribute quotes (URL-encoded only) _(field)_
- `minify` — Minify first (strip XML declaration, DOCTYPE, comments, whitespace) _(field)_
- `add_xmlns` — Add xmlns when missing _(field)_

## Output

- Snippet (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `svg` — SVG markup
- `encoding` — Encoding
- `output` — Snippet
- `quotes` — Attribute quotes (URL-encoded only)
- `minify` — Minify first (strip XML declaration, DOCTYPE, comments, whitespace)
- `add_xmlns` — Add xmlns when missing

Example: `https://gizza.ai/tools/svg-to-data-uri/?svg=%3Csvg%20viewBox%3D%220%200%2016%2016%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%227%22%20fill%3D%22%230af%22%2F%3E%3C%2Fsvg%3E&encoding=url&output=uri&quotes=single&minify=true&add_xmlns=true`

---

## About this tool

**SVG to Data URI** turns inline SVG markup into a `data:image/svg+xml,...` URI you can paste into
CSS, HTML, JSX, or design-system tokens. The default output is the URL-encoded form because SVG is
text: keeping readable markup and escaping only the unsafe characters is usually shorter than
Base64. Pick Base64 when a downstream tool keeps rewriting or reformatting the URI.

The converter is SVG-aware rather than a generic byte encoder. It can minify the markup first,
rewrite double quotes to single quotes for shorter quoted `url("...")` snippets, and add the missing
root `xmlns="http://www.w3.org/2000/svg"` attribute that often makes SVG data URIs render blank in
CSS.

Everything runs locally in your browser. Your icon, logo, or pattern SVG is not uploaded.

### Example

Input:

```svg
<svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="#0af"/></svg>
```

With **Snippet** set to **CSS background-image**, the output starts like:

```css
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E...");
```

### Options

- **Encoding** — URL-encoded (default) or Base64. URL encoding is normally smaller for SVG; Base64 is
  opaque and can be safer when a legacy pipeline mangles percent-encoded markup.
- **Snippet** — bare URI, CSS `background-image`, CSS `mask-image`, HTML `<img>`, JSX component, or a
  size comparison report.
- **Attribute quotes** — rewrite SVG attribute `"` to `'` (shorter) or percent-encode quotes as
  `%22` to keep the markup byte-identical.
- **Minify first** — strips XML declaration, DOCTYPE, comments, and redundant whitespace before
  encoding. Turn it off when `<text>` content intentionally relies on repeated spaces.
- **Add xmlns when missing** — injects the default SVG namespace into the root element, which is
  usually required for data-URI SVGs to render inside CSS `url()`.

### Limits and edge cases

- The input must contain a root `<svg>` element. If you already have a `data:` URI and want markup
  back, decode it with the data URI decoder instead.
- SVG input is capped at 1,000,000 bytes. Large illustrations are better served as external `.svg`
  files so browsers can cache them.
- Minification is intentionally simple: it removes invisible wrapper/comment bytes and collapses
  whitespace. It does not optimize paths, merge shapes, or rewrite colors; run an SVG optimizer first
  if you need structural compression.
- The URL-encoded form escapes characters that break quoted CSS/HTML contexts (`<`, `>`, `#`, `%`,
  `&`, braces, control characters, and optionally `"`). Spaces and many punctuation characters stay
  readable because browsers accept them inside a quoted data URI.
- Inline data URIs duplicate bytes everywhere they are used. For repeated large assets, a normal SVG
  file can be faster because it is cached once.

## FAQ

<details>
<summary>Should I choose URL-encoded SVG or Base64?</summary>

Choose URL-encoded unless you have a specific compatibility problem. SVG is text, so escaping only
the unsafe characters usually produces a shorter and more readable URI than Base64, which adds about
one third to the payload size. Use the **Size comparison** output when you want to confirm the exact
winner for one SVG.

</details>

<details>
<summary>Why does the tool add an xmlns attribute?</summary>

Browsers often require the root SVG namespace when an SVG is loaded from a `data:` URI, especially in
CSS `background-image` and `mask-image`. An ordinary inline `<svg>` can appear to work without it,
then render blank when encoded. Leaving **Add xmlns when missing** on prevents that failure.

</details>

<details>
<summary>Can I use the result in CSS masks?</summary>

Yes. Set **Snippet** to **CSS mask-image** and the tool emits both `-webkit-mask-image` and the
standard `mask-image` declaration. That covers Safari/WebKit as well as browsers that support the
unprefixed property.

</details>

<details>
<summary>Will minify change my drawing?</summary>

For icon-style SVGs, no: it removes declarations, comments, and redundant whitespace that do not
change rendering. Turn minification off if your SVG includes `<text>` nodes where repeated spaces are
meaningful, or if you need the encoded markup to match the original bytes exactly.

</details>

<details>
<summary>Is this the same as a generic data URI encoder?</summary>

No. A generic encoder can wrap any bytes in a `data:` URI. This tool is specialized for SVG: it uses
the SVG MIME type, adds the namespace when needed, can minify markup first, offers CSS/HTML/JSX
snippet shapes, and compares URL encoding against Base64 for the same SVG.

</details>

## Related tools

- [Before / after image slider generator](https://gizza.ai/tools/before-after-slider/): Turn two images into an interactive before/after comparison slider: one self-contained HTML file with inline CSS + JS, no libraries.
- [CMYK JPEG to RGB Converter](https://gizza.ai/tools/cmyk-jpeg-to-rgb/): Convert a CMYK or Adobe YCCK JPEG to a standard RGB PNG, JPEG or WebP in your browser. Choose format, quality and chroma. No upload.
- [Color Code Extractor](https://gizza.ai/tools/color-code-extractor/): Extract hex, rgb(a), hsl(a), hwb and named CSS color values from pasted CSS or text, deduplicate them, and export the palette in useful formats.
- [Color Contrast Checker](https://gizza.ai/tools/color-contrast-checker/): WCAG colour contrast checker — get the contrast ratio and AA / AAA pass-fail for any text and background colour, plus an accessible suggestion. Free, in-browser.
- [Color converter](https://gizza.ai/tools/color-format-convert/): Convert a color between HEX, RGB(A), HSL, HSV and CMYK, in your browser. Paste any notation and get them all. Nothing is uploaded.