Blogger Ever

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

Create a simple SVG icon using Illustrator in simply 3 steps. 1 Create an art board, 2. Draw, 3. Export
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.
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.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.