SVG to inlined CSS Background-Image generator
This quick tool will convert your SVG to inlined CSS background-image. Useful for decorative small icons that are repeated many times across the page.
Enter your SVG:
FAQ: Best CSS background-image SVG practices
When is it acceptable to have an inlined SVG background-image?
There are some use cases for inlined SVGs! Let's say you have a page with 15 download buttons, for example a listing page for whitepaper PDF downloads. You want each of these buttons to have a little download icon next to the "Download" text. Using an inlined HTML SVG, <img> element, or a HTML SVG sprite does not make sense for it. Why populate your HTML with unneccessary elements? Just give the text a "download-icon" class and inline it on the CSS for that specific class.
Do be reasonable, though. If this icon is only used on that specific page, don't put the SVG on your global CSS file, only use it on that page.
Accessibility of background-image SVGs
The inlined SVGs can't have alt texts or titles, so remember to use them only decoratively. Do not just put one on a button and call it a day, instead use either narrative texts such as "Download our January whitepaper" when a download icon is used, or an aria-label if the button features no text.
CSS background-image SVG vs. HTML inline SVG
Do use SVGs as background-images within reason. If done incorrectly, CSS can be less performance friendly than just inlining the SVGs on the HTML. If the icon is only used once or a couple times, just inline it on the HTML instead. If it is used more, it makes sense to not spam the HTML document with it and use CSS instead.
How large SVG files should I inline?
The sweet spot is around 0-2 KB SVGs (small icons are often a fraction of a KB).
Do not inline too large SVGs, I would recommend using a regular <img> element for anything over 20 KB unless you got a good reason for it. The reason for that is the fact that CSS is render blocking, meaning that the time it takes for CSS to load is time that the visitor is seeing nothing on the page, just a blank screen. If you put the image on a regular image element instead, it is not render blocking, and will load on its own.
Also, my 20 KB rule was just for single SVG file. If you have 10 of 20 KB images, that's 200 KB of CSS to be downloaded and parsed. That's a lot! Just use <img> elements for them with lazy loading.
I noticed a bug with this generator! How do I report it?
You can email me at jere@vaihe.com! Thank you :)