How to export SVG code in illustrator

April 20th, 2017
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.