Preparing SVG assets
Video: Preparing SVG assetsSo I wanted to talk about the setup for my images before I got into any of the coding. Now I'm going to open up this advanced folder and you'll see that there's an artwork.eps file right here. And in this project, I wanted to work with images that would scale well in retina devices. So, instead of using PNGs, I wanted to use SVG files. Now to work with those, the easiest thing to do is to bring these into a program like Adobe Illustrator and export each one of these elements individually. Now, I didn't use each one of these graphics. This is from a stock art file.
- Next steps
Viewers: in countries Watching now:
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events
Preparing SVG assets
So I wanted to talk about the setup for my images before I got into any of the coding. Now I'm going to open up this advanced folder and you'll see that there's an artwork.eps file right here. And in this project, I wanted to work with images that would scale well in retina devices. So, instead of using PNGs, I wanted to use SVG files. Now to work with those, the easiest thing to do is to bring these into a program like Adobe Illustrator and export each one of these elements individually. Now, I didn't use each one of these graphics. This is from a stock art file.
So, I wanted it to use just a few of these, and what I needed to do to export these, is grab the element that I wanted. So I'm going to grab these eyes right here, and I'm going to copy' em onto the clip board and then I'm going to make a new file. So I'll do File>New. And I'm just clicking OK here. And then I get a new document with a full page, and what I want to do is just paste this somewhere in my new document. Now, I really don't want to have all this white space around the image, so in order to delete that, what I need to do is go to the Object menu, and select Artboards, and then select Fit to Artwork Bounds.
If you have the items selected, you can also go to Fit to Selected Art. That will get rid to all the white space and leave the minimum amount of image in your document. From here, what we want to do is go to the file menu and select Save as, and in here, you want to choose the option that says SVG, make sure you don't choose SVG compressed. Now what I did here is, used a name for each element that went in a different section. What I mean by that is, I used the name eyes and then I gave it a number like zero one, zero two, and so on and so forth.
And then I want to Save this onto my desktop. You don't really need to touch any of these options right here. Just click the OK button. Now once you do that you should have a document like this. Don't worry that it looks like it's on the corner of a page. It's going to display just fine. Once you have that if you click on it and hit SpaceBar on the Mac you could preview it. Now, I've taken every want of my elements and saved them into this images folder already in that format. So you can see my name in structure here as well. I have everything named as either a position on the snowman or a part of the body.
So here's the belt. And the next one is going to be my actual snowman. And so on and so forth. So for example here's all the eyes. You can see I named them eyes one, two, three, four, five, six. It's just easier to find them later on this way if you want to replace them. And all the way down to the nose, there's four noses and there's different ones right here. So, what this is going to do is always give you the best resolution regardless of the device, so it's a good idea to save your graphics in an SVG format. It's not going to be as compatible with really old browsers, but the amount of resolution a retina displays is going to make your application look amazing.