-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
49 lines (46 loc) · 2.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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 <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.</p>
<h3>Include the JavaScript file on your page</h3>
<pre><code><script src="path/to/desvg.js"></script></code></pre>
<h3>Kick off deSVG</h3>
<pre><code>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);
});</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>