XPRTIX SVG

Convert SVG to a data URI.

Get a CSS data URI for an SVG so it can go straight into a stylesheet. Nothing is uploaded.

pen + nodesgradientsboolean opsartboardsSVG → PNG
Drop SVG files or click to browse. Each file opens in its own tab. SVG

XPRTIX SVG

Convert SVG to a data URI: how it works

Why a data URI

A data URI puts the image inside the CSS itself, like background-image: url("data:image/svg+xml,…"). That saves a request for small icons and keeps the icon next to the rule that uses it.

How to get one

Open your SVG (drop it above or paste the code), choose Export → CSS, and copy the result. The SVG is optimised first, so the data URI stays short. Keep decimals low for icons; the preview shows the size.

Tips

Data URIs suit small icons. For larger images a separate file caches better. If you need to recolour the icon with CSS, use the React export, or inline the SVG, since a background image cannot take currentColor from the page.

What it does

A full SVG editor that runs in your browser

Draw, reshape and clean up icons, logos and illustrations, or open an SVG you already have and change it. There is nothing to install and no account, and your files never leave your device.

  1. 01

    Edit paths node by node

    Draw with the pen or pencil, then drag anchor points and Bézier handles. Add or remove nodes, switch a node between corner and smooth, and open or close a path. Pen, rectangle, ellipse, line, polygon, star and text tools are all included.

    In your browser
  2. 02

    Style with fills, strokes and gradients

    Set solid colours, linear and radial gradients with any number of stops, stroke width, caps, joins, dashes and opacity. The eyedropper copies a style from one shape to another.

    In your browser
  3. 03

    Combine shapes with boolean operations

    Union, subtract, intersect and exclude paths to build new shapes, turn a stroke into an outline, and simplify a rough drawing into fewer nodes.

    In your browser
  4. 04

    Several SVGs in one document

    Every file opens as a tab, and each tab can hold several artboards, so an icon set lives in one place. Layers can be grouped, hidden, locked and reordered, with align, distribute and snapping to keep things tidy. Open tabs survive a page reload.

    In your browser

Export

Export as SVG, PNG, JPG, WebP or React

Preview the result and its file size before you save it.

Vector

  • Readable SVG, or an optimized one with metadata, editor attributes and unused definitions removed.
  • Choose how many decimals paths keep. Fewer decimals make smaller files.
  • A React (JSX) component, or a CSS data URI to paste straight into a stylesheet.

Raster

  • PNG, JPG and WebP at 1×, 2× and 4×, or any size you set.
  • An optional background colour, for formats with no transparency.
  • A ZIP of every artboard in one go.

Keyboard

  • V select, A edit nodes, P pen, T text.
  • ⌘/Ctrl+D duplicate, G group, Z undo.
  • Press ? inside the editor for the full list.

Transparency

What leaves your device

Nothing you open or draw.

Stays on your device

  • Every SVG you open, paste or draw, and every export.
  • Your open tabs, kept in this browser tab so a reload brings them back.

Sent to the server

  • Nothing. The editor has no upload step.

Recorded

  • Nothing from the editor.

SVG guides

Common SVG jobs

Questions

Asked often

Is a data URI better than a file?

For a few small icons, yes. For large images a separate file is better because it can be cached on its own.

Can I change the colour of a data URI icon?

Not from CSS. Set the colour in the SVG before exporting.

Is my SVG uploaded?

No. The encoding is done in your browser.

Is the data URI base64 encoded?

No. It is URL-encoded, which is usually shorter than base64 for SVG. Paste it into a CSS url() as it comes.

Can I use the data URI in an img tag?

Yes. The same data URI works as the src of an img element.

How long can a data URI be?

There is no practical limit in current browsers, but long ones bloat your CSS. Keep data URIs for small icons.