通过URI内联SVG

我想在css中使用数据URI的我的SVG图像。基本的方法是将完整的数据URI设置为= css类的背景属性的值。通过URI内联SVG

.bg { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
}

我的问题是：如何将数据URI值分解为单独的文件，并在我的css类中引用该文件。目标：将所有的数据URI从基本样式中分离出来，这样它们就不会让CSS变得太可笑了。

从来没有使用URI来实现SVG，所以我也打开任何任何人都可能有的想法：通过URI实现SVG。谢谢一堆！ :)

P.S.如果有一个很好的方法来实现这个功能，我正在使用这个项目的gulp和bootstrap sass。

您将数据uri保存为一个文件，然后引用它。当然，它不再是当时的数据URI，而只是一个URI。 –

这是超级基本的，但你会如何引用该文件。你会给该文件什么扩展名？我如何才能在所述文件中引用一个SVG？ –

取决于你放在哪里。明显的扩展名是.svg不是吗？我真的不明白最后一个问题。 –

我更喜欢使用grunt-grunticon，它可以为你生成css类，如果需要的话，可以使用fallback来生成png。然后，您可以使用scss或sass来以您希望使用它的方式扩展图标。例如@extend .icon-undo;

希望这会有所帮助。祝你好运。

2016-10-14 16:31:28 tuck

回答