Editing Icons With SVG Sprites (section)

== Using SVG as background images ==

The fill color of inline SVG images can be specified inline. This is not true of SVG images passed to the CSS `url()` function. <ref>[https://css-tricks.com/using-svg/ Using SVG] - CSS Tricks</ref> Only paths to SVG files or SVG code itself can be passed to `url()`.

The fill color of SVG is specified with the `fill` attribute of the `svg` or `path` tags, for example:

<syntaxhighlight lang="xml">
<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" rx="10" ry="10" width="220" height="220" fill="#ff6600" />
</svg>
</syntaxhighlight>

In order to use the SVG code above as the background image of an element:

<syntaxhighlight lang="css">
.my-svg-bg-image-class {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20240%20240%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20rx%3D%2210%22%20ry%3D%2210%22%20width%3D%22220%22%20height%3D%22220%22%20fill%3D%22%23ff6600%22%20%2F%3E%0A%3C%2Fsvg%3E%0A');
}
</syntaxhighlight>

So the URL is made up of two parts. First, `data:image/svg+xml;utf8,` followed by the SVG XML. 

The SVG code must be URL encoded with a tool like [https://www.urlencoder.org/ urlencoder.org], for example. So everything inside and including the `<svg>` tag to the closing `</svg>` tag. 

The SVG code for an existing SVG image can be obtained by dropping the SVG in a browser and then navigating to "view source".

The position, size, and repeating properties of the background image are controlled with the CSS properties `background-position`, `background-size`, and `background-repeat`. <ref>[https://developer.mozilla.org/en-US/docs/Web/CSS/background CSS background] - MDN Web Docs</ref>

See the CodePen [https://codepen.io/dbarchowsky/pen/MWQoVVR "SVG background image in CSS"] for a working example.