Repository: benhowdle89/deSVG
Branch: gh-pages
Commit: 732a3a22cbec
Files: 6
Total size: 8.8 KB

Directory structure:
gitextract_zkvoy4fk/

├── README.md
├── desvg.js
├── index.html
├── mob.css
├── package.json
└── style.css

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
deSVG
=====

### What does it do?

deSVG 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.

### Install

Grab the files from this repo, or install from [npm](https://www.npmjs.com/package/desvg)

### Usage

    window.addEventListener('load', function(){
     	// 1. selector for the <img /> tags to replace
     	// 2. whether to strip inline style tags from SVG paths
    	deSVG('.replace-svg', true);
    });

If 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.

### Demo

Check out this [JSFiddle](http://jsfiddle.net/benhowdle89/ujxomdgc/14/).

### Source

Check out the [commented source](https://github.com/benhowdle89/deSVG/blob/gh-pages/desvg.js) which should explain it's functionality in greater detail.


================================================
FILE: desvg.js
================================================
(function() {
    "use strict";

    var desvg = function(selector, removeInlineCss) {
        removeInlineCss = removeInlineCss || false;

        var images,
            imagesLength,
            sortImages = {},

            // load svg file
            loadSvg = function (imgURL, replaceImages) {
                // set up the AJAX request
                var xhr = new XMLHttpRequest();
                xhr.open('GET', imgURL, true);

                xhr.onload = function() {
                    var xml,
                        svg,
                        paths,
                        replaceImagesLength;

                    // get the response in XML format
                    xml = xhr.responseXML;
                    replaceImagesLength = replaceImages.length;

                    // bail if no XML
                    if (!xml) {
                        return;
                    }

                    // this will be the <svg />
                    svg = xml.documentElement;

                    // get all the SVG paths
                    paths = svg.querySelectorAll('path');

                    if (removeInlineCss) {
                        // if `removeInlineCss` is true then remove the style attributes from the SVG paths
                        for (var i = 0; i < paths.length; i++) {
                            paths[i].removeAttribute('style');
                        }
                    }
                    svg.removeAttribute('xmlns:a');

                    while(replaceImagesLength--) {
                        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
                    }
                };

                xhr.send();
            },

            // replace the original <img /> with the new <svg />
            replaceImgWithSvg = function (img, svg) {
                var imgID = img.id,
                    imgClasses = img.getAttribute('class');

                if (imgID) {
                    // re-assign the ID attribute from the <img />
                    svg.id = imgID;
                }

                if (imgClasses) {
                    // re-assign the class attribute from the <img />
                    svg.setAttribute('class', imgClasses + ' replaced-svg');
                }

                img.parentNode.replaceChild(svg, img);
            };



        // grab all the elements from the document matching the passed in selector
        images = document.querySelectorAll(selector);
        imagesLength = images.length;

        // sort images array by image url
        while (imagesLength--) {
            var _img = images[imagesLength],
              _imgURL;

            if (_img.getAttribute('data-src')) {
              _imgURL = _img.getAttribute('data-src')
            } else {
              _imgURL = _img.getAttribute('src')
            }

            if (sortImages[_imgURL]) {
                sortImages[_imgURL].push(_img);
            } else {
                sortImages[_imgURL] = [_img];
            }
        }

        // loops over the matched urls
        for (var key in sortImages) {
            if (sortImages.hasOwnProperty(key)) {
                loadSvg(key, sortImages[key]);
            }
        }

    };

    window.deSVG = desvg;
})();



================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>deSVG</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<script src="//use.typekit.net/rhe6lbl.js"></script>
	<script>try{Typekit.load();}catch(e){}</script>
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" href="style.css" />
	<link type="text/css" rel="stylesheet" media="only screen and (max-width: 800px)" href="mob.css" />
</head>
<body>

<div class="wrap">
	<h1><span>de</span>SVG</h1>
	<ul class="sell">
		<li><i class="fa fa-check"></i> Remove inline SVG bloat from your HTML document.</li>
		<li><i class="fa fa-check"></i> Style SVGs with CSS.</li>
		<li><i class="fa fa-check"></i> SVGs still accessible without JavaScript.</li>
	</ul>
	<div class="ctas">
		<a href="https://raw.githubusercontent.com/benhowdle89/deSVG/gh-pages/desvg.js" class="button">Download</a>
		<a href="https://github.com/benhowdle89/deSVG" class="button">Docs</a>
		<a href="http://jsfiddle.net/benhowdle89/ujxomdgc/14/" class="button">Demo</a>
		<a href="https://www.npmjs.com/package/desvg" class="button">npm</a>
	</div>
	<div class="usage">
		<h3>What does it do?</h3>
		<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>
		<h3>Include the JavaScript file on your page</h3>
		<pre><code>&lt;script src=&quot;path/to/desvg.js&quot;&gt;&lt;/script&gt;</code></pre>
		<h3>Kick off deSVG</h3>
		<pre><code>window.addEventListener('load', function(){
 	// 1. selector for the &lt;img /&gt; tags to replace
 	// 2. whether to strip inline style tags from SVG paths
	deSVG('.replace-svg', true);
});</code></pre>
		<h3>Notes</h3>
		<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>
	</div>

	<footer>
		<p>Made by <a href="http://benhowdle.im">Ben Howdle</a></p>
	</footer>
</div>

</body>
</html>


================================================
FILE: mob.css
================================================
body {
	border: 5px solid #fff;
}

.wrap {
	padding: 0 24px;
}

.ctas a {
	margin: 0 6px;
}

================================================
FILE: package.json
================================================
{
  "name": "desvg",
  "version": "1.0.2",
  "description": "deSVG",
  "main": "desvg.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/benhowdle89/deSVG.git"
  },
  "keywords": [],
  "author": "Ben Howdle <hello@benhowdle.im> (http://benhowdle.im/)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/benhowdle89/deSVG/issues"
  },
  "homepage": "https://github.com/benhowdle89/deSVG#readme"
}


================================================
FILE: style.css
================================================
* {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box; }

body {
	font-family: "ff-tisa-sans-web-pro",sans-serif;
	font-weight:400;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	background: #D43E28;
	background: -webkit-linear-gradient(#D43E28, #D81E27);
	border: 10px solid #fff;
	text-align: center;
	text-shadow: 0 1px 0 #701014;
}

p {
  line-height: 1.625; }

a {
  color: inherit;
  -webkit-transition: .2s;
          transition: .2s; }

strong {
  font-weight: 500; }

em {
  font-style: italic; }

.wrap {
	max-width: 640px;
	margin: auto;
}

h1 {
	font-family: "flood-std";
	font-size: 128px;
	text-align: center;
	margin: 64px 0;
	color: #fff;
	text-shadow: 0 6px 0 #701014;
	transform: rotate(350deg);
}

h1 span {
	font-size: 52px;
	padding-right: 12px;
}

h3 {
	font-weight: 700;
	margin-bottom: 12px;
}

.sell {
	list-style-type: none;
	text-align: left;
	display: inline-block;
}

.sell li {
	margin-bottom: 12px;
}

.sell li i {
	padding-right: 12px;
}

pre {
	font-family: Consolas, Monaco, 'Andale Mono', monospace;
	background: #fff;
	padding: 12px;
	font-size: 12px;
	margin-bottom: 12px;
	color: #701014;
	text-shadow: none;
	overflow: scroll;
}

.ctas {
	margin-top: 36px;
	padding: 12px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.ctas a {
	color: #fff;
	text-decoration: none;
	padding: 12px 24px;
	margin: 0 12px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
}

.ctas a:hover {
	text-decoration: underline;
}

.usage {
	text-align: left;
	margin-top: 48px;
}

.usage > p {
	margin-bottom: 12px;
}

footer {
	padding: 64px 0 24px 0;
}