Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Adobe Illustrator for Web Design!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Learn about responsive SVG properties and how to export Scalable Vector Graphics.
Want to learn more about Scalable Vector Graphics?
Check out these Treehouse Courses:
SVG Basics
Animating SVG with CSSCheck out these Adobe Tools
SVG Developer Tools
W3C SVG Recommendation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now we're gonna be talking
about how to export SVGs.
0:00
SVG stands for Scalable Vector Graphics.
0:04
It is a remarkable format
that is entirely XML based.
0:07
For responsive design, this is the way to
go because it allows the versatility of
0:12
a vector graphic to be translated
to a web browser and retain quality
0:17
whether being viewed on an older smart
phone or a new high definition desktop.
0:22
It does not matter,
it is resolution independent.
0:28
We are going to turn our logo into an SVG
as well as our social media icons.
0:31
First let's start with our logo.
0:38
So I'll zoom in here, and Command C,
0:40
then we'll go File, New.
0:46
You do wanna make sure that it's Web,
just so
0:53
that your color mode is RGB,
that's important.
0:55
Hit Okay.
0:58
I'm going to Command V
to past this inside.
1:00
And then we'll go to Object,
Artboards, and
1:05
Fit To Artboards and that will make your
Artboard exactly the size as your image.
1:10
Isn't that handy?
1:16
Super cool.
1:18
And to save it as an SVG,
it's not very complicated at all.
1:20
You just go File, Save As, and
under Formats, we're gonna choose SVG.
1:25
We'll call this Pencil Logo.
1:35
And I'll save it on my desktop.
1:41
Save.
1:45
This brings up our SVG Options box.
1:46
If you go down here, click More Options.
1:49
This is gonna show us more
of the advanced options.
1:53
If you do want to know more about every
element in here, it has a nice function.
1:58
So as we hover over a line item, it gives
you a description of what's happening.
2:03
What I want to show you is that
Responsive is checked off, and
2:09
that means that it's gonna
resize in the web browser.
2:13
Okay.
So you just wanna make
2:18
sure that this is checked off for sure.
2:19
And at the bottom here,
you can do some different things.
2:22
If you'd like to take a look at the code,
so
2:25
what would this logo look like
if it was written in code?
2:27
Here it is.
2:31
If you were to paste this inside your
HTML document, you could view it.
2:31
Pretty awesome.
2:41
We can also preview what it would
look like inside a web browser.
2:42
So I'm gonna click this.
2:46
Yeah, so there it is.
2:49
Oh wow look, and
you can scale up and down.
2:49
[SOUND] Its amazing, and
we'll use this same logo for
2:55
the desktop and
mobile version because it is scalable.
3:00
And I'll hit Okay, and
that's gonna save it for me.
3:05
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up