Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Downloading Snap.svg

Hello, and welcome back to animating with Snap.svg. I've heard it said before that Snap.svg is like the jQuery of working with .svgs. And I think that's a very accurate description, because the Snap.svg library makes it very easy to work with SVGs and to modify them and animate them. But before we can get too far with it, we need to first download the files and get them working. So in this lesson, I want to very quickly show you the Snap.svg website,and then walk you through downloading and testing the files to make sure they work. So you can get to the Snap.svg website, it's snapsvg.io. The snap.svg website has a few animations on the homepage that were created using the Snap.svg framework. If we reload the page, we can see this animation over here on the right. We scroll down a little bit we can see this alligator, crocodile, whatever it is animating. And there's a few more animations throughout the site. There's also some great documentation on the site that walks you through everything you can do with snap SVG. And there's also a few demos, if you click on the demos link you can see some really amazing things that are being done with this framework. And if we go back to the getting started link, you can see a few very, very simplistic examples of what we can do in our code to make this framework work for us. Now if all you do is type in the code that you see here, you might find yourself disappointed, because it's not going to work right out of the box. We have to do a few things to get it to work. But we'll see that in just a moment when we initially download and test our files. So I'm gonna click on the download link. And that will download everything to my Downloads folder. So I'll show that in Finder and I just want to drag this file into My project files folder. So the project files folder comes with this course and it will contain all the files we're going to be working with in the course. So I'm going to grab this zip file we just downloaded and double-click on it to extract it. Or if you're using a PC, you can right-click on it and click extract all. And what we're looking for is the dist folder that has our SVG files in it. So going to grab that dist folder. And you'll notice in the project files folder there's a site01 folder with a simple index.html file there. I'm gonna grab that dist folder. And I'm going to drag it into site 01. And then I'm going to get rid of this Snap folder. And that Snap folder is good to look at if you want to take a look at a couple of examples. There are some demos in that folder. But I'm just gonna skip past that. I'm gonna delete that folder. I'm gonna jump into site 01, and I'm going to rename the dist folder. I'll give it a name that makes more sense, such as Snap. You can also give it a name like scripts if you want to keep all of your JavaScript files in one folder. I'm just gonna call it snap for now. And then I'm a grab the site01 folder, drag it down to my brackets icon which is my text editor of choice for a certain projects. And one of the things I like about brackets, is that you can open up the whole folder all at once, and over here on the left you can see your files for that folder. So we have this index.html file which is a very basic HTML document with a head and body section already mapped out for us. And now I want to add if we expand out the snap folder I want to add this as V.G. min file to our page. The min file is the minified version if you want a legible version that you can actually read through. You would look at this snap as for E.G. the J.S. file that was a lot easier to read, it's got a lot comments in it that help you understand what's going on. So that's a good file to look through if you want to read through and understand everything that's going on in the framework. But for production, when we put this site live we wanna use the minified version because it takes up a lot less space. So we're gonna go to our index.html file. And in the head of our document underneath our title tag, I'm gonna create a script tag and set its source equal to snap/snap.svg-min.js. And then we'll create or closing script tag. So now that we've added that script to our HTML file, I just want to test it really quickly to see if it's working. And what I'm about to do is going to be nice and quick, it's a good test, but I'm not going to spend a whole lot of time on it. So the first thing I mean to do is go into our body and I'm going to create an SVG element with an ID Of SVG. And we'll just pur our opening and closing tags there and leave that SVG element empty. And then after the SVG element, I'm going to create an opening and closing script tag. Now if we jump back to the snap SVG website and go to the Getting Started link. We can see an example of how we would get started, now this particular line of code isn't going to display anything for us. But it will create our initial objects. So, I'm gonna copy that, go back into our code and paste it. And you'll notice that it's pointing to #svg, it uses CSS-like selectors To point to different objects in the DOM. And that's the reason I gave this SVG an ID of SVG so that we could point to that ID with this statement. So you just need to make sure that this right here matches whatever you put for the ID. So we've created that but, that's still not gonna show is anything, so let's move on and create a simple shape here. And if we go back to the website and click on item 2 here, you can see we have code for creating a circle. So I'm going to grab that second line of code. I'm going to copy it. And then I'll paste it on our page. Now this is where you're going to see that what we see initially on the Snap.svg website Getting Started link, is not necessarily going to work. So if I were to save this, and I'm gonna save it with a new name so we don't save or the original file file, we'll just save as index01.html. And I want to open that up in our browser so I'm going to jump into finder. I'm going to find index01 and double click on it to open it up in our browser. Now depending on where you put your script tag you may or may not see anything. We do see half a circle here so we know that it's working, but as I mentioned, it's not necessarily working perfectly. Now this is enough to let us know that the snap as Fiji framework is in place. But as you can see it's not giving us the results we desire. However that's something we can go into later. We know that it's working now. Now if you were to, let me go ahead and point this out. If you were to put your script tag. Go ahead and cut that. And put it in the head of our document. If we paste that there. Save our file and then refresher page, you'll notice that circle disappears. So if you prefer to keep your scripts in the head of your document then you have to do it a little bit differently. Instead of just putting this script here we also need to surround that script with a window.onload event. So set windowed up on load equal to a function. And then inside that function will put this code so let's grab that code, Cut it. Put it inside the function. And then let's test our file again, save our file, refresh our page and now we can see that half circle showing up again. And again we'll talk more later on about how to get things to show up the way we expect it to, but for now we know that our Snap SVG library is working for us. So let's go ahead and move on to the next lesson. Where we'll start talking more in-depth and jumping into a Snap.svg library. Thank you for watching, and I'll see you then.

Back to the top