Generates an inline svg with the specified styles

compass-config.rb

require File.join(File.dirname(__FILE__), 'inline-svg.rb');
# ... your stuff

image.svg

inline-svg.rb

require 'sass'
require 'base64'
 
module Sass::Script::Functions
	def inlineSvg(string, list = Sass::Script::List.new(Array.new, :comma))
		assert_type string, :String

		file = File.open(string.value, "rb")
		svgFileContents = file.read
		file.close

		cssString = ''
		
		actualList = list.to_a
		
		if actualList.length > 0
			cssString = '<style type="text/css">circle,ellipse,line,path,polygon,polyline,rect,text{'

			if actualList.length > 2
				actualList.each { |pair|
					cssString = cssString + pair.to_s.sub(' ', ': ') + ' !important;'
				}
			else
				cssString = cssString + actualList.at(0).to_s + ': ' + actualList.at(1).to_s + ' !important;'
			end

			cssString = cssString + '}</style>';
		end

		svgFileContents = svgFileContents.sub('</svg>', cssString + '</svg>');

		return Sass::Script::String.new('url(\'data:image/svg+xml;charset=utf-8;base64,' + Base64.encode64(svgFileContents) + '\')')
	end
end

styles.scss

.svg-stuff {
	width: 100px;
	height: 100px;
	display: block;
	background: inlineSvg('image.svg', (stroke #000));
	
	&:hover {
		background: inlineSvg('image.svg', (fill rgba(0, 0, 255, .5), stroke #f00));
	}
}