As a Web Designer you will often find yourself having to design your logo for your company, or creating a logo for a friend or a customer of yours. With today's software tools, its very easy to create your own logos in your computer.. programs like adobe illustrator are great for creating professional logos. This person created a wonderful tutorial that demonstrates a simple and straight forward method to transfer a regular .png or jpg image file into a SVG.

This is how I did it:

  1. Open Adobe Illustrator and go to: File > place
  2. Select your image from your computer files
  3. click live trace or image trace
  4. click expand
  5. make your edits
  6. select the Selection Tool
  7. click on the image
  8. Select the white areas you want to make transparent
  9. Select > Same > Fill Color
  10. hit control + ' in your keyboard to view the grid
  11. Window > Pathfinder
  12. Click on the "Divide" Button
  13. Select the white areas you want to delete
  14. right click and select
  15. isolate selected group
  16. hit delete on the white area you want to delete
  17. save the image as .svg
  18. Done

NOTE: Once you have created your SVF file, you can open the .svg file with your favorite text editor and get the HTML path code for the svg, for example, this is how it might look:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g>
	<path d="M393,352c-6.798-5.374-24.984,0.57-38-3c-10.344-2.837-14.34-19.877-27-23c-9.517-2.348-34.911-0.774-42,1
		c-10.85,2.716-16.979,19.104-29,22c-12.949,3.121-30.417-2.204-37,3c-8.501,6.721-5,38.021-5,53c0,19.409-3.575,46.85,3,56
		c5.975,8.314,25.641,6,44,6c15.777,0,27.792,0,44,0c21.398,0,74.497,5.568,86-3c10.404-7.75,6-39.452,6-59
		C398,389.67,402.405,359.435,393,352z M241.5,389.01c-8.008,0-14.5-6.492-14.5-14.5c0-8.008,6.492-14.5,14.5-14.5
		s14.5,6.492,14.5,14.5C256,382.519,249.508,389.01,241.5,389.01z M270,423c-13.164-26.144,3.027-55.312,31-59
		c21.189-2.793,40.19,10.256,45,28C359.085,440.278,290.812,464.332,270,423z M374,368c-1.642-8.032,7.509-9.96,12-6
		C390.6,370.589,377.343,375.798,374,368z"/>
	<path d="M302,374c-44.708,6.729-24.58,74.397,16,59C350.746,420.575,337.53,368.653,302,374z"/>
</g>
</svg>

And the svg looks like a camera

My method above is almost the same as the video below, check it out.

https://www.youtube.com/watch?v=m24A8lsQWXQ

R0mepffwmt4