Creating a Data URI's from SCSS

Question

I am trying to get a SVG to process into a DATA URI, It would make my code a lot easier to maintain, rather than reams of code.

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

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

This is what I have to far, I am using modernizr for fallback however I am manually using an online converter, I am running scss with compass installed. These are being complied by codekit 2.

Compass Config:

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

Below is my current markup:

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;

Any feedback would be great!

Answer 1

Almost there:

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

Make sure your images_dir is set correctly in your config.rb to point to ./images (which is the default) and you should be good to go.

Also, check out this post to see some neat tricks with Compass and inline'd SVG's with fallback PNG's (yes, you should be using fallbacks still). SVG's isn't anywhere near supported universally yet.