SVG to Data URI Online

Encode local SVG source as a percent-encoded data URI and preview it in an isolated image context. Free svg to data uri online, with no installation or account.

Tool capabilities

Input: SVG · TXT
Output: SVG · TXT · CSS

How to use SVG to Data URI

Encode local SVG source as a percent-encoded data URI and preview it in an isolated image context.

Choose local SVG or paste its source, then run to preview, zoom and download.
Use static SVG without scripts, external resources, embedded images, filters or animation.
Copy the output or download it to your device.

SVG to Data URI · Example

Input

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200">
  <rect width="320" height="200" rx="24" fill="#eef1ff"/>
  <circle cx="100" cy="100" r="58" fill="#5265d8"/>
  <path d="M172 140 L222 54 L272 140 Z" fill="#e98367"/>
</svg>

Output

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22200%22%20viewBox%3D%220%200%20320%20200%22%3E%0A%20%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20rx%3D%2224%22%20fill%3D%22%23eef1ff%22%2F%3E%0A%20%20%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2258%22%20fill%3D%22%235265d8%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M172%20140%20L222%2054%20L272%20140%20Z%22%20fill%3D%22%23e98367%22%2F%3E%0A%3C%2Fsvg%3E

Encode local SVG source as a percent-encoded data URI and preview it in an isolated image context.

Usage notes

Inputs and results are processed on this device. Tool content is not sent to a processing server.

Limited SVG subset: shapes, text and gradients. Patterns, masks and markers are not supported.

SVG previews use an image context. Source is never inserted into the application document.

Use static SVG without scripts, external resources, embedded images, filters or animation.

SVG to Data URI