Compass Retina "spriting": use a seperate css file with data-urls of .svg images instead of a normal "sprite"

application.css

@import "svg-sprites.css"; // client-side import; just like a large sprite image

compass.rb

# compass initializer
module Sass::Script::Functions
  module SvgSprite
    def svg_sprite_list(pathname)
      basepath = "app/assets/images/#{pathname.to_s.gsub('"', "")}-svg/"
      icon_names = Dir[Rails.root.join("#{basepath}*.svg")].map{|f|
        Sass::Script::String.new(File.basename(f, '.*'))
      }
      Sass::Script::List.new(icon_names, :comma)
    end
  end
  include SvgSprite
end

svg-sprites.css.scss

@import "compass";
@mixin svg-icons($map, $original-map){
  @each $sprite in svg-sprite-list($map) {
    .#{$map}-#{$sprite}{
      background-image: inline-image("#{$map}-svg/#{$sprite}.svg");
      background-position:0 0;
      @include background-size(image-width(sprite-file($original-map, $sprite)) image-height(sprite-file($original-map, $sprite)));
    }
  }
}

@import "icon/*.png";
// optional; include png sprite as well
// @include all-icon-sprites(true);

.svg{
  @include svg-icons("icon", $icon-sprites);
}