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

4.2 Using an External SVG

Hello and welcome back to animating with Snap.svg. Now that we've got our MAMP server up and running, we can get started embedding external SVGs into our page. So, let's jump into Finder, and I'm gonna make a copy of the site09 folder. Even though we're going to get rid of most of the code in it, I still wanna use that as a starting point. So let's rename this new folder site10, and then let's drag site10 down to our Brackets icon to open it up. So we've got our index file open. And this is the code we've been working with so far. I'm just going to get rid of all of the code inside those script tags. And we can get started. So, this is gonna work a little bit differently, because we're going to be embedding an existing SVG. And I want to embed it inside a div. So, I'm gonna create a div here. I'm gonna give it an ID of icon-house. And we're just going to leave it empty. We're not going to put anything inside that div. Now we can give that any name we want to, it doesn't matter. I'm just calling it icon-house because that makes sense. So inside our script element, we're first going to create a reference to this ID here, and create a new snap object that's tied to that. So the way we do that is, we create our variable first, and before we call the variable s, we can really call it whatever we want to. So we can even call this icon-house if we want to. Or we can just shorten it to house, if we can spell that right, there we go. And I'm gonna make the code a little bit bigger so we can see it. So we're gonna set house = Snap, and then inside parentheses we would include the id of the div we want to insert it into. Now before, we just put a couple of numbers here, and those numbers represented the width and height of the new SVG object we wanted to create. But here we're doing it differently, we're going to insert it into the icon-house div. So, inside the quotation marks we're gonna point to that id using CSS-like syntax. So what we're gonna do is we're gonna type #icon-house, and that will point us to this div right here. So now we've created the Snap object, we've stored it in this variable called house, and now we're going to load our external SVG into this div here. Now let's take a look at our folder structure. We're gonna go into Finder, and you should find a file in your Finder called, or in your project files folder, called icon-house.svg. That's the one we're gonna be using. So I'm gonna copy that SVG file, and I'm gonna paste it in our site10 folders that we have access to it from within that folder. And it didn't paste it there, it pasted it up here, so I'm just gonna drag that down to the site10 folder. And let's get rid of the copy on it so it just says, icon-house.svg. So now it's inside the site10 folder, we can go back to Brackets and we can see it appear right here. Now if we click on that SVG, we can see the xml that makes up this SVG object, and you'll notice a couple of things. First of all, we have a group here called bg for background, this is a background circle. We have another group with an id of house, which is going to be the icon itself. And then another group with an id of ring. We'll take a closer look at that later, but I just wanted to point that out. Let's jump back into our HTML file, and let's make this work. So, we've created our Snap object, but it still is not tied to that external SVG object yet. So what we need to do, we'll skip a couple lines still inside our script tags. And let's actually move these script tags down or move this div up above the script tags. There we go, I like to keep my script tags at the bottom. And then inside our script tag, after we create the Snap object, we're going to load our external SVG. So we're gonna use the Snap.load function. And then inside parentheses we need two things. The first thing we need is the path to the SVG that we're going to be embedding. And it's not in any sub folders or anything like that. So we can just point to the name of the SVG, which is icon-house.svg. That's the file name. And then we're gonna have a callback function that's going to run once this SVG has finished loading. So we'll say, comma, space, function, open and close parenthesis, and then an opening and closing curly bracket, and then a closing parenthesis and a semicolon. So that closing parenthesis is to close off the opening parenthesis here for the load function. And that should do it. So now, inside this function we can put whatever code we want to appear, whenever that SVG file has finished loading. For now, we're gonna leave it alone, we're not gonna put anything in there just yet. That's where we would put all of our file manipulation, all of our shape manipulation, and animations, and click events and things like that. But for now, I really just wanna make sure that our SVG file is loading. So, let's save our file. And just to illustrate the error you would receive if you weren't using a web server. I'm gonna stop the server, actually we don't even need to stop the server, we can just navigate to this file in Finder. We'll go to site10, and double-click on index.html. And you'll notice it uses the file path to get there. And we don't see anything on the page at all. Now we can right click and inspect element. And we can see our HTML, we can expand that out, we can expand out the body. And we can see our div with icon-house, but we see that that div is still empty. And if we go to our console, this is where we'll see the error. It says, XMLhttpRequest cannot load, icon-house.svg, Cross origin requested, et cetera, et cetera, et cetera. When you see this error, that's the error you get when you try to load an external SVG file. It's easy to fix all we need to do is, again, install MAMP. Make sure it's pointing to the right directory. Make sure it's turned on, that the servers have started. And once it has, we just use this local host to point to that directory. So remember, this local host is pointing to our project files directory. And in order to get to our file we simply need to look inside site10/index.html. So let's go there. And we still see that our page is not loaded, but just for kicks let's inspect the element. And look inside our body. Okay, so the div is still empty. Let's go to our console. And we do see that that error is gone, so we're doing something right. But obviously we need to check out our code to see what we're missing. So what we've done so far, is we've loaded this Snap object, we've loaded this SVG. But if you look at this code right here, there's nothing that points it to, or connects it to this house variable that we created up here. And that's where this function here comes in handy, this callback function. Once our SVG is done loading, we're gonna use this callback function to tie it to that house, or to append the data in this SVG to that house. So the way we do that is, inside our function parentheses here, I'm gonna type in the word data. Because by default, when we run this load function, it's passing data into whatever callback function that we create. And we need to capture that data that it's sending, in using this parameter here. So it's going to be captured in this variable called data. So now we can use that data parameter inside this function. So what I'm gonna do is, I'm gonna point to house, house. And then there's a method called append. And then inside parentheses for that append method we're going to point to that data. So we're appending that data, from our SVG to our house. To this variable that we created, to this SVG or the Snap svg object that we created up here. So now, if we save our file, jump back into our browser, and refresh. We can now see our icon. Now obviously it's a little bit bigger than we want. So we can go into our file here and in the head of our document, I'm gonna create a set of style tags. Usually I would do this in an external document, but we're just gonna keep it nice and simple here. So I'm gonna point to our icon-house object. And I'm gonna give it a width of 200 pixels and a height of 200 pixels. So we'll save that. Refresh our page. And there we go. And again it's an SVG, so you can make it as big as you want to and it's still gonna look nice and crisp. But I don't want it to take up the whole screen, I just want it to take up a little bit of room. So now that we've got our SVG in there, we can start manipulating it using Snap.svg. So thank you for watching, and we'll get started in the next lesson.

Back to the top