SVG to CSS Data URI Converter

Convert SVG code or files into a CSS-ready url() data URI for use in background-image, mask-image, and more.

SVG Input
Encoding

About SVG to CSS Data URI

A CSS data URI lets you embed an SVG directly inside a stylesheet — no separate HTTP request needed. This tool converts your SVG code into a properly encoded url("data:image/svg+xml,...") string ready to paste into background-image, mask-image, content, and other CSS properties.

Features

  • Local Processing: Everything runs in your browser — no data sent to servers
  • URL-encoded or Base64: URL-encoding is shorter and more readable; Base64 is universal
  • Three output formats: Full CSS declaration, raw url(), or plain data string
  • Live SVG preview: Instantly see what the SVG looks like before copying
  • File upload: Drop or pick an .svg file as well as pasting code

How to Use

  1. Paste SVG code into the textarea, or click Upload .svg to load a file
  2. Choose URL-encoded (default, more efficient) or Base64 encoding
  3. Select the output format that matches your CSS property
  4. Copy the generated output and paste it into your stylesheet

Common Use Cases

  • Inline SVG icons in CSS background-image without extra files
  • SVG masks with mask-image for shape clipping effects
  • Custom CSS content icons in ::before / ::after pseudo-elements
  • Favicon embedding or email-safe image references
  • Reducing HTTP requests in performance-critical stylesheets

URL-encoded vs Base64

  • URL-encoded is the preferred approach for SVGs — it keeps the output shorter and human-readable, and gzip compresses better
  • Base64 increases file size by ~33% but may be required by some older tools or environments
  • Both are fully supported in all modern browsers