Skip to content
🛠️ToolsShed

SVG to CSS Converter

Convert SVG code to CSS background-image data URI. Supports URL-encoded and Base64 formats.

About this tool

SVG to CSS Converter transforms SVG code into data URI format for use in CSS background-image properties, eliminating the need for separate image files or HTTP requests. By embedding SVG data directly in your stylesheets, you reduce external dependencies, improve page load performance, and simplify asset management. The tool supports both URL-encoded and Base64 encoding formats, each with distinct advantages depending on your performance priorities and readability preferences.

To convert SVG to CSS, paste your SVG code into the input area, select your preferred encoding method, and click Convert. URL-encoded format produces shorter output that's easier to read and debug, while Base64 creates a more compact representation that compresses better in gzip. The tool instantly shows you the CSS output and a live preview of the rendered SVG, helping you verify the conversion before copying it into your stylesheets.

This approach is particularly useful for small icons, logos, and simple graphics embedded in web applications. By keeping SVG data within CSS, you avoid cache-busting issues, reduce total network requests, and can even manipulate SVG properties through CSS pseudo-classes like :hover and :active. Consider storing complex SVGs as separate files for better maintainability, but inline data URIs work well for components that rarely change.

Frequently Asked Questions

Code Implementation

import base64
from urllib.parse import quote

def svg_to_css_url_encoded(svg: str) -> str:
    encoded = quote(svg, safe="")
    return f'background-image: url("data:image/svg+xml,{encoded}");'

def svg_to_css_base64(svg: str) -> str:
    b64 = base64.b64encode(svg.encode("utf-8")).decode("ascii")
    return f'background-image: url("data:image/svg+xml;base64,{b64}");'

svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#6366f1"/></svg>'

print("URL encoded:")
print(svg_to_css_url_encoded(svg))
print()
print("Base64:")
print(svg_to_css_base64(svg))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.