SVG Forge

SVG to CSS background-image

Inline any SVG into your stylesheet as an encoded data URI.

or drop a file / paste code below
CSS rule
Output appears here

How it works

  1. 1Paste SVG code or drop an .svg file.
  2. 2The tool URL-encodes it into a background-image rule.
  3. 3Copy the CSS snippet straight into your stylesheet.

Free, no signup, no watermark — everything runs locally in your browser, so your files never leave your machine.

Frequently asked questions

Why URL-encode instead of base64?

URL-encoded SVG is smaller and stays human-readable in your CSS; base64 is also available if you prefer.

When should I inline SVG in CSS?

Small decorative icons and patterns — it saves an HTTP request. Large artwork is better as a file.

Related tools

SVG to Data URI

Encode SVG for img src, CSS url() or anywhere a URI fits.

SVG Optimizer

SVGO-powered cleanup: smaller files, same pixels. See the savings instantly.

SVG to React

Paste SVG, get a ready-to-import JSX or TSX component.