I hope that I have the correct forum here, and the correct tool in Inkscape (lots of Googling makes me think that I do).

The end product is that I want to have a web page which displays a floor plan, and to reacts when a user clicks on a given room, with a different reaction for each room.

Obviously, I need a way to determine which room was clicked.

A sneaky idea occurred to me, to have each room differ in colo(u) by just one RBG point, and determine the room by getting the RGB value of the pixel clicked. However, I am afraid that the slight colour difference will eventually be disenable to the human eye if I have a lot of rooms – think of a large shopping mall, office block or factory.

So, to do it properly, I think that I have to use an HTML canvas, and use the isPointInPath() method, where each room’s outline is defined as a path.

Until now, I have never used anything more complex than MS Paint, so I might have a steep learning curve ahead of me.

If I just draw the floorplan, I suspect that Inkscape will draw a single, contiguous , path, following all the walls, which means that I can’t use that to determine which room was clicked.

I am aware of layers, and suspect (without yet having so much as installed Inkscape, or read any documentation), that if I draw my floor plan with each room on a separate layer, then visually I will see a normal floorplan, with the room edges touching, and I could export the individual layers as HTML5 paths.

Is that a good idea? A totally stooped notion that only an utter n00b could conceive of? Am I going to have problems with too many layers? Is there a better way to achieve my ends?

1 Answer 1


Inkscape can export SVG files, which can contain links and other interactivity. This page from the manual contains a live example: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Links.html

You could draw a floorplan in Inkscape, with separate shapes (rectangles, polygons, whatever you need) representing the different rooms. One advantage of Inkscape here is that you can set the scale of the document to match your measurements (cm or inches etc), then you can draw your shapes, and even type the measurements in directly for accuracy. Then add links to each individual shape as required.

When you save the SVG, it can be included in a webpage. The link above uses the <object> HTML tag.

<object type="image/svg+xml" data="../images/WEB/web_square_link.svg">
<img src="../images/WEB/web_square_link.png" alt="Linked square example." style="-moz-transform: scale(1.0)" align="middle" width="">

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.