[
  {
    "path": "README.md",
    "content": "deSVG\n=====\n\n### What does it do?\n\ndeSVG takes the `<img />` tags you supply. It then grabs, using AJAX, the raw SVG you've set in the `src` attribute and replaces that `<img />` with the `<svg />` it downloads.\n\n### Install\n\nGrab the files from this repo, or install from [npm](https://www.npmjs.com/package/desvg)\n\n### Usage\n\n    window.addEventListener('load', function(){\n     \t// 1. selector for the <img /> tags to replace\n     \t// 2. whether to strip inline style tags from SVG paths\n    \tdeSVG('.replace-svg', true);\n    });\n\nIf you do not wish for two network requests to be made per image, instead of using the `src` attribute, you can pass in the images path via `data-src=\"path/to/file\"`. Note that this may cause layouts to jump and no image to be displayed whilst it is being fetched.\n\n### Demo\n\nCheck out this [JSFiddle](http://jsfiddle.net/benhowdle89/ujxomdgc/14/).\n\n### Source\n\nCheck out the [commented source](https://github.com/benhowdle89/deSVG/blob/gh-pages/desvg.js) which should explain it's functionality in greater detail.\n"
  },
  {
    "path": "desvg.js",
    "content": "(function() {\n    \"use strict\";\n\n    var desvg = function(selector, removeInlineCss) {\n        removeInlineCss = removeInlineCss || false;\n\n        var images,\n            imagesLength,\n            sortImages = {},\n\n            // load svg file\n            loadSvg = function (imgURL, replaceImages) {\n                // set up the AJAX request\n                var xhr = new XMLHttpRequest();\n                xhr.open('GET', imgURL, true);\n\n                xhr.onload = function() {\n                    var xml,\n                        svg,\n                        paths,\n                        replaceImagesLength;\n\n                    // get the response in XML format\n                    xml = xhr.responseXML;\n                    replaceImagesLength = replaceImages.length;\n\n                    // bail if no XML\n                    if (!xml) {\n                        return;\n                    }\n\n                    // this will be the <svg />\n                    svg = xml.documentElement;\n\n                    // get all the SVG paths\n                    paths = svg.querySelectorAll('path');\n\n                    if (removeInlineCss) {\n                        // if `removeInlineCss` is true then remove the style attributes from the SVG paths\n                        for (var i = 0; i < paths.length; i++) {\n                            paths[i].removeAttribute('style');\n                        }\n                    }\n                    svg.removeAttribute('xmlns:a');\n\n                    while(replaceImagesLength--) {\n                        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));\n                    }\n                };\n\n                xhr.send();\n            },\n\n            // replace the original <img /> with the new <svg />\n            replaceImgWithSvg = function (img, svg) {\n                var imgID = img.id,\n                    imgClasses = img.getAttribute('class');\n\n                if (imgID) {\n                    // re-assign the ID attribute from the <img />\n                    svg.id = imgID;\n                }\n\n                if (imgClasses) {\n                    // re-assign the class attribute from the <img />\n                    svg.setAttribute('class', imgClasses + ' replaced-svg');\n                }\n\n                img.parentNode.replaceChild(svg, img);\n            };\n\n\n\n        // grab all the elements from the document matching the passed in selector\n        images = document.querySelectorAll(selector);\n        imagesLength = images.length;\n\n        // sort images array by image url\n        while (imagesLength--) {\n            var _img = images[imagesLength],\n              _imgURL;\n\n            if (_img.getAttribute('data-src')) {\n              _imgURL = _img.getAttribute('data-src')\n            } else {\n              _imgURL = _img.getAttribute('src')\n            }\n\n            if (sortImages[_imgURL]) {\n                sortImages[_imgURL].push(_img);\n            } else {\n                sortImages[_imgURL] = [_img];\n            }\n        }\n\n        // loops over the matched urls\n        for (var key in sortImages) {\n            if (sortImages.hasOwnProperty(key)) {\n                loadSvg(key, sortImages[key]);\n            }\n        }\n\n    };\n\n    window.deSVG = desvg;\n})();\n\n"
  },
  {
    "path": "index.html",
    "content": "<!doctype html>\n<html lang=\"en\">\n<head>\n\t<meta charset=\"utf-8\" />\n\t<title>deSVG</title>\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0\">\n\t<script src=\"//use.typekit.net/rhe6lbl.js\"></script>\n\t<script>try{Typekit.load();}catch(e){}</script>\n\t<link href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css\" rel=\"stylesheet\">\n\t<link rel=\"stylesheet\" href=\"style.css\" />\n\t<link type=\"text/css\" rel=\"stylesheet\" media=\"only screen and (max-width: 800px)\" href=\"mob.css\" />\n</head>\n<body>\n\n<div class=\"wrap\">\n\t<h1><span>de</span>SVG</h1>\n\t<ul class=\"sell\">\n\t\t<li><i class=\"fa fa-check\"></i> Remove inline SVG bloat from your HTML document.</li>\n\t\t<li><i class=\"fa fa-check\"></i> Style SVGs with CSS.</li>\n\t\t<li><i class=\"fa fa-check\"></i> SVGs still accessible without JavaScript.</li>\n\t</ul>\n\t<div class=\"ctas\">\n\t\t<a href=\"https://raw.githubusercontent.com/benhowdle89/deSVG/gh-pages/desvg.js\" class=\"button\">Download</a>\n\t\t<a href=\"https://github.com/benhowdle89/deSVG\" class=\"button\">Docs</a>\n\t\t<a href=\"http://jsfiddle.net/benhowdle89/ujxomdgc/14/\" class=\"button\">Demo</a>\n\t\t<a href=\"https://www.npmjs.com/package/desvg\" class=\"button\">npm</a>\n\t</div>\n\t<div class=\"usage\">\n\t\t<h3>What does it do?</h3>\n\t\t<p>deSVG takes the &lt;img /&gt; tags you supply. It then grabs, using AJAX, the raw SVG you've set in the \"src\" attribute and replaces that &lt;img /&gt; with the &lt;svg /&gt; it downloads.</p>\n\t\t<h3>Include the JavaScript file on your page</h3>\n\t\t<pre><code>&lt;script src=&quot;path/to/desvg.js&quot;&gt;&lt;/script&gt;</code></pre>\n\t\t<h3>Kick off deSVG</h3>\n\t\t<pre><code>window.addEventListener('load', function(){\n \t// 1. selector for the &lt;img /&gt; tags to replace\n \t// 2. whether to strip inline style tags from SVG paths\n\tdeSVG('.replace-svg', true);\n});</code></pre>\n\t\t<h3>Notes</h3>\n\t\t<p>Using this library will cause duplicate HTTP requests (one for initial image src download and then a subsequent one for AJAX-ing the SVG data), but development is full of trade-offs, so it's your call on the pros and cons of using this library. Sometimes it's a case of choosing between micro-optimisations vs. a sane development workflow. I trust your judgement.</p>\n\t</div>\n\n\t<footer>\n\t\t<p>Made by <a href=\"http://benhowdle.im\">Ben Howdle</a></p>\n\t</footer>\n</div>\n\n</body>\n</html>\n"
  },
  {
    "path": "mob.css",
    "content": "body {\n\tborder: 5px solid #fff;\n}\n\n.wrap {\n\tpadding: 0 24px;\n}\n\n.ctas a {\n\tmargin: 0 6px;\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"desvg\",\n  \"version\": \"1.0.2\",\n  \"description\": \"deSVG\",\n  \"main\": \"desvg.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/benhowdle89/deSVG.git\"\n  },\n  \"keywords\": [],\n  \"author\": \"Ben Howdle <hello@benhowdle.im> (http://benhowdle.im/)\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/benhowdle89/deSVG/issues\"\n  },\n  \"homepage\": \"https://github.com/benhowdle89/deSVG#readme\"\n}\n"
  },
  {
    "path": "style.css",
    "content": "* {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  vertical-align: baseline;\n  box-sizing: border-box; }\n\nbody {\n\tfont-family: \"ff-tisa-sans-web-pro\",sans-serif;\n\tfont-weight:400;\n\tfont-size: 16px;\n\t-webkit-font-smoothing: antialiased;\n\tcolor: #fff;\n\tbackground: #D43E28;\n\tbackground: -webkit-linear-gradient(#D43E28, #D81E27);\n\tborder: 10px solid #fff;\n\ttext-align: center;\n\ttext-shadow: 0 1px 0 #701014;\n}\n\np {\n  line-height: 1.625; }\n\na {\n  color: inherit;\n  -webkit-transition: .2s;\n          transition: .2s; }\n\nstrong {\n  font-weight: 500; }\n\nem {\n  font-style: italic; }\n\n.wrap {\n\tmax-width: 640px;\n\tmargin: auto;\n}\n\nh1 {\n\tfont-family: \"flood-std\";\n\tfont-size: 128px;\n\ttext-align: center;\n\tmargin: 64px 0;\n\tcolor: #fff;\n\ttext-shadow: 0 6px 0 #701014;\n\ttransform: rotate(350deg);\n}\n\nh1 span {\n\tfont-size: 52px;\n\tpadding-right: 12px;\n}\n\nh3 {\n\tfont-weight: 700;\n\tmargin-bottom: 12px;\n}\n\n.sell {\n\tlist-style-type: none;\n\ttext-align: left;\n\tdisplay: inline-block;\n}\n\n.sell li {\n\tmargin-bottom: 12px;\n}\n\n.sell li i {\n\tpadding-right: 12px;\n}\n\npre {\n\tfont-family: Consolas, Monaco, 'Andale Mono', monospace;\n\tbackground: #fff;\n\tpadding: 12px;\n\tfont-size: 12px;\n\tmargin-bottom: 12px;\n\tcolor: #701014;\n\ttext-shadow: none;\n\toverflow: scroll;\n}\n\n.ctas {\n\tmargin-top: 36px;\n\tpadding: 12px 0;\n\tborder-top: 1px solid #fff;\n\tborder-bottom: 1px solid #fff;\n}\n\n.ctas a {\n\tcolor: #fff;\n\ttext-decoration: none;\n\tpadding: 12px 24px;\n\tmargin: 0 12px;\n\ttext-transform: uppercase;\n\tfont-size: 14px;\n\tfont-weight: 700;\n}\n\n.ctas a:hover {\n\ttext-decoration: underline;\n}\n\n.usage {\n\ttext-align: left;\n\tmargin-top: 48px;\n}\n\n.usage > p {\n\tmargin-bottom: 12px;\n}\n\nfooter {\n\tpadding: 64px 0 24px 0;\n}"
  }
]