My attempts to utilize an inline SVG as a background have been unsuccessful thus far. Despite referencing some stackoverflow posts and reading the css-tricks article on how to do it, I just can't seem to make it work :(
I am specifically aiming to use a simple "X" SVG as a CSS background following the instructions laid out in the css-tricks article, but evidently there is a misstep in my implementation since nothing is showing up on my page. Below is a snippet of the code I have been working with.
body {
background: black;
}
.container {
background:url('data:image/svg+xml,utf-8,<svg stroke="%23fff" viewBox="0 0 40 40"><path d="M 10,10 L 30,30 M 30,10 L 10,30"></path></svg>');
height: 100vh;
width: 90vw;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container"></div>
<!-- <svg stroke="#fff" viewBox="0 0 40 40"><path d="M 10,10 L 30,30 M 30,10 L 10,30"></path></svg> -->
</body>
</html>In the HTML file, I left the SVG commented out. Once uncommented, the SVG displays perfectly when used conventionally (as an HTML element). It's only when employed as a CSS background that things start to go awry. I even attempted encoding it using a base64 tool, as suggested by some users, but no luck. I'm clearly missing something here.
I understand this may be a basic issue, so I apologize for that. Appreciation in advance to anyone who offers assistance!