Isometric projection in Inkscape

Isometric projection helps us to demonstrate three-dimensional objects on a plane, creating the illusion of volume. Most often it is used in computer games and pixel-art. You can read more about it in the corresponding article on Wikipedia.

In this article, we will examine ways to create objects in isometric projection by using Inkscape. These are:

• Axonometric grid
• Transformation of the object
• Creating 3D boxes

Note: If it is your first try in Inkscape I advise you firstly to examine the Help section (Menu > Help).

These methods were picked up from various sources available online. I hope it was a good idea to collect them all together as it may be useful. So, let's begin.

Way I: Axonometric grid

Inkscape supports two types of grid: rectangular and axonometric (File> Document Properties> Grids). The use of axonometric grid allows you to create objects in isometric projection. But to make drawing even easier, you can set the grid to fit your needs, and enable snapping (View> Snap). Grid settings include changing the unit’s parameters, the major grid line and the Y axis spacing. For convenience, you can also specify your own colors for major and other grid lines.

Way II: Transformation of the object

Almost any object can be transformed into the isometric projection by setting parameters. For example you need to specify the houses number drawn in isometric. After all, the more details there are the more interesting picture will look.

After creating a text we need to go to the Object > Transform > Scale and reduce the width to 86.6% (86.603%, to be exact). Then, in the same “Transform” menu skew it vertically by 30 or — 30 degrees (depending on the desired angle).

Way III: Creating 3D boxes

With “Create 3D boxes” tool (Shift+F4), you can create a variety of three-dimensional objects in perspective. But our goal is to create an isometric projection, so we need to toggle vanishing points in all three direction from “finite” to “infinite”. And set box’s angles to the following values​​: X: 150, Y: 90, Z: 30.

Tip: To edit the fill and stroke of individual side without losing the properties of 3D box, you can use the Node tool (F2). In the picture the top side of the box is transparent.

That’s all. If you found any mistakes in the text or you have a better solution feel free to comment.

>> Download "Isometric house" source file

*This tutorial in other languages: Russian

If you translated this tutorial, please provide a link to the translation in the comments. Thank you!