By
0
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>
