SVG to CSS

Convert SVG markup into an optimized CSS background-image data URI, URL-encoded or Base64, with a live preview. Free online SVG to CSS tool.

About this tool

Turn SVG markup into a CSS background-image data URI. URL encoding keeps the result short and readable; Base64 is also available.

URL-encoded SVG is usually smaller and stays readable. Base64 is safer in tools that mishandle special characters.

SVG used as a data URI needs xmlns="http://www.w3.org/2000/svg" to render, so it is added when missing.

Yes. Line breaks and extra spaces between tags are collapsed to shorten the result.

Base64 Image Encode / Decode – Turn images into data URIs and preview Base64 images
Color Converter – Convert between HEX, RGB, HSL, HWB and CMYK
HTML to JSX – Convert HTML markup into React JSX

Base64 Encode / Decode – Convert text to and from Base64 (UTF-8)
URL Encode / Decode – Percent-encode or decode URL components
HTML Entity Encode / Decode – Escape and unescape HTML entities
Base64 Image Encode / Decode – Turn images into data URIs and preview Base64 images
Backslash Escape / Unescape – Escape quotes, newlines and control characters
Hex ↔ ASCII – Convert text to hexadecimal bytes and back
JWT Debugger – Decode JSON Web Token header and payload

UUID / ULID Generate / Decode – Generate UUID v4 / v7 and ULID, and decode existing IDs
Hash Generator – MD5, SHA-1, SHA-256, SHA-384 and SHA-512 digests
Random String Generator – Cryptographically secure random strings
Lorem Ipsum Generator – Placeholder text in paragraphs, sentences or words
QR Code Generate / Read – Create QR codes and read them from images

World Time Converter – Convert a time between time zones; starts from this computer's current time
Unix Time Converter – Convert Unix timestamps and date strings
Number Base Converter – Convert between binary, octal, decimal and hex
YAML ↔ JSON – Convert YAML to JSON and back
CSV ↔ JSON – Convert CSV to JSON and back
HTML to JSX – Convert HTML markup into React JSX
Query String ↔ JSON – Convert URL query strings to JSON and back
URL Parser – Split a URL into its parts and query parameters
Color Converter – Convert between HEX, RGB, HSL, HWB and CMYK
SVG to CSS – Turn SVG markup into a CSS background data URI
JSON ↔ PHP Array – Convert JSON to PHP array syntax and back
PHP Serialize / Unserialize – Convert JSON to PHP serialize() format and back