3

So, I have this image of a floorplan

enter image description here

And I want to use Inkscape to convert the lines to SVG paths.

If I just import, Inkscape will just embed an image:

  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <image
     ... etc

There some tutorials online, such as this one, which recommend using Tracing.

However, when I follow it, no matter what option I chose, I get this:

enter image description here

where it seems to be hollowing out the walls :-(

How can I reproduce this is visually identical SVG paths? In a way that could also handle curves? (I am open to non-Inkscape solutions, but would prefer them to be gratis)

3 Answers 3

3

The shown image is blurry and noisy. A part of the defects can be caused by Imgur image service, but anti-aliasing has given 1...2 pixels wide blurry zones to the edges which cannot be fixed with adjustments. 1...2 pixels are much as percents due the low resolution.

Automatic tracing attempts are quite useless. In addition only special CAD drawing style aware tracing programs can properly trace the lines as simple strokes. The common tracers in Inkscape or Illustrator can not do it. They trace, but one must make so much edits afterwards that as well he could redraw the image.

My suggestion:

  1. Lock the image in Inkscape's Objects panel to prevent accidental moving.
  2. Prepare right width horizontal and vertical lines. Use 4 different colors to see the parts. Hold Ctrl with the Pen to get exact directions
  3. Make duplicates, move the pieces to their places and adjust the lengths.
  4. Select all and colorize to black when you are ready

enter image description here

I guess you do not like overlaps, a line should end at the edge of another line at joints because the lengths should present physical sizes.

In inkscape you cannot get a stroke easily to snap at the edge of another stroke, no matter what point snap selections (Learn them!) you use. Think if you could accept rectangles instead of single strokes. They snap easily.

If they must be lines you can insert to the joints temporary squares which help perfect snapping:

enter image description here

The squares must be converted to paths (=Path > Object to Path). Have all point snaps ON, turn off those which disturb a certain placement.

3

TBH, bitmap tracing is not a good way to recreate such images in Inkscape.

An easy and more effective method is to recreate it manually. Drop some guides over the original raster image, use snap to guides, then use the Bézier tool to redraw the lines on top, and change the strokes to the desired thickness. Then delete the raster image.

Example: original overlaid with guides (left), redrawn in red (right)

enter image description here

3
  • Thanks, that sounds impressive )+1), BUT, alas I am an Inskscape n00b. Can you tell me how I "Drop some guides over the original raster image" ? Thanks in advance. Jun 21, 2021 at 11:10
  • 1
    @MawgsaysreinstateMonica - to drop guides, you click and drag, and drop from the side/top ruler. If you're a newbie, I'd suggest you follow a few Inkscape beginner tutorials to familiarise yourself with the user interface and tools. There are lots available on youtube.
    – Billy Kerr
    Jun 21, 2021 at 11:28
  • 1
    Aha, I see. Thanks (+1), Yes, I guess that I will have to go through the tutorials Jun 21, 2021 at 11:46
3

In fact, Trace Bitmap also gives quite reasonable results if you adjust the settings a bit.

Trace Bitmap Dialog

Most importantly, set it to "Single scan", because you only have two colors in the image. Multiple scans is only for detecting several color levels, and the results are usually far worse. Adjust the "Brightness threshold" for best appearance.

5
  • 1
    I think the OP wants single paths with strokes - i.e. centre line tracing, not regular auto tracing, although it's not very clear to be honest.
    – Billy Kerr
    Jun 21, 2021 at 17:29
  • @BillyKerr Maybe. I can't really see anything indicating that in the question.
    – jpa
    Jun 22, 2021 at 4:59
  • OP here. Ideally, I want the paths to look visually identical to the image. I.e same width. Jun 22, 2021 at 6:56
  • 1
    @Mawg if you want paths to be a certain width, and which can be easily altered or curved, then I suspect you might want the design to be constructed as paths with strokes set, not just filled outlines which is what you will get if you do a regular bitmap trace. Centre-line tracing is a possibility, but it probably won't work well either for a design like this, and will likely require fixing manually. If you don't care about easy editability, then the method described here by user: jpa might be sufficient.
    – Billy Kerr
    Jun 23, 2021 at 11:49
  • Thanks for that (+1). My problem is that I will be dealing with floorplans in multiple formats. Some will be AutoCAD .DWG files, some .DXF, some SVG (yay) and some JPG. I may even get some PDF with embedded images :-( I am seeking a generic way to get them all to SVG. I suspect that I will first covert them down to a lowest common denominator file format, then to SVG with paths. Jun 23, 2021 at 13:07

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.