├── .gitignore
├── LICENSE
├── README.md
├── css
└── style.css
├── img
└── svg-defs.svg
├── index.html
└── js
├── svg-icon-polyfill.js
└── svg-icon-polyfill.min.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Sass
2 | .sass-cache/
3 | .sass-cache/*
4 |
5 | # NPM
6 | node_modules/
7 |
8 | # Jekyll
9 | _site/
10 |
11 | # Editors
12 | *.esproj
13 | *.tmproj
14 | *.tmproject
15 | tmtags
16 | .*.sw[a-z]
17 | *.un~
18 | Session.vim
19 | *.swp
20 |
21 | # Mac OSX
22 | .DS_Store
23 | ._*
24 | .Spotlight-V100
25 | .Trashes
26 |
27 | # Windows
28 | Thumbs.db
29 | Desktop.ini
30 |
31 | # SVN
32 | .svn/
33 |
34 | # Wordpress
35 | .htaccess
36 | wp-*.php
37 | xmlrpc.php
38 | wp-admin/
39 | wp-includes/
40 | wp-content/uploads/
41 | wp-content/blogs.dir/
42 | wp-content/upgrade/*
43 | wp-content/backup-db/*
44 | wp-content/advanced-cache.php
45 | wp-content/wp-cache-config.php
46 | wp-content/cache/*
47 | wp-content/cache/supercache/*
48 | sitemap.xml
49 | sitemap.xml.gz
50 | readme.html
51 | license.txt
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Tim Wright
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # SVG Icon Sprite Polyfill
2 |
3 | ## A polyfill for Internet explorer and the SVG USE element.
4 |
5 | Article: http://csskarma.com/blog/svg-fragment-identifiers/
6 |
7 | Demo: https://timwright12.github.io/SVG-Icon-Sprite-Polyfill/
8 |
9 | This polyfill allows you to use:
10 |
11 |
15 |
16 | in Internet Explorer 9+.
17 |
18 | Just include the script and it should work.
19 |
20 | Your *svg-defs.svg* file should look like this (repeat the symbol element for each icon):
21 |
22 |
30 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | font-size: 100%;
4 | -webkit-font-smoothing: antialiased;
5 | }
6 |
7 | .item {
8 | padding: 10px;
9 | font-size: .9em;
10 | }
11 |
12 | .icon {
13 | height: 17px;
14 | width: 17px;
15 | margin-right: 10px;
16 | }
--------------------------------------------------------------------------------
/img/svg-defs.svg:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | SVG Icon Polyfill
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
17 |
18 | Add to my bag
19 |
20 |
21 |
22 |
23 |
24 |
28 |
29 | Add to my Wishlist
30 |
31 |
32 |
33 |
34 |
35 |
39 |
40 | Archive
41 |
42 |
43 |
44 |
45 |
46 |
50 |
51 | Birthday
52 |
53 |
54 |
55 |
56 |
57 |
61 |
62 | Contests & Sweepstakes
63 |
64 |
65 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/js/svg-icon-polyfill.js:
--------------------------------------------------------------------------------
1 | /*! SVG Icon Sprite Polyfill for IE9+
2 | * Copyright 2015 Tim Wright
3 | * Licensed under MIT
4 | * https://github.com/timwright12/SVG-Icon-Sprite-Polyfill/
5 | *
6 | * HTML Example Usage:
7 | *
8 | *
12 | */
13 |
14 | ;(function (doc) {
15 |
16 | // Enable strict mode
17 | "use strict";
18 |
19 | // Local object for method references
20 | var App = {};
21 |
22 | // A proper namespace
23 | App.ns = "SVG Sprite Polyfill";
24 |
25 | // Ajax that isn't jquery?!?!
26 | App.ajax = function(loopObj, callback) {
27 |
28 | var request = new XMLHttpRequest();
29 | var response;
30 |
31 | request.open('GET', loopObj, true);
32 |
33 | request.onload = function() {
34 | if (request.status >= 200 && request.status < 400) {
35 |
36 | response = request.responseText;
37 |
38 | if (typeof callback === 'function') {
39 | callback.call(this, response);
40 | }
41 |
42 | } else {
43 |
44 | console.log('Error reaching the server');
45 |
46 | }
47 |
48 | };
49 |
50 | request.onerror = function() {
51 |
52 | console.log('Connection error');
53 |
54 | };
55 |
56 | request.send();
57 |
58 | }; // Ajax
59 |
60 | // Start the application
61 | App.init = function() {
62 |
63 | // Set up and cache variables
64 | var svgUse = doc.querySelectorAll("svg > use");
65 | var fragment = App.create('');
66 | var svgUrls = [];
67 | var attrArray = [];
68 | var url;
69 | var hash;
70 | var i;
71 | var j;
72 | var obj;
73 | var loopObj;
74 | var attr;
75 |
76 | // Insert the document fragment catch the contents of the SVG
77 | doc.body.insertBefore(fragment, doc.body.childNodes[0]);
78 |
79 | // Loop through all the svg