SVG in CSS: choose the right method
| Method | Best for | Tradeoff |
|---|---|---|
| CSS data URI | Small icons, patterns, decoration | No request; adds CSS bytes |
| External SVG | Large or widely reused assets | Cacheable; costs a request |
| Inline SVG element | Interactive or animated graphics | Fully styleable; adds markup |
| Icon font | Legacy icon systems | Compact set; accessibility and rendering issues |
Inline a small SVG when removing an asset request matters and the image belongs to one stylesheet. Keep a large illustration external when independent caching and lazy loading matter more. Unlike icon fonts, SVGs retain multiple colors and do not turn into missing-glyph boxes when a font fails.
CSS background image
Use background-image when the SVG’s own fills and strokes should render unchanged:
.badge {
background-image: url("data:image/svg+xml,%3Csvg ... %3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}Recolor an SVG with mask-image
A mask reads the SVG’s alpha channel. The element’s background supplies the color, so one encoded icon can follow currentColor or a design token:
.icon {
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg ... %3E");
mask-image: url("data:image/svg+xml,%3Csvg ... %3E");
-webkit-mask-size: contain;
mask-size: contain;
}Repeating SVG patterns
Set a fixed background size and repeat the encoded tile. The SVG viewBox controls its proportions; CSS controls the rendered tile size:
.grid {
background-image: url("data:image/svg+xml,%3Csvg ... %3E");
background-size: 24px 24px;
background-repeat: repeat;
}Frequently asked questions
Should I use URL encoding or Base64 for SVG in CSS?
URL encoding is usually smaller for text-based SVG and compresses well with gzip or Brotli. Base64 adds roughly 33% overhead, so use it only when a tool requires it.
How do I change the color of an SVG in CSS?
Choose the Mask output above, then set background-color to currentColor or a CSS variable. CSS controls the visible color while the SVG controls the shape.
When should I keep an SVG as an external file?
Keep large illustrations and assets reused across many pages external so browsers can cache them independently. Inline small icons and decorative backgrounds when avoiding a request is worth the extra CSS bytes.
Is the SVG uploaded to a server?
No. Conversion, minification, and preview all run locally in your browser.
Need HTML, React, favicon, or raw data URI output? Use the main SVG Encoder. For a deeper walkthrough, read how to use SVG as a CSS background image.
