Pin Me

Transforming a JPG File to SVG

written by: Laura Jean Karr•edited by: Rebecca Scudder•updated: 3/2/2012

Learn how to take those JPG files and convert them to SVG files for better web development. Use both free online desktop publishing tools and free software that allows for the conversion.

  • slide 1 of 4

    Working in desktop publishing to the web can be a challenge whether your are working at home, as a small business or an employee for a larger graphic design company. Beyond client design issues the main challenge comes from working with several types of graphics and text files.

    Two types of files that are often worked with and often in need of file conversion are that of JPG and SVG files. Here, we will first look at an explanation of what these two different file types are and then cover how to convert JPG to SVG files for desktop publishing web development purposes.

  • slide 2 of 4

    What is a JPG/JPEG File?

    A JPG or JPEG file stands for Joint Photographic Experts Group file, which is named for the group who developed the file type standard. JPGexample These file types are excellent representations of what is called lossy compression, which means that the file loses some data as it is compressed. The reason that JPG/JPEG's lose any data at all through compression is to enable the overall image file to be conveyed in a faster way.

    For example, if there is an image file which has an original size of over 100 KB then it would make a web site, e-mail or even a printed item with that file size a slow process in getting the information of the image out. When you take that large image file and compress it to a smaller file size such as 4 or 4 KB then the result of viewing that image file will become much faster and the web site, e-mail or printed item would complete its job faster as well.

    These files are ideal for compressing a graphic image without text. The JPG files can compress both gray scale and full color images and are best when used for compressing natural photographs and images that are consider real world images such as landscapes and various nature scenes, people and animal life. The compression of the data in the image normally goes unnoticed by the human but by enlarging the view one can easily detect the lose of image data. The above image to the left shows an example of a JPG file in its natural state on the left but zoomed in on the right to notice the lossy compression. Click on the image to get a better view of the the example.

  • slide 3 of 4

    What is an SVG File?

    SVGexample2 A SVG file stands for Scalable Vector Graphics and has been under a continuous state of development since 1999 by the World Wide Web Consortium (W3C). They are 2 dimensional image files created from XML text files. Extensible Markup Language (XML) is a set of coding rules for using documents both statically and dynamically making them easier to work with in web development. This means that these files can be scripted, indexed and even searched online. SVG files also allow for the following types of graphics: Raster, Vector and Text imaging.

    Using SVG files for desktop publishing and more print based work means that you can take graphic images such as logo design and scale their size for use with business cards, brochures and advertising flyers without compromising the original image. For example, the image above and to the left is of a SVG file graphic. On the left hand side is the original image, while on the right hand side is the image zoomed in. Click on the image to get a better view of the example.

  • slide 4 of 4

    Converting JPG to SVG Files

    There are various methods available to convert JPG files over to SVG files. Here we are two free web based tools and graphic editing software that is capable of converting these files. It is important to note that when converting JPG files over to SVG files it will make the files larger and therefore they will take up more space. The bonus to converting these files is that once converted, the SVG file can be directly embedded into an XML file without the need for an external link being created.

    PictureResize is an online image file converter created by Lonking Software. In order to use this file conversion tool, visit the PictureResize Image Converter and upload an image from your machine's hard drive. Once the JPG file is selected then choose the SVG file conversion in the drop down scroll box; click on the Convert button and the file will automatically converted from a JPG to an SVG file. The converted file will then be shown in your web browser.

    The Go2Convert is another free web based image only file conversion application. This web based tool first came online in August of 2008 with the goal of providing people a free and online way to convert thousands of image file types. To get started using this application, just visit the Go2Convert site and upload the JPG file you want to convert. Next, select SVG in the drop down menu box and then click on the Convert button. The converted file will then be sent to your e-mail inbox.

    There are also free software applications that can help with file conversion when working with vector (SVG) image files. Inkscape, which is one of the best free software applications for vector editing allows for a JPG/JPEG file to be imported by turning it into a Bitmap file and then vectorizing the image. When converting in Inkscape in this way some colors will be lost from the original JPG/JPEG image file. For more information on free vector software and how to start using vector editing applications, see Top 5 Free Vector Graphic Software Applications.

    *images used for explanation in this article are royalty free and were manipulated by the author using both Go2Convert and Picnik online.