Question

我试图让SVG处理成一个DATA URI，它会让我的代码更容易维护，而不是大量的代码。

$white:rgb(255,255,255);

background:$white inline_image("/images/select-arrows.svg") no-repeat 92% center;

这是我到目前为止，我使用modernizr进行后备，但是我手动使用在线转换器，我正在安装指南针运行scss。这些都是由codekit 2编写的。

指南针配置：

require 'compass/import-once/activate'

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"

output_style = :compressed
color_output = false

以下是我目前的加价：

background:$white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTAgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiM0NzRDNEMiIHBvaW50cz0iMTAsOS43NDYgNS4wNTgsMTYgMCw5Ljc0NiAiLz4NCjxwb2x5Z29uIGZpbGw9IiM0NzRDNEMiIHBvaW50cz0iMCw2LjI5MSA1LDAgMTAsNi4yOTEgIi8+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat 92% center;

任何反馈都会很棒！

Answer 1

Almost there：

background:$white inline-image("select-arrows.svg") no-repeat 92% center;

确保images_dir中的config.rb设置正确，以指向./images（这是默认设置），您应该好好去。

另外，check out this post可以看到Compass的一些巧妙的技巧和带有后备PNG的内联SVG（是的，你应该仍然使用后备）。 SVG并不是普遍支持的。

从SCSS创建数据URI

1 个答案: