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.