How to create a SVG icon using Adobe Illustrator in 3 simple steps

Adobe Illustrator is one of the most popular program available for vectors. Vectors can be turned into code name as SVG. SVG codes can be written manually, however its not to make some complicated one manually. Why using SVG icons is a win-win deal, is described by Chris in on of his article on CSS-Tricks.

Read More:How to design a basic web layout in Photoshop in just 5 minutes

I'm using Adobe Illustrator CS5 (can't afford latest ones :P). Follow the steps to get what you want:

Step 1: Create an art-board

Press Ctrl+N for Windows and Command+N for Mac to create art-board.Create an art-board with your suitable unit and size.

Step 2: Draw

I've drawn Blogger Ever logo, that is what people usually draw icons or logos. So make sure that the size should be the exact size you want, because one the code is finalized it will be difficult to change (especially when its complicated).

Step 3: Export

Once your drawing is complete now export the file.

• Click file on tab
• then click Save as template
• select SVG in dropdown menu
• click save.

Now click OK on dialog box and you will see a HTML file on the save location open it, view its source and you will have your SVG code.