Inline an SVG in CSS the smallest correct way, with background-image, mask-image and <img> snippets ready to copy.
One SVG file · or paste SVG code below
No size limit · files are processed on your device and never uploaded · how it works
Advanced settings (optional)
Encoding options
Encoding
URL-encoding is smaller and stays readable; Base64 inflates the SVG by about a third.
CSS class
Used in the generated snippets.
Before encoding
Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the SVG to CSS
Click “Choose Files” or drop your SVG file into the box above. Whole folders work too.
Adjust the Advanced settings if you need to, then click “Copy”.
When the row shows Done, click “Download” — or “Download all” for a ZIP.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
Inlining SVG in CSS, done properly
A data URI puts the image bytes inside the stylesheet, so a small icon renders with no extra request. Most tools reach for
Base64, which makes the SVG about a third larger and hurts gzip. This converter uses minimal URL-encoding instead:
only the characters that break a CSS url() — #, <, >,
{, }, % and double quotes — are escaped, and the result is both smaller and still
readable. The size panel shows the alternative encoding so you can compare on your own file.
Three ways to use the output
background-image — paints the SVG as-is. Use for multi-colour graphics, bullets, decorative backgrounds.
mask-image — uses the SVG as a stencil for background-color, so a single-colour icon can be recoloured from CSS (currentColor, hover states, dark mode). Both prefixed and unprefixed properties are included.
<img> — the same URI as an image source, for HTML that cannot reference external files.
Before encoding
"Optimise first" runs the SVG through SVGO (balanced preset, viewBox kept) so you are not embedding editor metadata in
your stylesheet; it typically halves the URI. The converter also adds the SVG namespace if your markup lacks it — SVG in a
data URI is a standalone document and renders blank without it. Keep inlined icons small: past a few kilobytes, a shared
sprite or a cached file is the better trade.
Frequently asked questions
URL-encoded or Base64?
URL-encoded. Base64 inflates the SVG by about 33 % and compresses poorly with gzip/brotli because it destroys the text structure; minimal URL-encoding escapes only the handful of characters that break CSS (#, <, >, {, }, %, quotes) and stays readable and compressible. The tool shows both sizes so you can see the difference on your own file. Use Base64 only for a toolchain that specifically demands it.
When is a data URI better than an SVG file?
For small icons used in CSS (bullets, input decorations, button glyphs), inlining removes an HTTP request and renders immediately with the stylesheet. Above roughly 4–5 KB it starts to hurt: the data is downloaded with every page that includes the stylesheet and cannot be cached separately. Bigger or shared graphics belong in a file or a sprite.
What is the mask-image snippet for?
A background-image is painted as-is. A mask uses the SVG as a stencil for background-color, so you can recolour the icon from CSS — background-color: currentColor makes it follow text colour, including on hover. It is the right choice for single-colour icons; use background-image for multi-colour artwork.
Why does the output add xmlns to my SVG?
SVG embedded in a data URI is parsed as a standalone XML document, and without xmlns="http://www.w3.org/2000/svg" browsers render nothing. Inline SVG in HTML does not need it, which is why files copied from a page often lack it. The tool adds it when missing.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.