compass-svg-polyfill 1.0.3 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3c4024f50a1b14b2c583ad7a753b65de5c14e38d
|
4
|
+
data.tar.gz: e00b8ee7b61942bae511af147326443738717090
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 77c90338b747e003d3c0ea7be8fa9fda00d0d11d21e19765a697efbe7f32d9a2ca7fc055fb81d2e28fdcec6a5c1158b4563840adec44864335ef3ecb1cc2eb72
|
7
|
+
data.tar.gz: b199f209121acf3617b24587700f4cc61ffb996ff0f846e6e0e951971f92c254faa04063e0ce72c80506c17d75a5216b695244a00cc9032bac6116ddbf1c479a
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# Compass SVG polyfill
|
2
2
|
|
3
|
-
Version 1.0.
|
3
|
+
Version 1.0.4
|
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.
|
@@ -34,14 +34,6 @@ Install `gem`
|
|
34
34
|
|
35
35
|
## Usage
|
36
36
|
|
37
|
-
### Load times
|
38
|
-
|
39
|
-
The SVG vector images are base64 encoded and included in the CSS output through
|
40
|
-
a data URI. The fallback PNG images are linked through a URL. This means that
|
41
|
-
on older browsers the load time is slightly slower (because you have to
|
42
|
-
download two files) but on more modern browsers you have limited the number
|
43
|
-
of HTTP requests.
|
44
|
-
|
45
37
|
### Instructions
|
46
38
|
|
47
39
|
The following instructions are for adding the SVG background image code to an existing project.
|
@@ -62,10 +54,11 @@ Edit your stylesheets and add a reference to the mixin:
|
|
62
54
|
# Target a specific element
|
63
55
|
.element {
|
64
56
|
@include background-svg(
|
65
|
-
$width:
|
66
|
-
$height:
|
67
|
-
$svg: "world-map.svg", /* must exist */
|
68
|
-
$png: "world-map-856x433.png"
|
57
|
+
$width: 856px, /* value must be in pixels */
|
58
|
+
$height: 433px, /* value must be in pixels */
|
59
|
+
$svg: "world-map.svg", /* file must exist */
|
60
|
+
$png: "world-map-856x433.png", /* file to be generated */
|
61
|
+
$inline: false /* optional: include svg in css */
|
69
62
|
);
|
70
63
|
}
|
71
64
|
|
@@ -73,6 +66,24 @@ When using `compass watch` images are regenerated every time you update your
|
|
73
66
|
CSS files. If you make changes to your SVG images, resave a stylesheet
|
74
67
|
containing the image and the PNG images will be regenerated.
|
75
68
|
|
69
|
+
### $inline
|
70
|
+
|
71
|
+
* Optional
|
72
|
+
* Default value: false
|
73
|
+
* Available from: 1.0.4
|
74
|
+
|
75
|
+
The SVG vector images can be base64 encoded and included in the CSS output
|
76
|
+
through a data URI. The fallback PNG images are linked through a URL.
|
77
|
+
|
78
|
+
This means that on older browsers the load time is slightly slower (because you
|
79
|
+
have to download two files) but on more modern browsers you have limited the
|
80
|
+
number of HTTP requests.
|
81
|
+
|
82
|
+
When `true`: SVG images are encoded in the CSS file and PNG images download via
|
83
|
+
a separate HTTP request
|
84
|
+
|
85
|
+
When `false`: both SVG and PNG images are downloaded via a separate HTTP request
|
86
|
+
|
76
87
|
## Licence
|
77
88
|
|
78
89
|
Copyright (C) 2013, [Bashkim Isai](http://www.bashkim.com.au)
|
@@ -21,16 +21,16 @@ module Sass::Script::Functions
|
|
21
21
|
end
|
22
22
|
|
23
23
|
system(
|
24
|
-
"rsvg-convert",
|
25
|
-
"-w", width.to_s,
|
26
|
-
"-h", height.to_s,
|
27
|
-
"#{svgPath}",
|
28
|
-
"-o", "#{pngPath}"
|
24
|
+
"rsvg-convert", # Process
|
25
|
+
"-w", width.value.to_s, # Width
|
26
|
+
"-h", height.value.to_s, # Height
|
27
|
+
"#{svgPath}", # Input
|
28
|
+
"-o", "#{pngPath}" # Output
|
29
29
|
)
|
30
30
|
|
31
|
-
Sass::Script::
|
31
|
+
Sass::Script::Bool.new true
|
32
32
|
rescue
|
33
|
-
Sass::Script::
|
33
|
+
Sass::Script::Bool.new false
|
34
34
|
end
|
35
35
|
end
|
36
36
|
declare :svg_polyfill, :args => [:Number, :Number, :String, :String]
|
@@ -1,11 +1,16 @@
|
|
1
|
-
@mixin background-svg($width, $height, $svg, $png) {
|
1
|
+
@mixin background-svg($width, $height, $svg, $png, $inline: false) {
|
2
2
|
$converted: svg_polyfill($width, $height, $svg, $png);
|
3
|
-
@if $converted
|
3
|
+
@if $converted {
|
4
4
|
width: $width;
|
5
5
|
height: $height;
|
6
6
|
background-size: $width, $height;
|
7
7
|
background-repeat: no-repeat;
|
8
8
|
background-image: image-url($png);
|
9
|
-
|
9
|
+
|
10
|
+
@if $inline {
|
11
|
+
background-image: inline-image($svg), none;
|
12
|
+
} @else {
|
13
|
+
background-image: image-url($svg), none;
|
14
|
+
}
|
10
15
|
}
|
11
16
|
}
|