compass-svg-polyfill 1.0.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 5cc5785234656492fd392c981413c1c64b7095fa
4
+ data.tar.gz: 5b8a38e985899da58ec44d1f93d483bd056501a0
5
+ SHA512:
6
+ metadata.gz: d7d0447f2e684a2997cf5b9a20dd7e6c187e3bd62ed2907789034dc538e9077cd4ecc2dd00e0d661119728bbb894c84894babf2b885d19cd6e55cfacb89ef66b
7
+ data.tar.gz: 5fb8c41fcce0feb3519ac0bec8ecefbd5a00b4e7438e8e9e69d0f9bf4481769383530e46956d311b028de7ab567525354df127edaa284bf52b50471968791e3d
data/README.md ADDED
@@ -0,0 +1,92 @@
1
+ # Compass SVG polyfill
2
+
3
+ Version 1.0.2
4
+
5
+ A compass plugin which serves SVG background images to new browsers and
6
+ provides a PNG fallback to old browsers.
7
+
8
+ ## Project details
9
+
10
+ ### Use case
11
+
12
+ SVGs are great as they're a vector format but some browsers don't support them.
13
+ This script automates the conversion of SVGs to PNGs and provides the CSS for you.
14
+
15
+ ### Problem domain
16
+
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
+
19
+ ## Installation
20
+
21
+ ### Mac OS X (with homebrew)
22
+
23
+ If you don't already have it, download and install `XQuartz`
24
+
25
+ https://xquartz.macosforge.org/landing/
26
+
27
+ Install `librsvg`
28
+
29
+ brew install librsvg
30
+
31
+ Install `gem`
32
+
33
+ gem install compass-svg-polyfill
34
+
35
+ ## Usage
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
+ ### Instructions
46
+
47
+ The following instructions are for adding the SVG background image code to an existing project.
48
+
49
+ Add the following to the top of your `config.rb`:
50
+
51
+ require "compass-svg-polyfill"
52
+
53
+ Run compass
54
+
55
+ compass watch
56
+
57
+ Edit your stylesheets and add a reference to the mixin:
58
+
59
+ # At the top of your file
60
+ @import "svg-polyfill/svg";
61
+
62
+ # Target a specific element
63
+ .element {
64
+ @include background-svg(
65
+ $width: 856,
66
+ $height: 433,
67
+ $svg: "world-map.svg", /* must exist */
68
+ $png: "world-map-856x433.png" /* will be generated for you */
69
+ );
70
+ }
71
+
72
+ When using `compass watch` images are regenerated every time you update your
73
+ CSS files. If you make changes to your SVG images, resave a stylesheet
74
+ containing the image and the PNG images will be regenerated.
75
+
76
+ ## Licence
77
+
78
+ Copyright (C) 2013, [Bashkim Isai](http://www.bashkim.com.au)
79
+
80
+ This script is distributed under the MIT licence.
81
+
82
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
83
+
84
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
85
+
86
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
87
+
88
+ ## Contributors
89
+
90
+ * @bashaus -- [Bashkim Isai](http://www.bashkim.com.au/)
91
+
92
+ If you fork this project and create a pull request add your GitHub username, your full name and website to the end of list above.
@@ -0,0 +1,6 @@
1
+ require 'compass-svg-polyfill/sass_functions.rb'
2
+
3
+ Compass::Frameworks.register(
4
+ 'svg-polyfill',
5
+ :stylesheets_directory => File.join(File.dirname(__FILE__), 'compass-svg-polyfill', 'stylesheets')
6
+ )
@@ -0,0 +1,37 @@
1
+ module Sass::Script::Functions
2
+ def svg_polyfill(width, height, svgIn, pngOut)
3
+ assert_type width, :Number
4
+ assert_type height, :Number
5
+ assert_type svgIn, :String
6
+ assert_type pngOut, :String
7
+
8
+ svgPath = File.join Compass.configuration.images_path, svgIn.value
9
+ pngPath = File.join Compass.configuration.images_path, pngOut.value
10
+
11
+ begin
12
+ if !File.exists? svgPath
13
+ Compass::Logger.new.record :error, File.join(Compass.configuration.images_dir, svgIn.value)
14
+ raise "SVG does not exist"
15
+ end
16
+
17
+ if File.exists? File.join(Compass.configuration.images_path, pngOut.value)
18
+ Compass::Logger.new.record :overwrite, File.join(Compass.configuration.images_dir, pngOut.value)
19
+ else
20
+ Compass::Logger.new.record :create, File.join(Compass.configuration.images_dir, pngOut.value)
21
+ end
22
+
23
+ system(
24
+ "rsvg-convert", # Process
25
+ "-w", width.to_s, # Width
26
+ "-h", height.to_s, # Height
27
+ "#{svgPath}", # Input
28
+ "-o", "#{pngPath}" # Output
29
+ )
30
+
31
+ Sass::Script::Number.new 1
32
+ rescue
33
+ Sass::Script::Number.new 0
34
+ end
35
+ end
36
+ declare :svg_polyfill, :args => [:Number, :Number, :String, :String]
37
+ end
@@ -0,0 +1,11 @@
1
+ @mixin background-svg($width, $height, $svg, $png) {
2
+ $converted: svg_polyfill($width, $height, $svg, $png);
3
+ @if $converted == 1 {
4
+ width: $width;
5
+ height: $height;
6
+ background-size: $width, $height;
7
+ background-repeat: no-repeat;
8
+ background-image: image-url($png);
9
+ background-image: inline-image($svg), none;
10
+ }
11
+ }
@@ -0,0 +1,5 @@
1
+ module Compass
2
+ module SVGPolyfill
3
+ VERSION = "1.0.2"
4
+ end
5
+ end
metadata ADDED
@@ -0,0 +1,76 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-svg-polyfill
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.2
5
+ platform: ruby
6
+ authors:
7
+ - Bashkim Isai
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2013-10-05 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ~>
18
+ - !ruby/object:Gem::Version
19
+ version: 3.1.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ~>
25
+ - !ruby/object:Gem::Version
26
+ version: 3.1.0
27
+ - !ruby/object:Gem::Dependency
28
+ name: compass
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - '>='
32
+ - !ruby/object:Gem::Version
33
+ version: 0.11.1
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - '>='
39
+ - !ruby/object:Gem::Version
40
+ version: 0.11.1
41
+ description:
42
+ email:
43
+ executables: []
44
+ extensions: []
45
+ extra_rdoc_files: []
46
+ files:
47
+ - lib/compass-svg-polyfill/sass_functions.rb
48
+ - lib/compass-svg-polyfill/stylesheets/svg-polyfill/svg.scss
49
+ - lib/compass-svg-polyfill/version.rb
50
+ - lib/compass-svg-polyfill.rb
51
+ - README.md
52
+ homepage: http://github.com/bashaus/compass-svg-polyfill
53
+ licenses:
54
+ - MIT
55
+ metadata: {}
56
+ post_install_message:
57
+ rdoc_options: []
58
+ require_paths:
59
+ - lib
60
+ required_ruby_version: !ruby/object:Gem::Requirement
61
+ requirements:
62
+ - - '>='
63
+ - !ruby/object:Gem::Version
64
+ version: '0'
65
+ required_rubygems_version: !ruby/object:Gem::Requirement
66
+ requirements:
67
+ - - '>='
68
+ - !ruby/object:Gem::Version
69
+ version: '0'
70
+ requirements: []
71
+ rubyforge_project:
72
+ rubygems_version: 2.0.6
73
+ signing_key:
74
+ specification_version: 4
75
+ summary: Converts SVG images to PNG for use in older browsers
76
+ test_files: []