Using an Data URI SVG as a CSS background image

Question

Backstory:

• Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image)

Answer 1

Make sure to use percent-encoding in data URI not encoded with base64.

For example, for an SVG, encode like this:

body { 
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cpolygon%20style%3D%22stroke%3A%23252423%3Bfill%3A%23252423%3B%22%20points%3D%220%2C200%200%2C0%20200%2C0%22%2F%3E%3C%2Fsvg%3E'); 
}

This is equivalent to the following SVG:

To percent encode an image, you can use the following JavaScript code:

console.log(encodeURIComponent(''))