Adding SVGs to CSS

3 Oct 2022 in the blog section

Adding SVG’s inline to HTML is straightforward but adding to CSS requires a bit more attention.

The code to add an SVG as a background is simple:

body {
    background-image: url("image.svg");
}

To make the image inline you first open the SVG in a text editor.

If the SVG contains double quotes replace these with single quotes using a simple search and replace.

Next replace all hash symbols, #, with %23.

You can then paste your SVG code to your background-image property:

background-image: url ("<svg> ... code ...</svg>");

Finally add the following code just inside the opening double quote

data:image/svg+xml;utf8,

So finally you should have this.

background-image: url ("data:image/svg+xml;utf8,<svg> ... code ...</svg>");