Easy way to edit a floor plan using SVG by yourself

First of all, we should define what is an SVG.

What is an SVG?

SVG stands for Scalable Vector Graphics. It is an XML language and file format, which allows you to code two-dimensional graphics that scale and can be manipulated via CSS or JavaScript, which probably reveals nothing to you if you’re not into graphic/web design.

Basically, SVG is important to us, because of its flexibility and versatility that cannot ever be compared to the traditional PNG, GIF or JPG’s, that are raster-based formats and have fixed dimensions, which causes them to pixelate when they are scaled. SVG is vector-based, you can combine different shapes, paths, text elements, all kinds of visuals, and be certain that they will look clear and impeccable at any size. There isn’t any loss of fidelity when the graphics are scaled. They are simply redrawn to reconcile the larger size. This makes it perfect for multi-context scenarios. Nonetheless – SVG images will generally have smaller file sizes than JPG, PNG or GIFS. All of this makes the SVG file format easily customizable.

You can modify the image in basically any way and it won’t lose the fundamental quality.

Is it possible to edit a floor plan?

Meanwhile, one of the most recurring questions we get is if it is possible to edit a floor plan? To move the walls, change the layout, colors of rooms, and etc. And we are happy to tell you that it is possible! We are offering vector versions of the floor plans (SVG) for external graphics editing tools and we will be releasing in-platform editing tool in 2019!

So what options are there to edit an SVG file by yourself? Well, one of the most popular would be to use Adobe Illustrator, but if you don’t have the opportunity to get it, there are free options such as Inkscape, Vectr, RollApp, BoxySVG, and Janvas.

Editing floor plan using Inkscape

Now, the easy way to edit a floor plan using an SVG. A common question we get, is how I could change the label of the room, or remove it? Let’s see how we could modify the floor plan using Inkscape:

The first thing you should do is download the Inkscape program to your computer and install it. Once you have done that, launch the program, and open the floor plan as an SVG file.

To remove the labels of the rooms:

Keep clicking on the title of the room till it gets a box around it, and press delete (to undo this press ctrl + z);

To change the name of the room:

Select the icon that has the Letter A:

Then, click on the label to edit the title:

Once all of the changes have been made, go to the header and press file → save as → and choose the format you need or file → export as png.

These were just a few easy options on how to edit the floor plan using SVG.