Home /Web Dev /Creating a SVG from a PNG the easy way in 6 steps. /

Creating a SVG from a PNG the easy way in 6 steps.

2:17 am, April 23, 2017

Original Post Date: 1:07 am, September 30, 2015

So SVG's are the "new" thing when it comes to nice smooth graphics on the web, depending on the scale and resolution of your monitor.

There not really new, but they have just started being supported by pretty much all of the browsers and can be used just like any other kind of image in an image tag.

PNG vs SVG

The great thing about svg's is that they are Scalable Vector Graphics, so they are much more scalable than your average image, one size fits all so to speak. 

Anyway the best way i have found to convert an PNG into an SVG is not using GIMP, as i usually do for all graphics but rather download the free application Inkscape which is free and available on linux, mac and windows! You can download a copy here (https://inkscape.org/en/), its around 100 meg. No need to pay a $xx per month subscription to something that rhymes with flamobie.

Once you have downloaded and installed it, here is how you convert the PNG to SVG:

How you convert PNG to SVG

  1. Open inkscape...
  2. Import your PNG image, the higher the res the better the quality of the svg usually. But also the greater the size of the SVG, just use the default import settings (you can also drag and drop the png into inkscape)


  3. Once you have imported the png you can move it around on the canvas, and if you save it directly now you will end up with a massive blank canvas and your png, so what you want to do next is:


  4. Resize the canvas to the image sizeto get rid of all the white space. You can do this from File > Document Properties > (shift + ctrl + d) if you are using windows. 


  5. Then you will get this screen with a button to "resize page to drawing or selection".


  6. Phew! ok, now that we have done that we can just save it as a SVG, and we are done with the conversion. Now you can embed your new svg file into just a normal image tag.