I have learned this process through trial and error as part of building a website. I was given a large number of scanned items stored as TIFF images that I needed to convert into a vector format suitable for use on the web. The othe requirement was that the file could be interacted with by the client browser and/or server. That is why I chose the SVG file format. Due to the fact that SVG files are XML based, you can modify them on the fly using Javascript.

The first step of the process is to cleanup the TIFF image. I used Adobe Photoshop to cleanup and extract the portions of the image that I required. This was done by using the magic wand tool to copy the pieces to a new layer. When all of the pieces that I needed were copied to the new layer I then deleted the original layer and only retained what I needed. At that point I saved the image as a TIFF again.

The second step is to convert the file to a Vector format. I tested a trial copy of the AlgoLab R2V Toolkit, which seemed to work very well. I would open each TIFF file, click the vectorize button, and then save the file as some type of vector format. For this step I chose to save the files as Adobe Illustrator files, since they can output SVG files.

The third step is to open the .AI file using Adobe Illustrator and make any final changes to the vector image. I cleaned up the lines, added live color, added symbols, scaled the image to fit the area I needed, and saved the .AI file again. Once I thought it was ready I then saved the file as an SVG 1.1 file. Once that is complete you now have an SVG file ready for viewing.

My final step was to open the SVG file in a text editor and make final modifications to the viewbox attributes, various groups, and remove some extra information left over from the various software programs used. I needed to do this in order for the zoom and pan methods used on the site to work correctly with all the elements. At that point I uploaded my files for use and was finished.