Why Embed SVGs in CSS?

Converting SVG to CSS data URIs allows you to embed vector graphics directly in your stylesheets. This technique is particularly useful for icons, decorative elements, and UI components that need to scale perfectly at any size while minimizing HTTP requests.

Benefits of SVG in CSS

Encoding Methods

There are two ways to embed SVGs in CSS:

1. URL-Encoded (Recommended)

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E...%3C/svg%3E");

Pros: Smaller size, readable, easier to edit
Cons: Must escape special characters

2. Base64 Encoded

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");

Pros: No escaping needed, works with any content
Cons: 33% larger, not human-readable

Common Use Cases

Custom List Bullets

ul.custom-list {
    list-style: none;
    padding-left: 1.5em;
}

ul.custom-list li::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: -1.5em;
    margin-right: 0.5em;
    background-image: url("data:image/svg+xml,...");
    background-size: contain;
}

Custom Checkboxes

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,...");
    background-size: contain;
}

Icon Buttons

.btn-icon {
    background-image: url("data:image/svg+xml,...");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    padding-left: 40px;
}

SVG Optimization Tips

Before converting, optimize your SVGs to reduce file size:

• Remove metadata: Editor comments, generator tags
• Minimize precision: Reduce decimal places in paths
• Remove unnecessary attributes: Default values, unused IDs
• Use SVGO: Automated optimization tool
• Simplify paths: Reduce node count where possible

Characters to Escape in URL Encoding

Character	Encoded	Notes
<	%3C	Opening tag
>	%3E	Closing tag
#	%23	Hex colors
"	' or %22	Attribute quotes
%	%25	Percentage values

Alternative: Inline SVG

For more flexibility, consider inline SVG in HTML instead:

<button>
    <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
    </svg>
    Button Text
</button>

Inline SVG allows CSS styling with fill: currentColor, hover effects, and animations.