Converting Graphic Images to SVG files

Let’s say that you found just the right graphic online but it’s a PNG file, not an SVG file:

There are several ways to convert the image to an SVG file, but first you need to recognize the limitations of an SVG file.  The most significant limitation is that and SVG file is only black and white.  So all those beautiful colors will have to be converted to black or white.  In the end, the image will either be represented as an embossed or an engraved graphic.  The black part of the image will stick out of the print if embossed or sink into the print if engraved.  The white part of the image will be ignored.

The quickest and easiest way to convert the image is to use a free, online service called Convertio.  Upload the file, choose SVG as the format you want to convert “to”, press “Convert”, wait a bit, and “Download” the converted file:

The image is a little jagged but that’s what happens when you use a raster image like a PNG or JPEG file as a starting point.  You can smooth the lines a bit if you want.  More on that below.

This approach works well if all elements of the image are clearly separated from each other by a contrasting color like white.  What if it’s not as clear what should be black and what should be white:

PNG file After conversion to SVG format  by Convertio

In this case, Convertio treated the dark green color as too dark and converted it to black.  You can control how dark the color has to be to be converted to black but you first have to download a free software program called Inkscape.

Launch Inscape and then drag and drop the PNG file onto the open Inkscape window.  You’ll be asked how you want to perform the import – just accept the default options and press “OK”.  Now choose “Path” and “Trace Bitmap…”.  This opens a new window:

Press the Update button on the lower right:

Looks like what you got from Convertio…  You are going to change the change the “Threshold” value of the “Brightness cutoff” option in the upper right.  After each change, press the “Update” button again to see if you’re getting closer to what you want.

Below, I’ve changed the value to 0.270 and that removed the green center of the circle without removing too much of the black parts as well:

Press the OK button to accept this trace.  It will look like nothing has changed:

But you’re looking at two layers.  Your new image is sitting on top of your old image.  Click and drag the two layers apart:

Click your original image and delete it.  Then click your new image and ensure that it has a dashed rectangle around it:

It looks a little jagged and you can smooth the edges a bit at a time by typing Ctrl-L.  Each time you do, the edges get smoother but the arrow heads start to disappear as well.  You have to weigh loss of blockiness against loss of definition.  I’ve pressed Ctrl-L twice and stopped there:

Last, that rectangle that has been part of the image from the start is the “Page”.  You need to fit the page to your image or only the part of your image that sits inside the rectangle will be saved when you save your image.  Choose “Edit” and “Resize page to selection:

PowerPoint is a great SVG file editor!

You may stumble across a very annoying limitation of OpenSCAD.  You may have a beautiful SVG image but it gets messed up when you add it to your design:

simplified “clock” image after being imported into OpenSCAD

The circle has completely filled in and the tips of the hands poke out.  The circle is a smoothly and completely closed shape.  OpenSCAD isn’t smart enough to understand that it has an open center and just fills the entire thing in.

You can solve the problem by creating the clock from two “half-circles” that are squeezed together.  PowerPoint doesn’t do “half” circles but it can create “quarter” circles.  And, of course it can do lines.  Finally, PowerPoint can save your drawing as an SVG file.  Below, I’ve recreated the clock in PowerPoint from “unclosed” shapes and saved the drawing as an SVG file before importing it into OpenSCAD:

Similarly, you can use PowerPoint to take an existing SVG file apart so that you can preserve most if it and just replace the part of the image that isn’t working properly.

Drag and Drop the SVG file on a PowerPoint slide:

Then select the image and choose “Ungroup”.  You never “grouped” it in the first place, but that’s just a way for you to tell PowerPoint to tear it apart into components based on what PowerPoint thinks of as “Microsoft Office drawing objects”:

Click “Yes” and you’ll now see two separate elements;

How many elements you get will depend on how much decomposition PowerPoint is able to do.

Delete the bowl and water line, and the waterline and you have an excellent orca!

Click on the orca and save the image as an SVG file.  Now you can make it part of your OpenSCAD design: