Access To 100's Of Premium Design Resources

Unlimited downloads
Share via:

How to export SVG code in illustrator

In this short illustrator screencast tutorial we will be sharing a technique for how you can export the SVG code for any illustration, object etc directly from illustrator and paste directly into a web design project in a matter of minutes.

There’s so many benefits of using SVG graphics such as smaller sizes the render quality is sharper and crisp on tablet and retina devices. I’m a big advocate of SVG graphics I can’t recommend them highly enough especially in digital design based projects.

Tutorial Details

  • Program: Illustrator
  • Time estimation: Under 2mins
  • Difficulty: Beginner

Preview

export

Video transcript:

Hello and welcome to Creative Nerds. Today, we have a screencast to show you how you can export an SVG image within Illustrator and grab the SVG code so it can then be incorporated straight into a Web design project. So, this works for any piece of artwork that’s been created from Illustrator that’s a scaleable vector.

So, what you wanna do, firstly, is start off by heading over to File and selecting Save As, and it wants us to choose the type to be SVG. And we’re not gonna give it a name because that’s not important, and we’re just going to select Save. And it will bring up this dialog menu called SVG Options, and the option that we’re looking for is SVG Code. And it will then open this dialog box in a Notepad file, and this basically is the path and the coordinates for our Vector shape. So, we’re just gonna simply select CTRL+A so we can copy the whole of it, and then we’re gonna open into a HTML editor. So, I’m gonna use CodePen for this example. So we’re gonna create a new Pen, and I’m simply gonna paste in that HTML. And when it renders, there you go. It’s then…that’s basically the Vector shape as an SVG that’s imported onto the page. It’s as simple as that.

I hope you’ve enjoyed this tutorial. Thanks for watching, and I hope it’s one that you can incorporate into your Web design projects. Thanks for watching, and stay tuned to Creative Nerds for quick tips on how to use Photoshop and Illustrator.

Post tags

RELATED POSTS

Please leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Creative Nerds Premium

Access to a library of hundreds of design resources Photoshop brushes, textures, vectors, patterns and PSD files.

10 Smoke brushes
15 Light painting textures
15 Light painting textures
17 Authtic paint splatter brushes
17 paint splatters brushes
10 Fire flames brushes
10 Fire flames brushes

HELP SUPPORT US - Become a premium member

Regular updates

Regular updates

New content is continually added throughout each month, so frequently visit back to see new resources added.

1 year membership

1 year membership

Your membership lasts for 12 months, which cost less than a cup of coffee a month.

Unlimited access

Unlimited access

Download as many resources as you like throughout lifetime of your membership with over 100 resources.

Only $15.99 Per Year

Join today