compass-svg-polyfill 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 30d0df9bf889565d4b9403f296e7a6a14a5a165c
|
4
|
+
data.tar.gz: e328b89948742ad039aec3b5177479c84918df54
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5d0130cffbe7be74096cea9bffc887e2272cc01520195d353b67ff984eaa8162317622eecf53646669422f34846e2afb9fb91f7878f1be5edd1fd0cfa1dd363a
|
7
|
+
data.tar.gz: 9f881e1858c2460ae772c429d39cbbf1f9e0516b51976145457efe901990fd2df74f3b8f06bb9b76d764f9eb049fb104aa6eb5e1a1f474abd0eeb4a91a0ef0ee
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Compass SVG polyfill
|
2
2
|
|
3
|
-
Version 1.0.
|
3
|
+
Version 1.0.5
|
4
4
|
|
5
5
|
A compass plugin which serves SVG background images to new browsers and
|
6
6
|
provides a PNG fallback to old browsers.
|
@@ -16,11 +16,23 @@ This script automates the conversion of SVGs to PNGs and provides the CSS for yo
|
|
16
16
|
|
17
17
|
* 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/)
|
18
18
|
|
19
|
-
##
|
19
|
+
## Requirements
|
20
20
|
|
21
|
-
|
21
|
+
In order to use this gem you must have either `ImageMagick` or `librsvg`.
|
22
22
|
|
23
|
-
|
23
|
+
ImageMagick is the recommended library.
|
24
|
+
|
25
|
+
## Mac OS X Installation
|
26
|
+
|
27
|
+
### ImageMagick
|
28
|
+
|
29
|
+
Install `ImageMagick`
|
30
|
+
|
31
|
+
brew install imagemagick
|
32
|
+
|
33
|
+
### librsvg
|
34
|
+
|
35
|
+
Download and install `XQuartz`
|
24
36
|
|
25
37
|
https://xquartz.macosforge.org/landing/
|
26
38
|
|
@@ -28,9 +40,16 @@ Install `librsvg`
|
|
28
40
|
|
29
41
|
brew install librsvg
|
30
42
|
|
31
|
-
|
43
|
+
## Linux Installation
|
32
44
|
|
33
|
-
|
45
|
+
Tested on `Ubuntu 12.04`
|
46
|
+
|
47
|
+
### librsvg
|
48
|
+
|
49
|
+
Install `librsvg`
|
50
|
+
|
51
|
+
apt-get update
|
52
|
+
apt-get install librsvg2-bin
|
34
53
|
|
35
54
|
## Usage
|
36
55
|
|
@@ -38,18 +57,25 @@ Install `gem`
|
|
38
57
|
|
39
58
|
The following instructions are for adding the SVG background image code to an existing project.
|
40
59
|
|
60
|
+
Install `gem`
|
61
|
+
|
62
|
+
gem install compass-svg-polyfill
|
63
|
+
|
41
64
|
Add the following to the top of your `config.rb`:
|
42
65
|
|
43
66
|
require "compass-svg-polyfill"
|
44
67
|
|
45
|
-
Run compass
|
68
|
+
Run `compass`
|
46
69
|
|
47
70
|
compass watch
|
48
71
|
|
49
|
-
|
72
|
+
Add your stylesheet:
|
50
73
|
|
51
74
|
# At the top of your file
|
52
|
-
@import "svg-polyfill/svg";
|
75
|
+
@import "compass-svg-polyfill/svg";
|
76
|
+
|
77
|
+
# Optionally, define the default image converter
|
78
|
+
$default-image-converter: imagemagick;
|
53
79
|
|
54
80
|
# Target a specific element
|
55
81
|
.element {
|
@@ -58,7 +84,8 @@ Edit your stylesheets and add a reference to the mixin:
|
|
58
84
|
$height: 433px, /* value must be in pixels */
|
59
85
|
$svg: "world-map.svg", /* file must exist */
|
60
86
|
$png: "world-map-856x433.png", /* file to be generated */
|
61
|
-
$inline: false
|
87
|
+
$inline: false, /* optional: include svg in css */
|
88
|
+
$image-converter: librsvg /* optional: imagemagick or librsvg */
|
62
89
|
);
|
63
90
|
}
|
64
91
|
|
@@ -84,6 +111,29 @@ a separate HTTP request
|
|
84
111
|
|
85
112
|
When `false`: both SVG and PNG images are downloaded via a separate HTTP request
|
86
113
|
|
114
|
+
|
115
|
+
### $image-converter
|
116
|
+
|
117
|
+
* Optional
|
118
|
+
* Default value: imagemagick
|
119
|
+
* Valid values: imagemagick, librsvg
|
120
|
+
* Available from: 1.0.5
|
121
|
+
|
122
|
+
You can select which image converter to use on a case-by-case basis using this
|
123
|
+
parameter.
|
124
|
+
|
125
|
+
## Global variables
|
126
|
+
|
127
|
+
### $default-image-converter
|
128
|
+
|
129
|
+
* Global
|
130
|
+
* Optional
|
131
|
+
* Default value: imagemagick
|
132
|
+
* Valid values: imagemagick, librsvg
|
133
|
+
* Available from: 1.0.5
|
134
|
+
|
135
|
+
Select which image converter to use globally.
|
136
|
+
|
87
137
|
## Licence
|
88
138
|
|
89
139
|
Copyright (C) 2013, [Bashkim Isai](http://www.bashkim.com.au)
|
data/lib/compass-svg-polyfill.rb
CHANGED
@@ -1,37 +1,52 @@
|
|
1
|
+
require 'RMagick'
|
2
|
+
|
1
3
|
module Sass::Script::Functions
|
2
|
-
def svg_polyfill(width, height,
|
4
|
+
def svg_polyfill(width, height, svgName, pngName, imageConverter)
|
3
5
|
assert_type width, :Number
|
4
6
|
assert_type height, :Number
|
5
|
-
assert_type
|
6
|
-
assert_type
|
7
|
+
assert_type svgName, :String
|
8
|
+
assert_type pngName, :String
|
9
|
+
assert_type imageConverter, :String
|
10
|
+
|
11
|
+
imageConverter = imageConverter.value.to_sym
|
7
12
|
|
8
|
-
|
9
|
-
pngPath = File.join Compass.configuration.images_path, pngOut.value
|
13
|
+
logger = Compass::Logger.new
|
10
14
|
|
11
|
-
|
12
|
-
|
13
|
-
Compass::Logger.new.record :error, File.join(Compass.configuration.images_dir, svgIn.value)
|
14
|
-
raise "SVG does not exist"
|
15
|
-
end
|
15
|
+
svgName = svgName.value.to_s
|
16
|
+
svgPath = File.join Compass.configuration.images_path, svgName
|
16
17
|
|
17
|
-
|
18
|
-
|
19
|
-
else
|
20
|
-
Compass::Logger.new.record :create, File.join(Compass.configuration.images_dir, pngOut.value)
|
21
|
-
end
|
18
|
+
pngName = pngName.value.to_s
|
19
|
+
pngPath = File.join Compass.configuration.images_path, pngName
|
22
20
|
|
21
|
+
if !File.exists? svgPath
|
22
|
+
raise Sass::SyntaxError, "svg does not exist #{svgName}"
|
23
|
+
end
|
24
|
+
|
25
|
+
if File.exists? pngPath
|
26
|
+
logger.record :overwrite, pngName
|
27
|
+
else
|
28
|
+
logger.record :create, pngName
|
29
|
+
end
|
30
|
+
|
31
|
+
case imageConverter
|
32
|
+
when :imagemagick
|
33
|
+
img = Magick::Image.read(svgPath).first
|
34
|
+
img.resize!(width.value.to_i, height.value.to_i)
|
35
|
+
img.write pngPath
|
36
|
+
when :librsvg
|
23
37
|
system(
|
24
38
|
"rsvg-convert", # Process
|
25
|
-
"-w", width.value
|
26
|
-
"-h", height.value
|
39
|
+
"-w", "#{width.value}", # Width
|
40
|
+
"-h", "#{height.value}", # Height
|
27
41
|
"#{svgPath}", # Input
|
28
42
|
"-o", "#{pngPath}" # Output
|
29
43
|
)
|
30
|
-
|
31
|
-
Sass::
|
32
|
-
rescue
|
33
|
-
Sass::Script::Bool.new false
|
44
|
+
else
|
45
|
+
raise Sass::SyntaxError, "Unknown image converter #{imageConverter}"
|
34
46
|
end
|
47
|
+
|
48
|
+
Sass::Script::Bool.new true
|
35
49
|
end
|
50
|
+
|
36
51
|
declare :svg_polyfill, :args => [:Number, :Number, :String, :String]
|
37
52
|
end
|
@@ -1,6 +1,11 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
$default-image-converter: imagemagick !default;
|
2
|
+
|
3
|
+
@mixin background-svg($width, $height, $svg, $png, $inline: false, $image-converter: false) {
|
4
|
+
@if not $image-converter {
|
5
|
+
$image-converter: $default-image-converter;
|
6
|
+
}
|
7
|
+
|
8
|
+
@if svg_polyfill($width, $height, $svg, $png, $image-converter) {
|
4
9
|
width: $width;
|
5
10
|
height: $height;
|
6
11
|
background-size: $width, $height;
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: compass-svg-polyfill
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Bashkim Isai
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-10-
|
11
|
+
date: 2013-10-10 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -38,14 +38,16 @@ dependencies:
|
|
38
38
|
- - '>='
|
39
39
|
- !ruby/object:Gem::Version
|
40
40
|
version: 0.11.1
|
41
|
-
description:
|
41
|
+
description: " SVG images are a great way to display vector images online; however
|
42
|
+
some \n older web browsers do not support this format.\n\n The compass-svg-polyfill
|
43
|
+
gem generates fallback PNG images for these \n browsers.\n"
|
42
44
|
email:
|
43
45
|
executables: []
|
44
46
|
extensions: []
|
45
47
|
extra_rdoc_files: []
|
46
48
|
files:
|
47
49
|
- lib/compass-svg-polyfill/sass_functions.rb
|
48
|
-
- lib/compass-svg-polyfill/stylesheets/svg-polyfill/svg.scss
|
50
|
+
- lib/compass-svg-polyfill/stylesheets/compass-svg-polyfill/svg.scss
|
49
51
|
- lib/compass-svg-polyfill/version.rb
|
50
52
|
- lib/compass-svg-polyfill.rb
|
51
53
|
- README.md
|