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

SVG Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating an SVG

3:44 with Nick Pettit

It's possible to create an SVG in a text editor, but the overwhelming majority of web professionals use a vector-based drawing program (like Adobe Illustrator, for example) to create SVG files.

Resources

Browser Compatibility

Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.

SVG and Illustrator Files

Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.

Free Vector Drawing Tools

If you're looking for an alternative to Adobe Illustrator, here is a free vector drawing tool that works in a web browser. You can go to File > Save Image to save your drawing as an SVG.

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

    SVG is actually an XML markpp language and 0:00
    just like HTML, there is a whole different set of SVG elements and attributes. 0:05
    You could create an SVG file just like an HTML file, using a text editor. 0:11
    Let me show you the Mozilla Developer Network documentation so 0:16
    you can see what I mean. 0:20
    Here are all of the elements for 0:22
    SVGs, and here are all of the attributes. 0:26
    And some of them are very similar to what you'll find in HTML, but 0:34
    there are plenty of new ones that you might not be familiar with. 0:38
    If you're felling overwhelmed, then I have really great news for you. 0:42
    Hardly any professionals actually type out SVG markup because it's 0:46
    tedious when there are great tools already available. 0:51
    Instead, most people just use a program like Adobe Illustrator to draw 0:55
    everything out and then export them to the SVG format. 1:01
    Here I have a vector image that's been created in Adobe Illustrator. 1:07
    Just about any vector drawing program can save an SVG file. 1:13
    But if you do want to learn more about Illustrator, 1:17
    be sure to check out our Illustrator course linked in the notes. 1:20
    Also, if you want to download this example Adobe Illustrator file or 1:25
    the SVG version of the same image, I've included them both in the project files. 1:29
    However, I should note that we're going to be using Workspaces later on in 1:35
    this course and the SVG will be included from the start, so there's no need to 1:38
    download these files unless you're using a separate text editor or 1:43
    you just want to practice in Illustrator. 1:47
    Now, let's take a look at how to export this file from Illustrator. 1:50
    So, saving an SVG is really easy. 1:56
    Once you already have your image drawn out in Illustrator, 1:59
    you can go to File > Save As. 2:04
    And I'm just gonna save mine to the desktop, and 2:06
    then I just need to change the format down here to SVG. 2:11
    [BLANK_AUDIO] 2:16
    And then I hit Save, and 2:17
    Illustrator will give me a dialogue box with a lot of different options. 2:19
    And you may want to look through these yourself, but 2:25
    in general, you want to use the SVG 1.1 profile, so the latest version. 2:28
    You'll obviously want the font type to be SVG in most cases. 2:35
    However, you can convert your fonts to an outline if you want to. 2:40
    Just keep in mind that it is going to vastly increase the file size. 2:45
    One last thing I wanna point out is that if you are using text, you'll probably 2:50
    want to uncheck the User TextPath element for Text on Path because in my experience, 2:54
    this has caused a couple of problems with text being exported to an SVG. 3:02
    Sometimes it doesn't always look the way you'll expect it to. 3:08
    But other than that, you can generally keep everything pretty much the same, and 3:11
    then just hit OK and your SVG file will be ready to use on a website. 3:17
    If you wanna look at this file for yourself, 3:23
    you can open up the workspace associated with this video and check it out. 3:25
    Just be sure to leave everything the same and don't modify the file. 3:30
    Otherwise, it could behave unexpectedly. 3:35
    Now that we have our SVG file, let's figure out how to get it into our page. 3:38

    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