Tiff to SVG - My Method of Converting Scanned Images


Visitors: 432

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.

Gary Higbee
http://www.greatnorthcomputing.com - A community for SysAdmins and Programmers


Article Source:

Rate this Article: 
How Effective Are Blog Images in Your Blog Posts? Do You Really Need to Use ..
Rated 4 / 5
based on 5 votes

Related Articles:

Free PDF Conversion Method, Converting PDF From Word and Activating Hyperlinks

by: Takuya Hikichi (July 07, 2008) 
(Computers and Technology/Software)

The Need for an Editor for Producing SVG Movies

by: Peter Hale (May 03, 2006) 
(Internet and Businesses Online/Web Development)

How to Recover Tiff Picture on Mac

by: Ashley Greeny (November 22, 2012) 
(Computers and Technology/Data Recovery)

Scrapbook Images - Arranging Your Images, The Initial Step to an Awesome Album

by: Casey Lee (September 20, 2006) 
(Home and Family)

Link Building Using Images Why Images Are Not Worth 1,000 Words

by: James Orr (July 25, 2008) 
(Internet and Businesses Online/Link Popularity)

Removing a Textured Pattern from a Scanned Photo - 5 Minute Digital Fix

by: Gary Wilkinson (June 24, 2005) 
(Arts and Entertainment/Photography)

Top 3 Ways to Convert Scanned PDF to Editable Word for Free

by: Sarina Lee (November 22, 2011) 
(Computers and Technology/Software)

Raster Images or Vector Images – Which one is better?

by: Atiqur Sumon (November 27, 2010) 
(Arts and Entertainment)

What Are HDR Images And Why Are They Better Then Standard Images?

by: Jason Dick (July 05, 2007) 
(Arts and Entertainment/Photography)

How Effective Are Blog Images in Your Blog Posts? Do You Really Need to Use ..

by: Jack N Jones (June 30, 2008) 
(Internet and Businesses Online/Web Design)