- In this movie, I'll show you how to save off an SVG file.
Now SVG stands for scalable vector graphic,
and just like PNG, it supports full color
and lossless compression.
But unlike PNG, it's not a pixel-based format,
it's a vector format just like the native AI format.
Which means that you can zoom in on the graphics
and get sharp results.
And so to create an SVG file,
you go up to the File menu
and you don't choose Save for Web,
you just choose the Save As command,
or you can press control-shift-S,
or command-shift-S on the Mac.
And now I'm going to enter this SVG file subfolder
inside my 15_web folder,
and I'm going to go ahead and paste in a new file name,
which is Digital color guide.
And by the way, unlike Save for Web,
which goes ahead and replaces all the spaces with hyphens,
this command doesn't,
so if you want the safest file names possible,
then use hyphens instead of spaces.
And now you want to change the file format to SVG.
And I recommend you turn on the Use Artboards check box,
because that way, you won't save
a bunch of extraneous information.
If you don't turn on Use Artboards,
then you'll just save the active artboard
as the actual graphic, but all the stuff
on the other artboards will remain part of the graphic,
and so you'll get a larger file.
Now you have the option, of course, of selecting Range
and then just dialing in a specific artboard,
but I want them all, so I'll go ahead
and turn on the All radio button,
and I'll click on the Save button
to bring up the SVG options dialogue box.
Now an SVG Profile of 1.1 is just fine
unless somebody asks you for a different format.
Just leave it that way.
You also want the Type set to SVG.
Subsetting is set to System Fonts by default,
meaning that the consumer of your SVG file
will have to have these same fonts.
You're better off with Only Glyphs Used.
And what that's gonna do is save the definition
of all the characters that you use inside of each artboard.
Next we have image location,
which is for placed images.
So if I had a placed photograph image inside this file,
I could either link it to get a smaller SVG file,
or I could embed it to make sure that I have
just one file that contains everything,
which is what I want.
Next you can, if you want,
turn on Preserve Illustrator Editing Capabilities,
but that's just going to make
the file size that much larger,
and after all, we already have an editable .ai file here.
So there's no point in turning this check box on.
After which point you can go ahead and click the OK button,
and because I've already created these files in advance
you'll get a Replace Files dialogue box
if you're working along with me.
And so go ahead and click the Replace button,
after which point you might see
a progress bar flash on screen.
Alright, now let's check out our SVG files
inside of a web browser,
specifically Firefox, which does a great job
of letting you zoom into these things.
But notice, here's the very first artboard,
here's the second one, every single one of them looks great.
And here's the third one.
And now let's see what happens when we zoom in.
I'll just go ahead and switch back to the second artboard,
just because it's my favorite,
and then I'll press control-plus,
or command-plus on the Mac to zoom on in,
and you can see that everything is looking just as great
as if we were zooming into the graphic inside Illustrator.
The only exception is this big colorful circle,
and that's because this is the one thing
that gets converted to an embedded pixel-based image.
And another great thing about these files
is that they're very small.
The first and third artboards right here
are about 20k a piece.
The second one, because it has this embedded image file,
is about 90k.
And that, my friends, is how you save off
a bunch of vector-based SVG graphics
that you can then turn around and post on the web.