Inline SVG from a file with SASS

Question

I have a file called test.svg, it's located in the same folder as the sass-file.

I want to use it as my list-style-image, like this:

list-style-image: url("data:image/svg+xml;<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><text x='0' y='8'>x</text></svg>")

But this doesn't render in the browser because of the equal-sigtn etc. I want to include the image from the external file. I have tried:

list-style-image: url("data:image/svg+xml;@import test.svg")
list-style-image: url("data:image/svg+xml;import(test.svg)")
list-style-image: url("data:image/svg+xml;inline-image(test.svg)")
list-style-image: url("data:image/svg+xml;image-uri(test.svg)")

How can this be done? (I'm compiling with Koala)

Answer 1

Sass does not provide any functions for reading files at all, but Compass does. It's as simple as placing your svg in the images directory (configured via config.rb) and passing the path to the file (relative from your configured directory) to the inline-image() function:

body {
    background: inline-image('test.svg');
}

Output:

body {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc5JyBoZWlnaHQ9JzknIHZpZXdCb3g9JzAgMCA5IDknPjx0ZXh0IHg9JzAnIHk9JzgnPng8L3RleHQ+PC9zdmc+');
}

Do keep in mind that this function makes no attempt at crushing your SVG (removing whitespace, etc.) before base64 encoding it.

Answer 2

With sass, you could probably try something like node-sass-svg package offers. It enables you to inline external svg files into css with node-sass, with a cherry on top that actually enables you to recolor the svg.

li
  list-style-image: svg('test.svg', ("red": $color-brand))