1
00:00:00.05 --> 00:00:04.02
- In this movie, I'll show you
how to save off an SVG file.

2
00:00:04.02 --> 00:00:07.07
Now SVG stands for
scalable vector graphic,

3
00:00:07.07 --> 00:00:10.04
and just like PNG, it supports full color

4
00:00:10.04 --> 00:00:12.02
and lossless compression.

5
00:00:12.02 --> 00:00:14.07
But unlike PNG, it's not
a pixel-based format,

6
00:00:14.07 --> 00:00:18.09
it's a vector format just
like the native AI format.

7
00:00:18.09 --> 00:00:21.03
Which means that you can
zoom in on the graphics

8
00:00:21.03 --> 00:00:23.04
and get sharp results.

9
00:00:23.04 --> 00:00:25.05
And so to create an SVG file,

10
00:00:25.05 --> 00:00:27.00
you go up to the File menu

11
00:00:27.00 --> 00:00:28.07
and you don't choose Save for Web,

12
00:00:28.07 --> 00:00:30.08
you just choose the Save As command,

13
00:00:30.08 --> 00:00:32.07
or you can press control-shift-S,

14
00:00:32.07 --> 00:00:34.09
or command-shift-S on the Mac.

15
00:00:34.09 --> 00:00:37.08
And now I'm going to enter
this SVG file subfolder

16
00:00:37.08 --> 00:00:39.08
inside my 15_web folder,

17
00:00:39.08 --> 00:00:42.05
and I'm going to go ahead
and paste in a new file name,

18
00:00:42.05 --> 00:00:44.06
which is Digital color guide.

19
00:00:44.06 --> 00:00:46.08
And by the way, unlike Save for Web,

20
00:00:46.08 --> 00:00:49.07
which goes ahead and replaces
all the spaces with hyphens,

21
00:00:49.07 --> 00:00:51.02
this command doesn't,

22
00:00:51.02 --> 00:00:53.08
so if you want the safest
file names possible,

23
00:00:53.08 --> 00:00:56.06
then use hyphens instead of spaces.

24
00:00:56.06 --> 00:00:59.07
And now you want to change
the file format to SVG.

25
00:00:59.07 --> 00:01:03.00
And I recommend you turn on
the Use Artboards check box,

26
00:01:03.00 --> 00:01:04.05
because that way, you won't save

27
00:01:04.05 --> 00:01:06.08
a bunch of extraneous information.

28
00:01:06.08 --> 00:01:08.04
If you don't turn on Use Artboards,

29
00:01:08.04 --> 00:01:10.07
then you'll just save the active artboard

30
00:01:10.07 --> 00:01:12.08
as the actual graphic, but all the stuff

31
00:01:12.08 --> 00:01:15.08
on the other artboards will
remain part of the graphic,

32
00:01:15.08 --> 00:01:17.09
and so you'll get a larger file.

33
00:01:17.09 --> 00:01:20.07
Now you have the option, of
course, of selecting Range

34
00:01:20.07 --> 00:01:22.08
and then just dialing
in a specific artboard,

35
00:01:22.08 --> 00:01:24.04
but I want them all, so I'll go ahead

36
00:01:24.04 --> 00:01:26.04
and turn on the All radio button,

37
00:01:26.04 --> 00:01:28.02
and I'll click on the Save button

38
00:01:28.02 --> 00:01:30.09
to bring up the SVG options dialogue box.

39
00:01:30.09 --> 00:01:34.05
Now an SVG Profile of 1.1 is just fine

40
00:01:34.05 --> 00:01:37.08
unless somebody asks you
for a different format.

41
00:01:37.08 --> 00:01:39.03
Just leave it that way.

42
00:01:39.03 --> 00:01:41.06
You also want the Type set to SVG.

43
00:01:41.06 --> 00:01:44.05
Subsetting is set to
System Fonts by default,

44
00:01:44.05 --> 00:01:47.00
meaning that the consumer of your SVG file

45
00:01:47.00 --> 00:01:49.01
will have to have these same fonts.

46
00:01:49.01 --> 00:01:51.05
You're better off with Only Glyphs Used.

47
00:01:51.05 --> 00:01:53.07
And what that's gonna do
is save the definition

48
00:01:53.07 --> 00:01:56.08
of all the characters that you
use inside of each artboard.

49
00:01:56.08 --> 00:01:59.00
Next we have image location,

50
00:01:59.00 --> 00:02:00.05
which is for placed images.

51
00:02:00.05 --> 00:02:03.02
So if I had a placed photograph
image inside this file,

52
00:02:03.02 --> 00:02:06.05
I could either link it to
get a smaller SVG file,

53
00:02:06.05 --> 00:02:08.09
or I could embed it to
make sure that I have

54
00:02:08.09 --> 00:02:12.01
just one file that contains everything,

55
00:02:12.01 --> 00:02:13.08
which is what I want.

56
00:02:13.08 --> 00:02:15.00
Next you can, if you want,

57
00:02:15.00 --> 00:02:17.06
turn on Preserve Illustrator
Editing Capabilities,

58
00:02:17.06 --> 00:02:18.06
but that's just going to make

59
00:02:18.06 --> 00:02:20.03
the file size that much larger,

60
00:02:20.03 --> 00:02:24.02
and after all, we already have
an editable .ai file here.

61
00:02:24.02 --> 00:02:26.08
So there's no point in
turning this check box on.

62
00:02:26.08 --> 00:02:30.01
After which point you can go
ahead and click the OK button,

63
00:02:30.01 --> 00:02:32.07
and because I've already
created these files in advance

64
00:02:32.07 --> 00:02:34.06
you'll get a Replace Files dialogue box

65
00:02:34.06 --> 00:02:36.00
if you're working along with me.

66
00:02:36.00 --> 00:02:38.03
And so go ahead and
click the Replace button,

67
00:02:38.03 --> 00:02:39.04
after which point you might see

68
00:02:39.04 --> 00:02:41.06
a progress bar flash on screen.

69
00:02:41.06 --> 00:02:44.00
Alright, now let's check out our SVG files

70
00:02:44.00 --> 00:02:46.02
inside of a web browser,

71
00:02:46.02 --> 00:02:48.05
specifically Firefox,
which does a great job

72
00:02:48.05 --> 00:02:50.06
of letting you zoom into these things.

73
00:02:50.06 --> 00:02:52.09
But notice, here's the
very first artboard,

74
00:02:52.09 --> 00:02:55.09
here's the second one, every
single one of them looks great.

75
00:02:55.09 --> 00:02:57.04
And here's the third one.

76
00:02:57.04 --> 00:02:59.08
And now let's see what
happens when we zoom in.

77
00:02:59.08 --> 00:03:02.04
I'll just go ahead and switch
back to the second artboard,

78
00:03:02.04 --> 00:03:03.06
just because it's my favorite,

79
00:03:03.06 --> 00:03:05.02
and then I'll press control-plus,

80
00:03:05.02 --> 00:03:07.09
or command-plus on the Mac to zoom on in,

81
00:03:07.09 --> 00:03:11.07
and you can see that everything
is looking just as great

82
00:03:11.07 --> 00:03:16.00
as if we were zooming into the
graphic inside Illustrator.

83
00:03:16.00 --> 00:03:20.01
The only exception is
this big colorful circle,

84
00:03:20.01 --> 00:03:22.01
and that's because this is the one thing

85
00:03:22.01 --> 00:03:26.00
that gets converted to an
embedded pixel-based image.

86
00:03:26.00 --> 00:03:28.00
And another great thing about these files

87
00:03:28.00 --> 00:03:29.06
is that they're very small.

88
00:03:29.06 --> 00:03:32.01
The first and third artboards right here

89
00:03:32.01 --> 00:03:34.03
are about 20k a piece.

90
00:03:34.03 --> 00:03:37.04
The second one, because it
has this embedded image file,

91
00:03:37.04 --> 00:03:39.05
is about 90k.

92
00:03:39.05 --> 00:03:41.07
And that, my friends, is how you save off

93
00:03:41.07 --> 00:03:44.07
a bunch of vector-based SVG graphics

94
00:03:44.07 --> 00:03:47.08
that you can then turn
around and post on the web.