SVG Graphics3:11 with Ashley Burke
Learn about responsive SVG properties and how to export Scalable Vector Graphics.
Now we're gonna be talking about how to export SVGs. 0:00 SVG stands for Scalable Vector Graphics. 0:04 It is a remarkable format that is entirely XML based. 0:07 For responsive design, this is the way to go because it allows the versatility of 0:12 a vector graphic to be translated to a web browser and retain quality 0:17 whether being viewed on an older smart phone or a new high definition desktop. 0:22 It does not matter, it is resolution independent. 0:28 We are going to turn our logo into an SVG as well as our social media icons. 0:31 First let's start with our logo. 0:38 So I'll zoom in here, and Command C, 0:40 then we'll go File, New. 0:46 You do wanna make sure that it's Web, just so 0:53 that your color mode is RGB, that's important. 0:55 Hit Okay. 0:58 I'm going to Command V to past this inside. 1:00 And then we'll go to Object, Artboards, and 1:05 Fit To Artboards and that will make your Artboard exactly the size as your image. 1:10 Isn't that handy? 1:16 Super cool. 1:18 And to save it as an SVG, it's not very complicated at all. 1:20 You just go File, Save As, and under Formats, we're gonna choose SVG. 1:25 We'll call this Pencil Logo. 1:35 And I'll save it on my desktop. 1:41 Save. 1:45 This brings up our SVG Options box. 1:46 If you go down here, click More Options. 1:49 This is gonna show us more of the advanced options. 1:53 If you do want to know more about every element in here, it has a nice function. 1:58 So as we hover over a line item, it gives you a description of what's happening. 2:03 What I want to show you is that Responsive is checked off, and 2:09 that means that it's gonna resize in the web browser. 2:13 Okay. So you just wanna make 2:18 sure that this is checked off for sure. 2:19 And at the bottom here, you can do some different things. 2:22 If you'd like to take a look at the code, so 2:25 what would this logo look like if it was written in code? 2:27 Here it is. 2:31 If you were to paste this inside your HTML document, you could view it. 2:31 Pretty awesome. 2:41 We can also preview what it would look like inside a web browser. 2:42 So I'm gonna click this. 2:46 Yeah, so there it is. 2:49 Oh wow look, and you can scale up and down. 2:49 [SOUND] Its amazing, and we'll use this same logo for 2:55 the desktop and mobile version because it is scalable. 3:00 And I'll hit Okay, and that's gonna save it for me. 3:05
You need to sign up for Treehouse in order to download course files.Sign up