Options for Scalable Vector Graphics
Lesson 7 from: File Formats Explained: Everything You Need to KnowJason Hoppe
Options for Scalable Vector Graphics
Lesson 7 from: File Formats Explained: Everything You Need to KnowJason Hoppe
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
Options for Scalable Vector Graphics
I'm gonna jump over to Illustrator and I'm gonna grab my vector logo in illustrator. I'm gonna copy this, I'm gonna jump over to Photoshop here and I'm gonna put it right into this file. I'm gonna paste this in and how do I wanna paste this? Well, if I paste it as pixels, it's gonna rasterize the whole thing and I cannot get a scalable vector graphic out of pixels because pixels are raster, vector is vector. So I'm gonna paste this as a smart object and it's gonna retain its vector qualities here in Photoshop for me to actually work with them. The one trick. It's gonna totally mess with you though, turn on the white background here. You'll look at this and you zoom in and you're like, no that's not vector. You know, that's all raster. One word of advice folks. This is the point where Photoshop lies to you. Okay, Photoshop can only display pixels. Even when you're using vector. So, even when you do vector in Photoshop, it still displays as raster based preview. Always. This is a vector ...
based file. It's pasted as a smart object, so I have full editing capabilities of this in Illustrator. But I'd like to now save this as a scalable vector graphic. Because it truly is vector. Vector, smart object, look at that. It even says it in Photoshop. I didn't type that in. It actually says it. So Photoshop knows, but it's displaying in raster. I know people, like okay, you lost me on that one. So here it is. I can't go in and if I choose Save As and I look for my SVG right here, I can't find SVG, even though I know I have a vector graphic right there. So, what I'm gonna do is I'm gonna go and use the new export feature, which is called Export As. So this is what's kind of replacing the Save for Web here. It's a different interface and different options on it. So when I choose the Export As, I come up and if I have a vector based file, Photoshop already knows that if I have a vector based file, it automatically defaults to a scalable vector format. It's like, wow, that's brilliant. But you see, I can save this as a PNG or a JPG or a GIF file too, if I want to render this ina certain way. So I can save this as a PNG and I can have transparency if this were transparent. Same issues that we had when we choose Save for Web. I can save it as a JPG too. I can go in and I can adjust the quality right here and I can see how that looks with the quality and there it is. I kind of get my little preview over here. But I don't get a really good sense of seeing what's going on with this. That's why I kind of like the Save for Web. So, what I have here, is I do have the ability to very quickly and easily export my assets from multiple different devices. This is what the Export As is really made for. It's made for all of your file formats that you're going to use to display on desktop computers, to display on mobile devices, to display on tablets. And this is where you can come in and work with us. So, if I wanted to save this as a PNG or as a GIF file right here, you notice it's like, okay, so where's all my options to go ahead and choose the number of colors and stuff like that and it's like, well I don't really have that in the Export As. But what I do have is I do have the ability to go in here and export these as different sizes. So if I'm now working on something that is going to be for a tablet device or whatever, I can now export this at different sizes. A quarter of the size, half the size, twice the size and so on, which can be really quite handy. But in this case, I wanna export this as a scalable vector graphic. And I'm gonna export this as an SVG at the same size and here goes. So, here's my size. I can change the size if I want to. Really doesn't matter because it's scalable. So, SVG is the only place I'm gonna be able to export this if I have vector and I want to export it, this is the only avenue that I have. So I'm going to choose Export and I'm going to save this to my desktop and I'm gonna click Export. Now, I'm gonna jump over to my web browser here and I'm going to open this and I'm going to open my SVG file. It comes up there and it's actually displaying as vector in my web browser. It's beautiful. It's not as a PNG, it's not as a JPG, it's not as a GIF file. It's actually a scalable vector graphic. And there's one cool thing about a scalable vector graphic that you can't do with any of these other files and the cool thing is this. You can go in and you can actually go and you can view the source file here and, I don't know how to view the source here in Safari, probably should have checked that. I know somebody who's like, oh you go under the. So view, let's see. There's gotta be a source file here. Okay, anyway, once we find the source file, one of the things that you can do is you can actually view the source file and you can edit directly in the html the fill colors of your scalable vector graphic. So if I wanted to use this scalable vector graphic in three different colors, I don't have to create three different files and export each one as a color. I can take this file, I can go into the html, I can edit the html, change the HEX color in there because this is all vector and I can change this gold to a yellow or to a red without ever having to go back to the original file and do that. So this is truly editable in html. From a fill standpoint and, of course it's scalable, so I can then render it any size and still have vector. Which is great. So now I don't have to worry about, okay the PNG, a little fringing on the edges are pixel based, not at all. It becomes a scalable vector graphic which is truly scalable and it's a vector. Edit it directly in html if you want to or I could always go back. So if I want to use this with white type, I open up the source file, I go into the HEX color, change the black to white and I'll save it again and now I have the logo. Didn't need Illustrator, didn't need Photoshop. All right there as a scalable vector graphic. Which is amazing because this kinds of warps people's minds again and they're just like, how does this happen? Well, it's pretty awesome. We can do this both in Photoshop and we can do it in Illustrator as well. But, if you have vector in Photoshop, which you can definitely do, having a scalable vector graphic, you can have it. It's awesome. Works really good. Questions. Yes, just a couple of clarifications for you. First from Elizabeth. So again, is SVG supporting transparency? Absolutely. And then from Kelly Girl. So is an SVG smaller than a PNG 24? It is because when you're dealing with any pixel based file, the more pixels that you have and the more divergent colors you have, the larger the file size is going to be. With a scalable vector graphic, you literally have just points. All it is is just points. So there's no real information in there. It's just a series of points to connect the paths and fill the color. So it's an extremely small file. Awesome, and so from Laurie and Davie just again, can you convert a photo into a vector and export it as an SVG? You could take the photo, bring it into Illustrator, use the Image Trace, convert it into paths, with fills and then save it as an SVG file. You could. I mean you're gonna notice, I mean it's gonna be very much a mottled image because all the different areas will then be rendered as an actual shape. But yeah, you certainly could. It makes for a huge html file because every single point on the X Y is registered in the html. So, you know I always kid because I don't do coding. I tell people the only coding I do is chocolate coding. That's it. But if you look at just a normal graphic placed in html, you just have one line with the image reference and it's right there and it finds the file and does it. With this logo I could have 60 lines of code because every single point on every letter has to have an X Y coordinate in there in order for it to be able to render. So, it definitely makes the code much longer and much more tedious, but you also have a little bit more flexibility. Relative flexibility. So if you get an SVG file, you can always go in there and edit the html or the SVG file without having the native file, per se. So, makes it kind of cool and worthwhile.
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.