1
00:00:00,580 --> 00:00:05,020
SVG is actually an XML markpp language and

2
00:00:05,020 --> 00:00:11,240
just like HTML, there is a whole different
set of SVG elements and attributes.

3
00:00:11,240 --> 00:00:16,540
You could create an SVG file just like an
HTML file, using a text editor.

4
00:00:16,540 --> 00:00:20,640
Let me show you the Mozilla Developer
Network documentation so

5
00:00:20,640 --> 00:00:21,700
you can see what I mean.

6
00:00:22,850 --> 00:00:26,158
Here are all of the elements for

7
00:00:26,158 --> 00:00:32,000
SVGs, and here are all of the attributes.

8
00:00:34,000 --> 00:00:38,440
And some of them are very similar to what
you'll find in HTML, but

9
00:00:38,440 --> 00:00:42,730
there are plenty of new ones that you
might not be familiar with.

10
00:00:42,730 --> 00:00:46,630
If you're felling overwhelmed, then I have
really great news for you.

11
00:00:46,630 --> 00:00:51,890
Hardly any professionals actually type out
SVG markup because it's

12
00:00:51,890 --> 00:00:55,830
tedious when there are great tools already
available.

13
00:00:55,830 --> 00:01:01,190
Instead, most people just use a program
like Adobe Illustrator to draw

14
00:01:01,190 --> 00:01:05,480
everything out and then export them to the
SVG format.

15
00:01:07,810 --> 00:01:13,120
Here I have a vector image that's been
created in Adobe Illustrator.

16
00:01:13,120 --> 00:01:17,460
Just about any vector drawing program can
save an SVG file.

17
00:01:17,460 --> 00:01:20,460
But if you do want to learn more about
Illustrator,

18
00:01:20,460 --> 00:01:25,130
be sure to check out our Illustrator
course linked in the notes.

19
00:01:25,130 --> 00:01:29,560
Also, if you want to download this example
Adobe Illustrator file or

20
00:01:29,560 --> 00:01:35,100
the SVG version of the same image, I've
included them both in the project files.

21
00:01:35,100 --> 00:01:38,870
However, I should note that we're going to
be using Workspaces later on in

22
00:01:38,870 --> 00:01:43,960
this course and the SVG will be included
from the start, so there's no need to

23
00:01:43,960 --> 00:01:47,990
download these files unless you're using a
separate text editor or

24
00:01:47,990 --> 00:01:50,420
you just want to practice in Illustrator.

25
00:01:50,420 --> 00:01:55,200
Now, let's take a look at how to export
this file from Illustrator.

26
00:01:56,590 --> 00:01:59,994
So, saving an SVG is really easy.

27
00:01:59,994 --> 00:02:04,720
Once you already have your image drawn out
in Illustrator,

28
00:02:04,720 --> 00:02:06,995
you can go to File > Save As.

29
00:02:06,995 --> 00:02:11,343
And I'm just gonna save mine to the
desktop, and

30
00:02:11,343 --> 00:02:16,132
then I just need to change the format down
here to SVG.

31
00:02:16,132 --> 00:02:17,916
[BLANK_AUDIO]

32
00:02:17,916 --> 00:02:19,689
And then I hit Save, and

33
00:02:19,689 --> 00:02:25,114
Illustrator will give me a dialogue box
with a lot of different options.

34
00:02:25,114 --> 00:02:28,917
And you may want to look through these
yourself, but

35
00:02:28,917 --> 00:02:34,460
in general, you want to use the SVG 1.1
profile, so the latest version.

36
00:02:35,630 --> 00:02:40,710
You'll obviously want the font type to be
SVG in most cases.

37
00:02:40,710 --> 00:02:45,320
However, you can convert your fonts to an
outline if you want to.

38
00:02:45,320 --> 00:02:48,830
Just keep in mind that it is going to
vastly increase the file size.

39
00:02:50,620 --> 00:02:54,990
One last thing I wanna point out is that
if you are using text, you'll probably

40
00:02:54,990 --> 00:03:02,470
want to uncheck the User TextPath element
for Text on Path because in my experience,

41
00:03:02,470 --> 00:03:08,170
this has caused a couple of problems with
text being exported to an SVG.

42
00:03:08,170 --> 00:03:11,620
Sometimes it doesn't always look the way
you'll expect it to.

43
00:03:11,620 --> 00:03:17,060
But other than that, you can generally
keep everything pretty much the same, and

44
00:03:17,060 --> 00:03:23,760
then just hit OK and your SVG file will be
ready to use on a website.

45
00:03:23,760 --> 00:03:25,830
If you wanna look at this file for
yourself,

46
00:03:25,830 --> 00:03:30,590
you can open up the workspace associated
with this video and check it out.

47
00:03:30,590 --> 00:03:35,340
Just be sure to leave everything the same
and don't modify the file.

48
00:03:35,340 --> 00:03:38,650
Otherwise, it could behave unexpectedly.

49
00:03:38,650 --> 00:03:43,590
Now that we have our SVG file, let's
figure out how to get it into our page.