News

Snap.svg: How to get started

Taking inspiration from the SVG animations used throughout Max Adventure site, find out to take beginner steps for using Snap.svg

Snapsvg-How-to-get-started

Snapsvg How to get started0

DOWNLOAD TUTORIAL FILES

Download the Snap.svg library

Snap.svg is basically a JavaScript library you can attach to your pages and use to handle SVG graphics like elements within the DOM. To get started developing with it, visit http://snapsvg.io/ and download the latest version. Unzip the repository and find the ‘snap.svg-min.js’ file within the ‘dist’ folder. Copy this into the root of your page and add a <script> tag attaching it to the <head> of your page:

001        <script src=”snap.svg-min.js”></    script>

Example SVG Pattern

To illustrate we’re going to first define an SVG pattern which we’ll use to fill our Snap.svg object. Here we’ve opted for a honeycomb pattern available from  http://philbit.com/svgpatterns/#honeycomb, a great resource for generating repeating SVG and CSS textures. Place your <svg> tag in your page body, setting the width and height to zero so it doesn’t appear.

001    <svg width=”0” height=”0”
xmlns=”http://www.w3.org/2000/svg”>
002    <defs>
003    <pattern id=”myPattern”
width=”56” height=”100” patternUnits=”userSpaceOnUse”>
004    <rect width=”56” height=”100” fill=”#f8d203”/>
005    <path d=”M28 66L0 50L0 16L28 0L56
16L56 50L28 66L28 100” fill=”none”     stroke=”#fff629” stroke-width=”3”/>
006    <path d=”M28 0L28 34L0 50L0 84L28
100L56 84L56 50L28 34” fill=”none”
stroke=”#ffe503” stroke-width=”3”/>
007    </pattern>
008    </defs>
009    </svg>

Starting our Snap.svg script

Start a new <script> tag before your closing </body> and begin with establishing our drawing area. By calling Snap() and passing width or height dimensions we create our ‘stage’ where we append graphics. Starting with a circle, we pass coordinates for top, left and radius to create the basic shape. You then use the myCircle.attr() method to set styles for fill, stroke and strokeWidth – similar to CSS:

001    <script>
002    var myStage = Snap(800, 800);
var myCircle = myStage.circle(350, 350, 300);
003    myCircle.attr({
004    fill: “#555555”,
005    stroke: “#ffe503”,
006    strokeWidth: 6
007    });

Fill with <svg> pattern

The above defines and draws a solid flat colour circle with a six width stroke of desired colour. In the next example we can change that flat colour fill to be our <svg> pattern defined in step two. This is achieved simply by calling Snap() again for the fill, passing the id ‘myPattern’ of the SVG pattern prefixed by a hash:

001    myCircle.attr({
002    fill: Snap(“#myPattern”),
003    stroke: “#ffe503”,
004    strokeWidth: 6
005    });

Applying simple animation

On the next line we can then append a very basic animation for making our circle shrink. This is as simple as one statement and the .animate() method which in this instance changes the reduces the radius attribute ‘r’ to 150 over a duration of 2000 milliseconds:

001    myCircle.animate({r:150}, 2000);,

Write text to the stage

Snap.svg again makes it easy to print strings of text, using much the same principle. Using the code below we can append a phrase using myStage.text() and again passing positional values before the string itself. By then using .attr() once more we can change styling, which will override any default CSS within your page.

001    var myText = myStage.text(250, 360,“Snap.svg”);
002    myText.attr({
003    fill: “#FFF”,
004    “font-size”: “64px”
005    });

Enable drag interactions

We end our example by making our circle graphic draggable. This couldn’t be simpler and with just one small line Snap.svg adds event handlers for the drag gesture. You can then access handlers for onmove, onstart and onend to add more complex interactions – with full documentation available at snapsvg.io/docs/. Finally, close your <script>, save the page and load to preview!

001    myCircle.drag();
002    </script>
×