SVG Data URI Encoding Reference
Embedding SVG directly in CSS via data: URIs eliminates HTTP requests for small icons and graphics. Here is how encoding works and when to use it.
How SVG-to-Data-URI Encoding Works
The encoder replaces special characters (#, <, >, ") with their URL-encoded equivalents and wraps the result in a data: scheme:
/* Input SVG */
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z" fill="#ff6b6b"/>
</svg>
/* Encoded output — use in CSS */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 22h20L12 2z' fill='%23ff6b6b'/%3E%3C/svg%3E");Characters That Must Be Encoded
| Character | Encoded | Why |
|---|---|---|
# | %23 | Conflicts with URL fragment identifier |
< | %3C | HTML tag delimiter |
> | %3E | HTML tag delimiter |
" | ' or %22 | Conflicts with CSS url("...") |
% | %25 | URL escape character itself |
Usage Examples in CSS
/* Background icon */
.icon-check {
background: url("data:image/svg+xml,...") no-repeat center;
background-size: contain;
width: 24px;
height: 24px;
}
/* Custom list marker */
ul.custom li {
list-style: none;
padding-left: 1.5em;
background: url("data:image/svg+xml,...") no-repeat 0 0.25em;
background-size: 1em 1em;
}
/* Pseudo-element decorative icon */
.badge::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("data:image/svg+xml,...") no-repeat;
background-size: contain;
margin-right: 0.5em;
}Data URI vs External File
| Consideration | Data URI | External file |
|---|---|---|
| HTTP requests | None (inline) | 1 per file |
| Caching | Cached with CSS file | Cached independently |
| Best for | Small icons (<4 KB) | Larger or reused images |
| CSS file size | Increases | No impact |
Other tools: Clip Path Studio, Gradient Studio, Font Studio