1 00:00:00,650 --> 00:00:03,560 Now we're gonna be talking about how to export SVGs. 2 00:00:04,660 --> 00:00:07,650 SVG stands for Scalable Vector Graphics. 3 00:00:07,650 --> 00:00:11,980 It is a remarkable format that is entirely XML based. 4 00:00:12,980 --> 00:00:17,630 For responsive design, this is the way to go because it allows the versatility of 5 00:00:17,630 --> 00:00:22,800 a vector graphic to be translated to a web browser and retain quality 6 00:00:22,800 --> 00:00:28,090 whether being viewed on an older smart phone or a new high definition desktop. 7 00:00:28,090 --> 00:00:30,600 It does not matter, it is resolution independent. 8 00:00:31,770 --> 00:00:38,510 We are going to turn our logo into an SVG as well as our social media icons. 9 00:00:38,510 --> 00:00:40,076 First let's start with our logo. 10 00:00:40,076 --> 00:00:46,138 So I'll zoom in here, and Command C, 11 00:00:46,138 --> 00:00:50,500 then we'll go File, New. 12 00:00:53,250 --> 00:00:55,680 You do wanna make sure that it's Web, just so 13 00:00:55,680 --> 00:00:58,550 that your color mode is RGB, that's important. 14 00:00:58,550 --> 00:00:59,050 Hit Okay. 15 00:01:00,470 --> 00:01:03,740 I'm going to Command V to past this inside. 16 00:01:05,340 --> 00:01:10,260 And then we'll go to Object, Artboards, and 17 00:01:10,260 --> 00:01:16,600 Fit To Artboards and that will make your Artboard exactly the size as your image. 18 00:01:16,600 --> 00:01:18,120 Isn't that handy? 19 00:01:18,120 --> 00:01:18,730 Super cool. 20 00:01:20,620 --> 00:01:25,720 And to save it as an SVG, it's not very complicated at all. 21 00:01:25,720 --> 00:01:32,960 You just go File, Save As, and under Formats, we're gonna choose SVG. 22 00:01:35,270 --> 00:01:39,880 We'll call this Pencil Logo. 23 00:01:41,100 --> 00:01:42,940 And I'll save it on my desktop. 24 00:01:45,180 --> 00:01:46,220 Save. 25 00:01:46,220 --> 00:01:49,060 This brings up our SVG Options box. 26 00:01:49,060 --> 00:01:53,560 If you go down here, click More Options. 27 00:01:53,560 --> 00:01:58,000 This is gonna show us more of the advanced options. 28 00:01:58,000 --> 00:02:03,540 If you do want to know more about every element in here, it has a nice function. 29 00:02:03,540 --> 00:02:07,420 So as we hover over a line item, it gives you a description of what's happening. 30 00:02:09,070 --> 00:02:13,670 What I want to show you is that Responsive is checked off, and 31 00:02:13,670 --> 00:02:17,230 that means that it's gonna resize in the web browser. 32 00:02:18,320 --> 00:02:19,720 Okay. So you just wanna make 33 00:02:19,720 --> 00:02:22,280 sure that this is checked off for sure. 34 00:02:22,280 --> 00:02:25,140 And at the bottom here, you can do some different things. 35 00:02:25,140 --> 00:02:27,520 If you'd like to take a look at the code, so 36 00:02:27,520 --> 00:02:29,850 what would this logo look like if it was written in code? 37 00:02:31,240 --> 00:02:31,900 Here it is. 38 00:02:31,900 --> 00:02:39,210 If you were to paste this inside your HTML document, you could view it. 39 00:02:41,560 --> 00:02:42,090 Pretty awesome. 40 00:02:42,090 --> 00:02:46,480 We can also preview what it would look like inside a web browser. 41 00:02:46,480 --> 00:02:49,215 So I'm gonna click this. 42 00:02:49,215 --> 00:02:49,838 Yeah, so there it is. 43 00:02:49,838 --> 00:02:55,105 Oh wow look, and you can scale up and down. 44 00:02:55,105 --> 00:03:00,198 [SOUND] Its amazing, and we'll use this same logo for 45 00:03:00,198 --> 00:03:05,658 the desktop and mobile version because it is scalable. 46 00:03:05,658 --> 00:03:10,520 And I'll hit Okay, and that's gonna save it for me.