使用SASS从文件内嵌SVG [英] Inline SVG from a file with SASS

问题描述

我有一个名为test.svg的文件，它与sass文件位于同一文件夹中.

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>")

但是由于equal-sigtn等原因，这不会在浏览器中呈现.我想包含来自外部文件的图像.我已经尝试过:

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)")

这怎么办? (我正在与Koala一起编译)

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

推荐答案

Sass根本不提供读取文件的任何功能，而Compass却提供了任何功能.就像将svg放在images目录中(通过config.rb配置)并将文件的路径(相对于您配置的目录)传递到inline-image()函数一样简单:

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');
}

输出:

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

请记住，此函数在对base64进行编码之前不会尝试粉碎SVG(删除空白等).

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

这篇关于使用SASS从文件内嵌SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！