Lessons
Class Introduction
01:43 2History of File Formats
14:12 3History of Web Formats
10:36 4Options to Save Files for Web
05:00 5Save Files as JPEG
13:19 6Save Files as GIF or PNG
18:06 7Options for Scalable Vector Graphics
09:35 8Save Files for Print
11:35Lesson Info
Save Files as SVG
Samantha Angel says, "I'm not very familiar with Illustrator. My question is, if I create a graphic in Photoshop and save it as an SVG file, can I open it in Illustrator and then save it as an Illustrator file?" Well, that's a great question. We should just find out how that works, huh? Absolutely. Because the file format compatibilities are so awesome we're gonna go ahead and answer that question for you here. So here's my file that I have in Photoshop. Now the only way that I can save an SVG scalable vector graphic is if the file is vector. So if I had gone in and created this in Photoshop as a vector graphic, then I can save it as an SVG. But I can't take a raster based file, turn it into vector and go from there in Photoshop. So I have my vector-based file, and the way I'm going to do this is I'm going to go and I'm going to do the Export As, so that I can actually get the export SVG feature in Photoshop. I can't save it as or save for web as an SVG. So here's my logo, I'm gonna ...
save it, export from Photoshop as SVG. I'm gonna export it. I'm actually gonna call it Vector here so I know what I'm looking at when I do that. So there it is, there's my SVG file. So now I'm gonna go over to Illustrator, I'm gonna go under File Open, and I'm gonna go and under Illustrator, it's like, oh my gosh, that SVG file actually is selectable. So I open that file and it's like, there's my logo. And it's like, okay, I've got that and I can see in here. What's interesting here is that that SVG file is actually an image. It's like, hm, okay. So even though it was vector in Photoshop, it comes in here and I get this. So, let me try one more thing. So I'm gonna take a file right here, let me get to one of my files right here. Perfect. I'm gonna take this and I'm gonna save this as an SVG file. So I'm gonna go and I'm going to, sorry, export it. So I'm gonna export this as an SVG file. Right from here. And with that data, I choose Export. I need to go through and change where I want to do this. Line up Desktop. There we go. That's where I want it to go. SVG. Export this. And I've got my file exported right from Illustrator. Now I may not have the original file. Somebody sends me this SVG file from there, and so I'm gonna see if this SVG file works. Clearly when it comes from Photoshop as a vector based file, an SVG, I open it up and it turns out to be an image. But I'm going to try again and I'm going to see if I can open up this file right here, my Desktop. And I'm going to take this image right here. And... Gotta save that. I saved that one. Get confused here. Yeah, the art board one, thank you. Somebody's paying attention. Yeah, ah, there it is. It's always good to name your files. How soon we forget. So there's my art board right there, and I'm going to open this up. And oh my gosh, look at that. It is actually still vector. How that works is quite interesting. So, here's what's going on. A couple different things are happening here. So if you get an SVG file, try opening it up in Illustrator. Because if it was created in Illustrator, you're gonna be able to open it right up and edit it because all it's doing is it's just reassembling all those points. You have all those active points and fills, that's all it is. It's just a different format of Illustrator. So I'm gonna choose to do something a bit different here. Previously what I had done is I had taken my Illustrator file, copied it, jumped over to Photoshop, created a new file, and I pasted this in, and I had my choice of painting it as a smart object, which basically retained the vector. I don't want to paste it as pixels, it's gonna rasterize it. I'm gonna paste this as a shape layer. And I paste this as a shape layer, what this is gonna give me is this is gonna give me the actual vector shapes that came from Illustrator. Now I lose the individual fills here. So I would have to go in and I would have to select the individual paths here that I would like to retain, and I would need to put those on a separate layer. And so I could put them on a new layer here, and I want to go in and create a new layer, so I could paste it on a new layer. Don't wanna do that. I'm gonna be able to go in and create a new vector layer. New layer. I wanna do a new vector based layer. I want to rasterize that. I'm just gonna stick with this vector based layer right here for now. Show you how this works, okay. So there's my actual vector based layer. I could have created this in Photoshop very easily, but I just decided to capture that. So there's my vector based layer. I'm going to take this file and I'm going to export as... And I'm going to export this as an SVG file right from here. And there it is, I'm gonna export it. And I'm gonna call this House.svg. There it is. So I send you this file, and so I would send you this House.svg. Now I'm gonna go under the File menu and I'm gonna open that House.svg in Illustrator. Even though it was actually vector in Photoshop, I'm gonna go in and I'm gonna open this. And when I go in, I see that it is actually vector as well. Here was the trick. When I copied from Illustrator and I went into Photoshop and I pasted in Photoshop... I hit Paste, what I got is I actually had the choice between, let me copy that from Illustrator again so I have that so you can see. When I copied this here from Illustrator and went into Photoshop, and pasted it in, I had the ability to keep it as a smart object, which retains its vector editing capabilities. If I pasted it as a shape layer, it actually comes in as editable vector directly in Photoshop. So, keeping it as a smart object is great, it's still technically vector. If I were to save this as a PDF it would actually work the same way as vector. But saving it as a shape layer now, when I save this as an SVG file, I now have this universal scalable vector graphic that truly is vector. Which is great. I could then go ahead and take this SVG file, and this SVG file by the way can go into other applications as well. And so if I were to take my SVG file here, and take my House.svg, I can go into my options here. The one thing, it won't let me do it InDesign. 'Cause we have Art Illustrator file is fine. So it's interesting that I can't place this into InDesign because I already have my original Illustrator file. But if I have an SVG file and I would like to get an Illustrator file out of that, by all means go under Illustrator. Open up your SVG file. Find out where it is. Grab that SVG file, I made this earlier. And you can open it up and there is my Illustrator based file. Right there. And I can actually use this to edit as I go further. So it's interesting how we can get through all these different avenues and have the files come together and how they come together and diverge. So, SVG is cool. I could take an SVG file into Photoshop then, and rasterize it if I want to, save it as a PNG, but I could also try opening in Illustrator to see if I still have the editing capabilities and the graphics here, like this, where I still have the shapes and the fills that I could then go in, change the colors on, and mess with these colors, whatever I'd like. Change those colors. Pretty cool. This is where the fun stuff really gets to. I know people are like, oh my gosh, my brain is swimming. So, the reality of it is, how SVG works, it starts with vector. So, if you're in Photoshop, you can go and you can create vector shapes in here, save it directly as an SVG. You can then open that SVG file in Illustrator, have it be completely editable. If you start with Illustrator and you paste what Illustrator has into Photoshop, you have to make sure you paste them as a shape layer in order for that vector to retain its vector quality. If I save this from Photoshop as a PDF or Illustrator as a PDF, those both will also retain all of their vector editing capabilities, as well. So there's a lot of universality that we have now, thanks to PDFs and thanks to SVGs, being able to work with each back and forth.
Class Materials
Bonus Materials with Purchase
Bonus Materials with RSVP
Ratings and Reviews
Rebecca Chapman
I love Jason's style and approachability! I love how he explains things and starts right from the beginning. Highly recommend.
E Ahn
His makes it very easy to understand with clear, articulate, systematic approach. Great voice and effective delivery. I tried to understand this subject many times and it has never been clear until I heard this lecture.
Khadijah Abdul Nabi
Amazing amount of industry relevant and practical information! Great delivery.
Student Work
Related Classes
Fundamentals