1

This is a follow-up to my previous question Converting a floorplan image to SVG paths (in Inkscape, or alternative).

I start with a JPEG of a floorplan:

enter image description here

I want "close off" the rooms, and make each of them individually clickable (and also to make the background transparent):

enter image description here

I follow the guide How To Create SVG Paths Easily Using The GIMP.

However, my problem is that I don't want the user to see those (red) lines that I added to close off the rooms, while still having each room as clickable SVG path, so that my app can react to user clicks in each room.

E.g I will change

<path fill="orange" stroke="orange" stroke-width="1"
      d="M 506.00,167.00
       C 506.00,167.00 470.00,168.00 470.00,168.00
[ ... snip]
         507.00,182.00 506.00,167.00 506.00,167.00 Z" />

to

<path (click)="onRoomClick(5)"    <==== click handler
      fill="orange" stroke="orange" stroke-width="1"
      d="M 506.00,167.00
       C 506.00,167.00 470.00,168.00 470.00,168.00
[ ... snip]
         507.00,182.00 506.00,167.00 506.00,167.00 Z" />

I had though to use Inkscape to open the SVG paths file created by the GIMP, then import the original JEPG, and manually edit the resultant merged SVG so that the JPEG is visible and the paths are invisible but clickable.

However, when I do that the images do not align :-(

How can I achieve my objectives?

  • Starting with a JPEG floorplan
  • manually close off rooms
  • and generate an SVG
  • where the user sees the original image
  • and does not see an image with the closed-off room paths
  • but they are clickable and represent exactly the original image

Any solution, any combination of tools, but as simple as possible, as some floor-plans may become complex.

1 Answer 1

3

Don't use GIMP because it only has very basic vector capabilities. GIMP is a raster image editor. It's not the right kind of software.

The whole thing can be made in Inkscape. You can import your jpeg as a guide to redraw it. Delete the jpeg afterwards.

Enable the page grid and snapping to grid to make the following steps easier. I assume basic familiarity with how to use Inkscape. If you don't know how to use it there are tutorials on youtube. This isn't a tutorial, just the basic steps.

  1. With the pen tool draw the outer walls with a thick stroke

  2. Draw the inner walls with thinner strokes

  3. Add filled rectangles (no stroke) to cover over each room

  4. Apply onclick interactivity to each rectangle in the Object Properties panel.

  5. Set all the rectangle fill alpha opacities to 0%.

See Example

Here's the SVG code for the above example

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="175mm" height="125mm" version="1.1" viewBox="0 0 175 125" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(70.8 -14.7)">
  <g fill="none" stroke="#000">
   <path d="m-68.8 66.5v-49.8h171v121h-64" stop-color="#000000" stroke-width="4.05"/>
   <path d="m-68.8 87.8v49.8h85.3" stop-color="#000000" stroke-width="4.05"/>
   <g stroke-width="1.9">
    <path d="m-68.8 52.3h21.3"/>
    <path d="m-26.1 52.3h14.2v-35.6"/>
    <path d="m-11.9 52.3h14.2v14.2"/>
    <path d="m2.32 87.8v21.3h-28.4"/>
    <path d="m-47.5 109h-21.3"/>
    <path d="m2.32 109v28.4"/>
    <path d="m2.32 52.3h14.2"/>
    <path d="m37.9 52.3h14.2v-35.6"/>
    <path d="m52.1 52.3v14.2"/>
    <path d="m102 87.8h-14.2"/>
    <path d="m66.3 87.8h-14.2v49.8"/>
   </g>
  </g>
  <g fill-opacity="0">
   <rect x="-68.8" y="16.7" width="56.9" height="35.6" onclick="alert('You have clicked room 1')"/>
   <rect x="-11.9" y="16.7" width="64" height="35.6" onclick="alert('You have clicked room 2')"/>
   <rect x="52.1" y="16.7" width="49.8" height="71.1" onclick="alert('You have clicked room 3')"/>
   <rect x="-68.8" y="52.3" width="71.1" height="56.9" onclick="alert('You have clicked room 4')"/>
   <rect x="2.32" y="52.3" width="49.8" height="85.3" onclick="alert('You have clicked the hallway')"/>
   <rect x="52.1" y="87.8" width="49.8" height="49.8" onclick="alert('You have clicked room 6')"/>
   <rect x="-68.8" y="109" width="71.1" height="28.4" onclick="alert('You have clicked room 5')"/>
  </g>
 </g>
</svg>
14
  • 1
    @MawgsaysreinstateMonica The shape of the room doesn't matter. You can create a filled path instead of a rectangle. Redrawing everything by hand is more efficient and the best quality, and it will only take a few minutes with practice. It's not complicated. Complex work like the example you showed isn't made with Inkscape. That's likely CAD software. GIMP can export vectors, but it's too basic. You can't add fills or strokes or do anything useful with them like boolean operations.
    – Billy Kerr
    Aug 28, 2021 at 8:06
  • 1
    @MawgsaysreinstateMonica - SVGs can contain raster images too. So, if you really don't want to redraw anything, you could technically remove the white background of the jpeg in GIMP, export as transparent PNG. Import it into Inkscape, draw the filled rectangles/shapes, and add the interactivity. However a raster image won't scale well or look as good as a vector image. Might also be possible to autorace the jpeg in Inkscape, but autorace is not a way to make good quality graphics compared to hand drawn.
    – Billy Kerr
    Aug 28, 2021 at 8:15
  • 1
    @MawgsaysreinstateMonica Sites like Fivvr are viewed as exploitative by the graphic design community. Also, you will get what you pay for.
    – Billy Kerr
    Aug 28, 2021 at 9:11
  • 1
    Yep, Fivvr isn't good. I'm not frustrated by noobs, but if you ask graphic designers, then you should expect graphic designer answers and opinions. Anyway, to find out how much it would cost a graphic designer to do it for you, the best way is to ask one for an estimate first. Everyone has different rates, and it often depends where the designer is located. Complex floorplans aren't created by graphic designers. Technical drawing and CAD is a different field. Try an architect.
    – Billy Kerr
    Aug 28, 2021 at 9:21
  • 1
    @MawgsaysreinstateMonica - maybe best to ask a different question if you want to know something else. That's usually the way things work here. You can reference this question in your new question.
    – Billy Kerr
    Aug 28, 2021 at 9:31

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.