/ 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.

11:14 pm, February 25, 2016 798 553 2.8 @ 200 wpmrate up KruXoR
1

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.
11:14 pm, February 25, 2016 798 553

Comments

Reports

Add Report

Report's

KruXoR

This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..

@KruXoR

Minecraft

Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links