Merge branch 'develop'

Conflicts: README.md
bashaus · Oct 10, 2013 · dc434d3 · dc434d3
2 parents ba058bd + 4058ae8
commit dc434d3
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 42 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,6 @@
 source "http://rubygems.org"
 
 # Specify your gem's dependencies in compass-baseline.gemspec
-gemspec
+gemspec
+
+gem "rmagick"
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Compass SVG polyfill
 
-Version 1.0.4
+Version 1.0.5
 
 A compass plugin which serves SVG background images to new browsers and 
 provides a PNG fallback to old browsers.
@@ -16,24 +16,44 @@ This script automates the conversion of SVGs to PNGs and provides the CSS for yo
 
 * broken-links.com -- [Using SVG in backgrounds with PNG fallback](http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/)
 
-## Installation
+## Requirements
 
-### Mac OS X (with homebrew)
+In order to use this gem you must have either `ImageMagick` or `librsvg`.
 
-You may need to download and install `XQuartz`
+ImageMagick is the recommended library.
+
+## Mac OS X Installation
+
+### ImageMagick
+
+Install `ImageMagick`
+
+    brew install imagemagick
+
+### librsvg
+
+Download and install `XQuartz`
 
     https://xquartz.macosforge.org/landing/
 
 Install `librsvg`
 
     brew install librsvg
 
+<<<<<<< HEAD
 ### Linux Ubuntu 12.04
+=======
+## Linux Installation
+
+Tested on `Ubuntu 12.04`
+>>>>>>> develop
+
+### librsvg
 
 Install `librsvg`
 
-    sudo apt-get update
-    sudo apt-get install librsvg2-bin
+    apt-get update
+    apt-get install librsvg2-bin
 
 ## Usage
 
@@ -49,14 +69,17 @@ Add the following to the top of your `config.rb`:
 
     require "compass-svg-polyfill"
 
-Run compass
+Run `compass`
 
     compass watch
 
-Edit your stylesheets and add a reference to the mixin:
+Add your stylesheet:
 
     # At the top of your file
-    @import "svg-polyfill/svg";
+    @import "compass-svg-polyfill/svg";
+
+    # Optionally, define the default image converter
+    $default-image-converter: imagemagick;
 
     # Target a specific element
     .element {
@@ -65,7 +88,8 @@ Edit your stylesheets and add a reference to the mixin:
             $height: 433px,                 /* value must be in pixels */
             $svg: "world-map.svg",          /* file must exist */
             $png: "world-map-856x433.png",  /* file to be generated */
-            $inline: false                  /* optional: include svg in css */
+            $inline: false,                 /* optional: include svg in css */
+            $image-converter: librsvg       /* optional: imagemagick or librsvg */
         );
     }
 
@@ -91,6 +115,29 @@ a separate HTTP request
 
 When `false`: both SVG and PNG images are downloaded via a separate HTTP request
 
+
+### $image-converter
+
+* Optional
+* Default value: imagemagick
+* Valid values: imagemagick, librsvg
+* Available from: 1.0.5
+
+You can select which image converter to use on a case-by-case basis using this 
+parameter.
+
+## Global variables
+
+### $default-image-converter
+
+* Global
+* Optional
+* Default value: imagemagick
+* Valid values: imagemagick, librsvg
+* Available from: 1.0.5
+
+Select which image converter to use globally.
+
 ## Licence
 
 Copyright (C) 2013, [Bashkim Isai](http://www.bashkim.com.au)

diff --git a/compass-svg-polyfill.gemspec b/compass-svg-polyfill.gemspec
@@ -8,6 +8,13 @@ Gem::Specification.new do |s|
   s.license     = "MIT"
   s.homepage    = "http://github.com/bashaus/compass-svg-polyfill"
   s.summary     = "Converts SVG images to PNG for use in older browsers"
+  s.description = <<-EOF
+    SVG images are a great way to display vector images online; however some 
+    older web browsers do not support this format.
+
+    The compass-svg-polyfill gem generates fallback PNG images for these 
+    browsers.
+  EOF
 
   s.files         = Dir["lib/**/*", "README*"]
   s.require_paths = ["lib"]

diff --git a/example/images/world-map-856x433.png b/example/images/world-map-856x433.png
diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
 	<link href="stylesheets/screen.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-	Displaying map:
+	<h1>Example image</h1>
 	<div class="map"></div>
 </body>
 </html>
diff --git a/example/sass/screen.scss b/example/sass/screen.scss
@@ -1,11 +1,11 @@
-@import "svg-polyfill/svg";
+@import "compass-svg-polyfill/svg";
 
 .map {
     @include background-svg(
         $width: 856px,
         $height: 433px,
         $svg: "world-map.svg",
         $png: "world-map-856x433.png",
-        $inline: false
+        $inline: true
     );
 }
diff --git a/example/stylesheets/screen.css b/example/stylesheets/screen.css
diff --git a/lib/compass-svg-polyfill.rb b/lib/compass-svg-polyfill.rb
@@ -1,6 +1,6 @@
 require 'compass-svg-polyfill/sass_functions.rb'
 
 Compass::Frameworks.register(
-	'svg-polyfill',
+	'compass-svg-polyfill',
 	:stylesheets_directory => File.join(File.dirname(__FILE__), 'compass-svg-polyfill', 'stylesheets')
 )
diff --git a/lib/compass-svg-polyfill/sass_functions.rb b/lib/compass-svg-polyfill/sass_functions.rb
@@ -1,37 +1,52 @@
+require 'RMagick'
+
 module Sass::Script::Functions
-  def svg_polyfill(width, height, svgIn, pngOut)
+  def svg_polyfill(width, height, svgName, pngName, imageConverter)
     assert_type width, :Number
     assert_type height, :Number
-    assert_type svgIn, :String
-    assert_type pngOut, :String
+    assert_type svgName, :String
+    assert_type pngName, :String
+    assert_type imageConverter, :String
+
+    imageConverter = imageConverter.value.to_sym
 
-    svgPath = File.join Compass.configuration.images_path, svgIn.value
-    pngPath = File.join Compass.configuration.images_path, pngOut.value
+    logger = Compass::Logger.new
 
-    begin
-      if !File.exists? svgPath
-        Compass::Logger.new.record :error, File.join(Compass.configuration.images_dir, svgIn.value)
-        raise "SVG does not exist"
-      end
+    svgName = svgName.value.to_s
+    svgPath = File.join Compass.configuration.images_path, svgName
 
-      if File.exists? File.join(Compass.configuration.images_path, pngOut.value)
-        Compass::Logger.new.record :overwrite, File.join(Compass.configuration.images_dir, pngOut.value)
-      else
-        Compass::Logger.new.record :create, File.join(Compass.configuration.images_dir, pngOut.value)
-      end
+    pngName = pngName.value.to_s
+    pngPath = File.join Compass.configuration.images_path, pngName
 
+    if !File.exists? svgPath
+      raise Sass::SyntaxError, "svg does not exist #{svgName}"
+    end
+
+    if File.exists? pngPath
+      logger.record :overwrite, pngName
+    else
+      logger.record :create, pngName
+    end
+
+    case imageConverter
+    when :imagemagick
+      img = Magick::Image.read(svgPath).first
+      img.resize!(width.value.to_i, height.value.to_i)
+      img.write pngPath
+    when :librsvg
       system(
         "rsvg-convert",           # Process
-        "-w", width.value.to_s,   # Width
-        "-h", height.value.to_s,  # Height
+        "-w", "#{width.value}",   # Width
+        "-h", "#{height.value}",  # Height
         "#{svgPath}",             # Input
         "-o", "#{pngPath}"        # Output
       )
-
-      Sass::Script::Bool.new true
-    rescue
-      Sass::Script::Bool.new false
+    else
+      raise Sass::SyntaxError, "Unknown image converter #{imageConverter}"
     end
+
+    Sass::Script::Bool.new true
   end
+
   declare :svg_polyfill, :args => [:Number, :Number, :String, :String]
 end
diff --git a/...olyfill/stylesheets/svg-polyfill/svg.scss → ...stylesheets/compass-svg-polyfill/svg.scss b/...olyfill/stylesheets/svg-polyfill/svg.scss → ...stylesheets/compass-svg-polyfill/svg.scss
@@ -1,6 +1,11 @@
-@mixin background-svg($width, $height, $svg, $png, $inline: false) {
-    $converted: svg_polyfill($width, $height, $svg, $png);
-    @if $converted {
+$default-image-converter: imagemagick !default;
+
+@mixin background-svg($width, $height, $svg, $png, $inline: false, $image-converter: false) {
+    @if not $image-converter {
+        $image-converter: $default-image-converter;
+    }
+
+    @if svg_polyfill($width, $height, $svg, $png, $image-converter) {
         width: $width;
         height: $height;
         background-size: $width, $height;

diff --git a/lib/compass-svg-polyfill/version.rb b/lib/compass-svg-polyfill/version.rb
@@ -1,5 +1,5 @@
 module Compass
   module SVGPolyfill
-    VERSION = "1.0.4"
+    VERSION = "1.0.5"
   end
 end