I am aware xcode has introduced an option to provide a vector image(.pdf) so that we don't have to give a image for each dimension such as 1x,2x,3x

This saves lots of time and its really a good feature

But how to go about making an vector image in .pdf format.

As far as I know any png image can be saved as .pdf image does it mean it has been vectorized ?

or else we have to do it in the harder way .. by installing adobe illustrator and making an vector image through that

or else it there any web app that does it for us

basically I want to do the right way so the when image is displayed in 3x devices also there is no image distortion

This is a supplement to the excellent answer by @Senseful.

How to make vector images in .pdf format

I will tell how to do this in Inkscape since it is free and open source but other programs should be similar.

In Inkscape:

1. Create a new project.
2. Go to File > Document Properties and set the custom page size to whatever your @1x size is (44x44, 100x100, etc) with the units in px.
3. Make your artwork.
4. Go to File > Save As... > Printable Document Format (*.pdf) > Save > OK. (Alternatively, you could go to Print > Print to File > Output format: PDF > Print but there are not as many options.)

Notes:

• As is mentioned in the accepted answer, you cannot resize your image because Xcode still produces the rasterized images at build time. If you need to resize your image you should make a new .pdf file with a different size.

• If you already have an .svg image that is the wrong page size, do the following:

  1. Change the page size (Inkscape > File > Document Properties)
  2. Select all objects (Ctrl+A) on the work space and resize them to fit in the new page size. (Hold down Ctrl to keep aspect size.)

• To convert an .svg file into a .pdf you can also find online utilities to do the job for you. Here is one example from this answer. This has the benefit of allowing you to set the .pdf size easily.

Further reading

• Using Vector Images in Xcode 6

Original answer