Opt-in SVG support for gradients (linear & radial)

frameworks/compass/stylesheets/compass/_support.scss

@@ -23,3 +23,5 @@ $experimental-support-for-opera     : true !default;
 $experimental-support-for-microsoft : true !default;
 // Support for khtml in experimental css3 properties.
 $experimental-support-for-khtml     : true !default;
+// Support for svg in experimental css3 properties.
+$experimental-support-for-svg     : false !default;

frameworks/compass/stylesheets/compass/css3/_gradient.scss

@@ -30,6 +30,7 @@
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
 @mixin linear-gradient($color-stops, $start: top, $image: false) {
   // Firefox's gradient api is nice.
@@ -38,6 +39,10 @@
   @if $image { $background : $image + unquote(", "); }
   $start: unquote($start);
   $end: opposite-position($start);
+
+  @if $experimental-support-for-svg {
+    background-image: #{$background}linear-svg-gradient($color-stops, $start);
+  }
   @if $experimental-support-for-webkit {
     background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
   }
@@ -66,12 +71,17 @@
 // - Chrome
 // - Safari
 // - Firefox 3.6
+// - Opera
 
 @mixin radial-gradient($color-stops, $center-position: center center, $image: false) {
   $center-position: unquote($center-position);
   $end-pos: grad-end-position($color-stops, true);
   $background: unquote("");
   @if $image { $background: $image + unquote(", "); }
+
+  @if $experimental-support-for-svg {
+    background-image: #{$background}radial-svg-gradient($color-stops, $center-position);
+  }
   @if $experimental-support-for-webkit {
     background-image: #{$background}-webkit-gradient(radial, grad-point($center-position), 0, grad-point($center-position), $end-pos, grad-color-stops($color-stops));
   }
@@ -79,4 +89,4 @@
     background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
   }
   background-image: #{$background}radial-gradient($center-position, circle, $color-stops);
-}
+}

lib/compass/sass_extensions/functions/gradient_support.rb

@@ -38,6 +38,13 @@ module Compass::SassExtensions::Functions::GradientSupport
   module Functions
     # returns color-stop() calls for use in webkit.
     def grad_color_stops(color_list)
+      stops = color_stops_in_percentages(color_list).map do |stop, color|
+        "color-stop(#{stop.inspect}, #{color.inspect})"
+      end
+      Sass::Script::String.new(stops.join(", "))
+    end
+
+    def color_stops_in_percentages(color_list)
       assert_list(color_list)
       normalize_stops!(color_list)
       max = color_list.values.last.stop
@@ -51,10 +58,8 @@ module Compass::SassExtensions::Functions::GradientSupport
           raise Sass::SyntaxError.new("Color stops must be specified in increasing order")
         end
         last_value = stop
-        "color-stop(#{stop.inspect}, #{pos.color.inspect})"
+        [stop, pos.color]
       end
-      
-      Sass::Script::String.new(color_stops.join(", "))
     end
 
     # returns the end position of the gradient from the color stop
@@ -148,6 +153,25 @@ module Compass::SassExtensions::Functions::GradientSupport
         end
       end)
     end
+
+    def linear_svg_gradient(color_stops, start)
+      x1, y1 = grad_point(start).to_s.split
+      x2, y2 = grad_point(opposite_position(start)).to_s.split
+      stops = color_stops_in_percentages(color_stops)
+
+      svg = linear_svg(stops, x1, y1, x2, y2)
+      inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
+    end
+
+    def radial_svg_gradient(color_stops, center)
+      cx, cy = grad_point(center).to_s.split
+      r = grad_end_position(color_stops,  Sass::Script::Bool.new(true))
+      stops = color_stops_in_percentages(color_stops)
+
+      svg = radial_svg(stops, cx, cy, r)
+      inline_image_string(svg.gsub(/\s+/, ' '), 'image/svg+xml')
+    end
+
     private
     def normalize_stops!(color_list)
       positions = color_list.values
@@ -186,5 +210,40 @@ module Compass::SassExtensions::Functions::GradientSupport
       return if value.is_a?(List)
       raise ArgumentError.new("#{value.inspect} is not a list of color stops. Expected: color_stops(<color> <number>?, ...)")
     end
+
+    def linear_svg(color_stops, x1, y1, x2, y2)
+      gradient = <<-EOG
+        <linearGradient id="grad" x1="#{x1}" y1="#{y1}" x2="#{x2}" y2="#{y2}">
+          #{color_stops_svg(color_stops)}
+        </linearGradient>
+      EOG
+      svg(gradient)
+    end
+
+    def radial_svg(color_stops, cx, cy, r)
+      gradient = <<-EOG
+        <radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="#{cx}" cy="#{cy}" r="#{r}">
+          #{color_stops_svg(color_stops)}
+        </radialGradient>
+      EOG
+      svg(gradient)
+    end
+
+    # color_stops = array of: [stop, color]
+    def color_stops_svg(color_stops)
+      color_stops.each.map{ |stop, color|
+          %{<stop offset="#{stop.to_s}" stop-color="#{color.inspect}" />}
+      }.join
+    end
+
+    def svg(gradient)
+      svg = <<-EOS
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>#{gradient}</defs>
+  <rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
+</svg>
+      EOS
+    end
   end
 end

lib/compass/sass_extensions/functions/inline_image.rb

@@ -3,8 +3,7 @@ module Compass::SassExtensions::Functions::InlineImage
   def inline_image(path, mime_type = nil)
     path = path.value
     real_path = File.join(Compass.configuration.images_path, path)
-    url = "url('data:#{compute_mime_type(path,mime_type)};base64,#{data(real_path)}')"
+    inline_image_string(data(real_path), compute_mime_type(path, mime_type))
-    Sass::Script::String.new(url)
   end
 
   def inline_font_files(*args)
@@ -19,6 +18,13 @@ module Compass::SassExtensions::Functions::InlineImage
     Sass::Script::String.new(files.join(", "))
   end
 
+protected
+  def inline_image_string(data, mime_type)
+    data = [data].flatten.pack('m').gsub("\n","")
+    url = "url('data:#{mime_type};base64,#{data}')"
+    Sass::Script::String.new(url)
+  end
+
 private
   def compute_mime_type(path, mime_type = nil)
     return mime_type if mime_type
@@ -46,7 +52,7 @@ private
 
   def data(real_path)
     if File.readable?(real_path)
-      [File.open(real_path, "rb") {|io| io.read}].pack('m').gsub("\n","")
+      File.open(real_path, "rb") {|io| io.read}
     else
       raise Compass::Error, "File not found or cannot be read: #{real_path}"
     end

test/fixtures/stylesheets/compass/css/gradients.css

@@ -1,11 +1,11 @@
 @charset "UTF-8";
 .linear-1 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
   background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
 
 .linear-2 {
-  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
   background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
 
@@ -20,42 +20,42 @@
   background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
 
 .linear-5 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%);
   background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
 
 .linear-6 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%);
   background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
 
 .linear-7 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
   background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
 
 .linear-8 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%);
   background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
 
 .linear-9 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
   background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
 
 .linear-10 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
   background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
 
 .linear-11 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
   background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
   background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
 
 .linear-12 {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
   background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
   background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
 
@@ -95,6 +95,126 @@
   background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
 
 .alpha-linear {
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
+  background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }
+
+.linear-svg-1 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-2 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjUwJSIgeDI9IjEwMCUiIHkyPSI1MCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-3 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-4 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top right, #dddddd 0%, #aaaaaa 100%);
+  background-image: linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
+
+.linear-svg-5 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
+
+.linear-svg-6 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
+
+.linear-svg-7 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiAvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
+
+.linear-svg-8 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIC8+IDwvbGluZWFyR3JhZGllbnQ+IDwvZGVmcz4gPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz4gPC9zdmc+IA==');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%);
+  background-image: linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
+
+.linear-svg-9 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%);
+  background-image: linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
+
+.linear-svg-10 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
+  background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
+
+.linear-svg-11 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9saW5lYXJHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
+  background-image: -moz-linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%);
+  background-image: linear-gradient(top, #dddddd 40%, #000000 45%, #aaaaaa 50%); }
+
+.linear-svg-12 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPjxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIiAvPjxzdG9wIG9mZnNldD0iNjclIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%);
+  background-image: linear-gradient(top, #ffffff 0%, #0000ff 33%, #000000 67%); }
+
+.radial-svg-1 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+
+.radial-svg-2 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+
+.radial-svg-3 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
+  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+
+.radial-svg-4 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSIxMDAiPiA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
+
+.radial-svg-5 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iMCUiIHI9IjEwMCI+IDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIiAvPiA8L3JhZGlhbEdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
+  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%);
+  background-image: radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
+
+.radial-svg-6 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px);
+  background-image: radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
+
+.radial-svg-7 {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCI+IDxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgLz4gPC9yYWRpYWxHcmFkaWVudD4gPC9kZWZzPiA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPiA8L3N2Zz4g');
+  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
+  background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px);
+  background-image: radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
+
+.alpha-linear-svg {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxkZWZzPiA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPiA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDI1NSwgMjU1LCAwKSIgLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDEyNywgMTI3LCAwLjUpIiAvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiAvPiA8L2xpbmVhckdyYWRpZW50PiA8L2RlZnM+IDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+IDwvc3ZnPiA=');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%);
   background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, #ffffff 50%); }

test/fixtures/stylesheets/compass/sass/gradients.sass

@@ -69,3 +69,74 @@
 
 .alpha-linear
   +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
+
+$experimental-support-for-svg: true
+.linear-svg-1
+  +linear-gradient(color_stops(#dddddd, #aaaaaa))
+
+.linear-svg-2
+  +linear-gradient(color_stops(#dddddd, #aaaaaa), left)
+
+.linear-svg-3
+  +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top left"))
+
+.linear-svg-4
+  +linear-gradient(color_stops(#dddddd, #aaaaaa), unquote("top right"))
+
+.linear-svg-5
+  +linear-gradient(color_stops(#dddddd, #cccccc, #aaaaaa))
+
+.linear-svg-6
+  +linear-gradient(color_stops(#dddddd, #cccccc 20%, #aaaaaa))
+
+.linear-svg-7
+  +linear-gradient(color_stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
+
+.linear-svg-8
+  +linear-gradient(color_stops(#dddddd 80%, #aaaaaa))
+
+.linear-svg-9
+  +linear-gradient(color_stops(#dddddd, #aaaaaa 20%))
+
+.linear-svg-10
+  +linear-gradient(color_stops(#dddddd 40%, #aaaaaa 50%))
+
+.linear-svg-11
+  +linear-gradient(color_stops(#dddddd 40%, black, #aaaaaa 50%))
+
+.linear-svg-12
+  +linear-gradient(color-stops(white, blue 33%, black 67%))
+
+.radial-svg-1
+  // A default radial gradient:
+     A centered gradient having the shape of the container (aka ellipse)
+  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+
+.radial-svg-2
+  // A centered gradient having the shape of the container (aka ellipse)
+  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+
+.radial-svg-3
+  // A centered gradient at the top having the shape of the container (aka ellipse)
+  +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
+
+.radial-svg-4
+  // A centered gradient having a circular shape
+  +radial-gradient(color_stops(#dddddd, #aaaaaa))
+
+.radial-svg-5
+  // A centered gradient at the top having a circular shape
+  +radial-gradient(color_stops(#dddddd, #aaaaaa), unquote("top center"))
+
+.radial-svg-6
+  // A centered circular gradient with color stops
+     The color stops must be absolute units
+  +radial-gradient(color_stops(#dddddd 20px, #aaaaaa 50px))
+
+.radial-svg-7
+  // A centered elliptical gradient with color stops
+     The color stops must be relative units
+  +radial-gradient(color_stops(#dddddd 20%, #aaaaaa 50px))
+
+.alpha-linear-svg
+  +linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))