You can also do this dynamically with transclusion : Trick to convert the core images to SVG image for CSS background - #10 by telumire
Other useful use case for SVG : emoji icons, animations, icon with dynamic text/data, supporting darkmod, etc.
Also, a word of warning : when you want to use SVG in a CSS background, hexadecimal color values can cause issues. The “#” needs to be url encoded (because it is an url), so # must be replaced with %23.
I made a tool to do that automatically, maybe that will interest you :