How to insert SVG code into css Stylesheet. Code example

You can insert SVG code directly into a CSS stylesheet using the background-image rule and the url() function. To do this, you need to copy the SVG code and place it inside the url() function as the value of the background-image property.

For example, let’s say you have the following SVG code:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

in style sheet:

div {
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>');
}

In this example, we’ve placed the SVG code inside the url() function and encoded it in Base64 format so that it can be used as the value of the background-image property. Note that we also added the data:image/svg+xml;utf8 prefix before the encoded SVG code. This prefix tells the browser that the value is an SVG code, not a file URL.