Create SVG Images in Illustrator – [Video Tutorial]

Today we are going to go over how to create SVG images in Adobe Illustrator. SVG images are unique because they are composed of code and can be scaled without a loss of quality because they aren’t made up of pixels. SVG images are great for responsive web design especially with the rise of retina screens and mobile. In this tutorial you will learn what SVG images are, how to optimize your image, and how to best export to create SVG images.

Transcript:

Hello there, so today we are going to cover making .svg (scalable vector graphics) in illustrator. This is especially useful for creating icons or other graphic elements that will be on web, especially responsive sites.

What makes them different from other image formats is that unlike .jpgs or .pngs they stay vectors so they can be scaled while maintaining their form.

So the first thing that we are going to do is make the image that we are going to use. I have an icon here that is made up of a lot of lines and shapes. You can only make an .svg out of vectors. You can’t place an image in and make that an .svg. Now, when making an .svg this image is going to turn into code, so it’s a good idea to simplify your image in order to get cleaner code and a smaller file.

So we are going to turn these lines into shapes by selecting only the lines, not the shapes, and then object > path > outline strokes. Now that we have shapes we are going to combine them with the pathfinder tool. If it isn’t open already you can go to window > pathfinder. So with everything selected press the unite button.

Now you have a simplified image and you can make the image into the .svg. Make sure there is nothing behind it like a background or other shapes, and make sure it is on an artboard.

Click file > export > export as. Change your file name and in the drop down select .svg all at the bottom. Click Use Artboards so that you make only your image into the .svg in case you have other elements on the page. Now you can press export. Set styling to internal CSS and font to Convert to Outlines. If you don’t convert the font to outlines in my experience it can get distorted. Set Images to Preserve, Object IDs to Layer Names, Decimal leave alone, and make sure Minify and Responsive are checked. After that you are done and you have your file.

SHARE