How to convert Adobe Illustrator symbols / shapes to other formats tutorial

How to convert / export Illustrator symbols and shapes to other formats such as PNG and PDF tutorial

 

conversion

Basics for conversions

This is a tutorial showing how to convert Illustrator symbols to PNG (raster) PDF (vector format) etc. AI documents, unlike PSD, are not well supported and access to the library features of the AI documents are limited only to Illustrator (I have never see another application that can read or access the library swatches / symbols etc). Take the preset from the palette and add to the artboard and then object menu and expand. Examples of symbols on the site include heart symbols and halftone dot symbols and grid symbols

 

PNG

pngThe PNG format can be saved using the export command as well as via the save for the web and select the PNG option. You can also use the expand selection command (file menu) and just export the selected items. With the save for web command, you can clip to the current artboard (though in many cases I always add a background to define the size of the rectangle which matches the artboard anyway as I do not like white backgrounds with the my paths on web pages which is a personal preference, of course). You can set to interlaced (I generally do) as well as set the number of colors and in most cases I use about 16 or 32 as often 8 always looks a little coarse on web pages unless there really are only 8 or less colors. There are many other settings available.

 

PDF

You can save to PDF via the file save as command and set the compatibility such as PDF 1.5 as well as preserve the editing, embed page thumbnails, compression etc. Generally with the presets, there are no images involved so many of the settings can be ignored and also no fonts. If you create a number of artboards for the presets and have a preset on each of the artboards then you can save a multi-page PDF which may or may not prove very useful in any other application. Generally, I save each artboard to a multiple PDFs as that means the PDFs can be read easily in many more apps.

 

Illustrator symbols to SVG

save SVGThis is perhaps a more useful format especially as the format is useful for web pages and also support / import support has been increasing. You can export them as SVG via the save command but personally, I prefer to expand them and then clean up the shape / paths / points (my favourite tool for this is the powerful Astute Graphics plugin called Smart Erase Brush and you can find a trial version of the plugin set on their site) and then save them. You can also cleanup the generated SVG such as removing many of the endless <group> items that are often generated (this does not happen all the time and really seems to depend on how many paths have been added and removed beforehand which leaves empty groups), many of them being just duplicated of empty groups etc as well as removing comments and other byte filling code. The SVG files can be edited in a normal editor but you can also edit them in tools such as Dreamweaver which is also useful as you can then see a preview of any edits or mistakes in seconds and can then revert back to a clean copy. Personally, I would avoid the compressed version though it probably does save some space - you can do much the same by quickly editing the file yourself. Also, I have found that I have had more problems with the SVGZ format than the SVG so I stick with the uncompressed even if it can save a few additional K.

 

Export command

With the latest release of CC, you can export them in the SVG format. The entire document along with the presets on the artboard are exported via the export command (file menu). There is also an export selection command which will just export the selected items. The export produces a far cleaner and perhaps less editable exportSVG file but if you really want to cut down the file size then the export command is very good. It does have a tendency to produce too many tspans if you have text though as well as add an unnecessary comment as well as a title tag and some additional info but that can also be quickly cleaned in Brackets or another text editor.

 

Tutorials

Other tutorials for Illustrator include live line segment tool tutorial and the touch type tool and fonts in Illustrator tutorial and how to export SVG files from Illustrator