https://snapsvg.io/about/

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6        <title>Snap.svg - Why Snap</title>
7        <link rel="shortcut icon" href="/assets/favicon.ico?v=1" />
8        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
9        

9<script src="//use.edgefonts.net/source-sans-pro:n2,i2,n3,i3,n4,i4,n6,i6,n7,i7,n9,i9:all.js"></script>

9
10        <link rel="stylesheet" href="/assets/style/master.css?v=201504131628">
11        

11<script src="/assets/js/snap.svg-min.js"></script>

11
12        

12<script type="text/javascript">
13    var _gaq = _gaq || [];
14    _gaq.push(['_setAccount', 'UA-44948757-1']);
15    _gaq.push(['_trackPageview']);
16
17    (function() {
18    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
19    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
20    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
21    })();
22
23    function trackOutboundLink(link, category, action) {
24        try {
25        _gaq.push(['_trackEvent', category , action]);
26        } catch(err){}
27
28        setTimeout(function() {
29        document.location.href = link.href;
30        }, 100);
31    }
32</script>

32
33    </head>
34    <body>
35
36<header id="header">
37    <div class="wrap">
38        <a href="/" class="logo">
39            <img src="/assets/images/logo.svg" alt=""/>
40            <span class="header">Snap.svg</span>
41        </a>
42        <nav>
43
44            <a href="/" class="">Home</a>
45
46            <a href="/about/" class=" selected">Why Snap</a>
47
48            <a href="/start/" class="mobile-hide ">Getting Started</a>
49
50            <a href="/docs/" class="mobile-hide ">Docs</a>
51
52            <a href="/support/" class="">Support</a>
53
54            <a href="/demos/" class="mobile-hide ">Demos</a>
55
56            <a class="bt" href="https://github.com/adobe-webplatform/Snap.svg/archive/v0.5.1.zip" onclick="trackOutboundLink(this, 'Download', '0.5.1');return false;">Download</a>
57        </nav>
58    </div>
59</header>
60
61        <article>
62            <section class="primary">
63    <div class="wrap saw short">
64        <h4>Why Snap</h4>
65    </div>
66</section>
67
68<section>
69    <div class="wrap reverse">
70        <p>Snap.svg is a brand new JavaScript library for working with <abbr title="Scalable Vector Graphics">SVG</abbr>. Snap provides web developers with a clean, streamlined, intuitive, and powerful <abbr title="Application Programming Interface">API</abbr> for animating and manipulating both existing SVG content, and SVG content generated with Snap.</p>
71
72        <p>Currently, the most popular library for working with SVG is <a href="//raphaeljs.com/">Raphaël</a>. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (<a href="//dmitry.baranovskiy.com/">Dmitry Baranovskiy</a>), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.</p>
73
74        <p>Another unique feature of Snap is its ability to work with existing SVG. That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think “jQuery or Zepto for SVG”). That means you create SVG content in tools like Illustrator, Inkscape, or Sketch then animate or otherwise manipulate it using Snap. You can even work with strings of SVG (for example, SVG files loaded via <acronym title="Asynchronous JavaScript and XML">Ajax</acronym>) without having to actually render it first which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.<p>
75
76        <p>Finally, Snap supports animation. By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging.</p>
77
78        <p>Snap is 100% free and 100% open-source (released under an <a href="https://github.com/adobe-webplatform/Snap.svg/blob/master/LICENSE">Apache 2 license</a>).</p>
79        <img class="insert large" src="/assets/images/crocodile.svg" alt="" />
80    </div>
81</section>
82        </article>
83
84        <footer>
85            <div class="wrap">
86                <nav>
87                    <a class="twitter-logo" href="https://twitter.com/Snapsvg"></a>
88                    <a class="github-logo" onclick="trackOutboundLink(this, 'GitHub', '0.5.1');return false;" href="https://github.com/adobe-webplatform/Snap.svg"></a>
89                    <a class="google-groups-logo" href="https://groups.google.com/forum/#!forum/snapsvg"></a>
90                    <a class="slack-logo" href="https://snapsvg.slack.com"></a>
91                    <a class="adobe-logo" href="http://adobe.com/"></a>
92                </nav>
93            </div>
94        </footer>
95        <img src="/assets/images/crocodile.jpg" alt="" style="display:none" />
96
97    </body>
98</html>