Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Adobe Illustrator for Web Design

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

SVG Graphics

3:11 with Ashley Burke

Learn about responsive SVG properties and how to export Scalable Vector Graphics.

Want to learn more about Scalable Vector Graphics?

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up