I have an image from a machine that I am using (see image below). The shapes are pretty simple and I want to create an svg version of it, with black lines to show edges and color in the planes. I am trying this with Bezier curves, but this doesn't really seem to work since it seems every shape can only have one color, and I can't really couple points from one curve to another. So I am wondering what is the right approach to do this?


  • It's hard to give advice on this type of question. Can you show us your attempt at turning this into a vector? You just need to start blocking out the object and add more details later on.
    – AndrewH
    Feb 26 at 14:38
  • There's no simple answer to this question. Shapes can have more than one colour - this can be done with simple gradients. The image you have shared here is really far too small to work with. Maybe start with something simpler like a cube. You can sample colour from an image to create a gradient. Here's an example showing what can be done.
    – Billy Kerr
    Feb 26 at 17:44
  • Do you have a particular need? Because a PNG file inside an SVG file is valid.
    – Rafael
    Feb 26 at 18:11

1 Answer 1


Use a high resolution photo of the device as your basis. The image you have inserted is far too blurry. I picked one from an advertisement of webshop "Pathologist's Heaven, Kampala"

The first step is to decide which are the important details. Lock the image on the artboard to keep it in the same place. Draw with the pen lines and curves which separate differently colored sections. Here are some lines and curves:

enter image description here

You may need to connect snapping frequently ON and OFF. You must zoom frequently IN and OUT. You must pan the view frequently. You must edit the nodes and curves with the node tool. Be sure you know how to do them fast and confidently. Gradually you will learn to draw the lines and the curves right with the pen at the first attempt.

I changed the color frequently to see clearly which lines and curves are separate. No need to draw closed paths. Only be sure there's no gaps. Snap on the path and on the node is a must. As I said, snap must be turned ON and OFF frequently. Too long line ends do not harm, but gaps prevent the Shape Builder to do its job.

Select all and fill with the Shape Builder the wanted closed areas:

enter image description here

Remove the strokes and select good fill colors. Curved zones have got gradients. They can be much simpler than the real ones and they still do their job i.e. make it look curved. Wide gaps between detachable parts are separately drawn dark grey lines:

enter image description here

Sometimes blurred shapes are needed in place of gradients, because Inkscape doesn't have rich enough gradients for shading complex forms. I drew only 2 linear gradients.

There's a few important things which should be known or drawing becomes a painful job:

  • If you are going to continue with a new line from the ending of an older line and do not expect automatic joint, press ESC. Otherwise the endpoints of a just finished line expect you want a joint.
  • you can delete a node and the path changes as little as it's possible with the remaining nodes. Path > Simplify removes all unnecessary nodes. Shape Builder can make numerous unnecessary nodes which make minor later edits difficult, so this is extremely useful. I guess the Shape Builder is still under development.
  • the node tool modifies a curve if you drag the curve itself. It's very useful alternative for adjusting the node handles, when you want a certain curvature
  • generally one should keep the number of the nodes in minimum for smooth and regular look. Fortunately its easy to remove (and insert) nodes and always Inkscape does its best to keep the path the same. That's totally differently in Illustrator.

Not asked, but a professionally shot high resolution photo is more than a drawing. You can add texts and other annotations in Inkscape also on a photo. I wonder doesn't User's Manual contain good illustrations of finer details?

  • I would summarize this nice work you've done in two steps. 1. Define specific shapes 2. That can have a gradient.
    – Rafael
    Feb 26 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.