How To Create SVG Images In Adobe Illustrator

of 07
How To Create SVG Images In Adobe Illustrator

SVG creation in Illustrator involves more than clicking an OK button.

The beauty of vectors is the fact they are “Device Independent”. By that I mean they are not tied to pixels on the screen and can be scaled with no loss of resolution. With the ubiquity of mobile devices and the rise of “Small is good and fast!” there has been a corresponding growth of the use of SVG files .

SVG stands for Scalable Vector Graphics and is a web format developed by the W3C that first appeared in 1998. I first encountered this format in 2000 when Adobe introduced its Macromedia Flash competitor – LiveMotion – at FlashForward.

A common question is “How do I create an SVG image?” Essentially the vectors are converted to an XML document and there are a number of applications such as Inkscape, GoogleDocs Drawings, Sketch3 and Adobe Illustrator. The reason I am using Illustrator is simply because the apps all have similar options and tools.

What are some uses for SVG? They can be used for situations such as:

  • Graphics created in a vector drawing application.
  • Icons
  • Logos
  • Animations. (Be careful with this because CSS3 and JavaScript do the motion in the web page.

With that out of the way, let’s get started.

of 07
How To Get Started With SVG Creation In Illustrator

You start by creating vectors.

Obviously, you need a drawing. In this example I am using a Parking symbol from the Webdings font in the Glyph panel. All you need to do is select the Text tool and click once on the artboard. Open the Glyphs panel – Text>Glyphs – , select the Webdings font and double click on a character. In the case of this image, I also boosted the size to 400 pts and chose a green fill color.

I then converted the symbol to vectors by selecting it and choosing Type > Create Outlines.

We are now ready to create an SVG image.

of 07
How To Create An SVG Image In Illustrator

You need to save the vecort images, not export them.

If you have never created an SVG image you would not be wrong in assuming you would select File>Export. You don’t. What you do is select File >Save As. In the format pop down you have two choices: SVG Compressed (svgz) and SVG. Be careful as to which one you choose. The Compressed version uses Gzip compression, which results in a smaller file size. That’s the good news. The bad news is not all browsers can decompress the file and you may need to configure your web server to handle this file type. This sort explains why svgz is not a common format. In this case select SVG. This will open the SVG Options dialog box.

of 07
How To Use The SVG Profiles In Illustrator

Which SVG profile to choose? There is only one.

The first choice you have to make is which SVG profile to use. They are:

  • SVG 1.0: The first version of SVG
  • SVG 1.1: Think of this as SVG 1 with sub-types. They are :
    • SVG Tiny 1.1: The first sub-type of SVG 1.1 and is optimized with the mobile web in mind. It’s a basic form of SVG that is designed for "highly restricted mobile devices". This sub-type doesn’t support gradients, transparency, clipping, masks, symbols, patterns, underline text, strike-through text, vertical text, or SVG filter effects.
    • SVG Tiny 1.1+: A slight development of SVG Tiny 1.1, adding support for gradients and transparency.
    • SVG Basic 1.1: This one allows features for the more capable of mobile devices and doesn’t support non-rectangular clipping and some SVG filter effects.
    • SVG Tiny 1.2: This version was initially intended to be the next full specification for SVG, but ended up being an improvement of the Tiny sub-type.

Unless there is a compelling reason otherwise select SVG 1.1.

of 07
How To Use The Fonts And Subsetting SVG Options in Illustrator

The subsetting font choice will have a major impact on download speed.

The fonts pop down gives you two choices: SVG and Create Outlines. Both are self-explanatory. Those of you with older versions of Illustrator may notice Adobe CEF is missing. This allowed for font hinting but, because of spotty browser support, was removed from the list.

The Subsetting choices allow you to include entire fonts in the SVG code. What this does is to allow the file to display fonts the user may not have on his or her system.. Be careful with these because they add ‘weight” to the file though you can choose which glyphs to include.

of 07
How To Use The SVG Image Options

Images can either be embedded or linked.

If there are bitmap images in the document you can choose to either embed them or link to them. Embedding adds them to the SVG file in code form and linking simply references the images. Again, embedding adds weight to the document.

You also have the choice of selecting Preserve Illustrator Editing Capabilities. What this choice means is the details of all layers, filters, effects, symbols and so on will be retained. If your file is ready to be plunked into a web page, leave this unchecked. If it is still to be tweaked in Illustrator, select it.

of 07
How To Save An SVG Image in Adobe Illustrator

Review the More Option before you click the OK button.

Having dealt with the file choices there are a couple of buttons at the bottom of the Dialog Box that you can choose to click. More Options offers a ton more choices and, if your image is destined for a Responsive Design, you need to click the Responsive check box in the Advanced Options.

Click the SVG Code button and the XML code opens. Click the Globe and the file opens in a browser.

If everything is fine, click OK and the SVG conversion is done.