Expfloorer

🏡 The interactive digital map of Kanthaus, made in SVG with Inkscape.

Access

• to the map
• to the code

Features

The different floors are collapsible. Toggles for beds, toilets, food, measurements, doors and windows. More to be added in the future. More info in the repository.

Extract and use SVG tutorial

The example case of making a sleeping spot reservation sheet.

Take svg from expfloorer

Developer console in firefox: in this example we extract the shape of the sleep kitchen.

Every browser has a so-called ‘developer console’ that let’s you get more information from websites. Let’s use this feature to get a room shape. Go to expfloorer in your browser and press F12 to open the developer console. Now choose the inspector and inspect the element you want to extract.

All complex SVG objects have a so-called ‘d’ value, which contains all the information about the shape. When you click that value in the developer console you can copy it.

Insert svg into new file

d value in inkscape xml editor: the d value in the XML editor is clickable.

Inkscape is the default SVG manipulation program for Linux, so we use it. To have a place to paste our d value we need to make a complex object and then change it. So we just make two overlapping circles or rectangles, select them and go for path->union. Now the two simple objects merged into one complex object. Now we open the XML editor, select the d value of our object and exchange the contents to what we copied from expfloorer.

It might look like you just have an empty sheet after copying in the new d, but when you zoom out enough you will find your new object. It just doesn’t appear in your previous viewport necessarily.

Creating something

Finished reservation sheet. Pretty isn’t it? 😉

Now you can take the shape and do whatever you want with it. E.g. creating a sleeping spot reservation sheet like this one:

But since this isn’t an Inkscape tutorial we won’t get into how to do that now.