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

See how the working fiddle has double quotes just inside the url() and then all the SVG content uses single quotes? You need to do the same. Otherwise the parser doesn't know where the url content ends.

Alternatively you could make the url use single quotes and keep your SVG content the same.

body { background-image: url('data:image/svg+xml;utf8,'); }