---
blurb: "One thing we learned from a week of trying to make isometric vector drawings."
...

## Objective

Construct an isometric vector image of an object from top, front, and side view projections  (like [this](https://workforce.libretexts.org/Bookshelves/Drafting_and_Design_Technology/Introduction_to_Drafting_and_AutoCAD_3D_(Baumback)/02%3A_Part_2/2.01%3A_Module_7-_Visualizing_Multiview_Drawings), but using Inkscape instead of AutoCAD).

This is an explanation of one of the issues encountered and how it was dealt with.

## A Short Primer On Graphical Projection

Drawing a 3D object as it looks head-on from the top, the front, and the side views is called [multiview orthographic projection](https://en.wikipedia.org/wiki/Multiview_orthographic_projection){target=_local}. Figure 1, below, is [an example from 1912](https://commons.wikimedia.org/wiki/File:3D_projection_views.png#/media/File:3D_projection_views.png){target=_local} that illustrates the concept. Each drawing is a view of the house from a different axis in three-dimensional space. Note the various other names, by which these views are known, indicated on the labeling.

![**Figure 1**. Top view (labeled 'plan' in the drawing), front view (labeled 'front elev'), and side view (labeled 'profile or end view') projections of a simple house.](https://upload.wikimedia.org/wikipedia/commons/6/63/3D_projection_views.png){width=300px}

Another type of graphical projection, that you may have seen before, is called [isometric](https://en.wikipedia.org/wiki/Isometric_projection). Many 2D video games use isometric projection to simulate a 3D environment. One of the characteristics of isometric projection is, the angles between all three axes are equal. This results in the outline of a perfect cube forming a hexagon. Another is, it has no vanishing point, so there is no concern for things like draw-distance as there is in 3D games.

![**Figure 2**. Isometric cube showing the 3 axes all angled 120° from each other (a). Isometric cube outlined in a hexagon (b).](/images/isometric-diversion-cube.svg)

## A Naive Solution

We start with the multiview projections of the 3D object we want to turn into an isometric drawing:

![**Figure 3**. Four different views of two rectangles and two ellipses representing a simple box truck. Top view (a), front view (b), side view (c), isometric view (d).](/images/isometric-diversion-1.svg)

The task seems pretty straight-forward. First, we skew the front and side views. We want our truck to face to the right, so we need the top edge of the front view to match the angle of the blue axis from figure 2. To reach this angle, the skew must be 30°. The angle of the top of the side view must, therefore, match the red axis from figure 2. To achieve this, it has to be skewed 30° in the other direction (-30°, technically).

![**Figure 4**. Front (a) and side (b) views skewed by 30°.](/images/isometric-diversion-2.svg)

Then, we transform the top view to fit our modified front and side views.

![**Figure 5**. The top view of our box truck first skewed by 30° and then rotated clockwise 30°.](/images/isometric-diversion-3.svg)

All the angles for our box truck's skewed views look correct, but when we try to align them all together, we discover a problem. While the front and top views line up fine, when we try to align the top to the side view, we find that they do not fit together because they are different sizes.

![**Figure 6**. The skewed front view aligns with the skewed top view (a). The skewed side view does not align with the skewed top view (b), because the side view is now longer than the top view.](/images/isometric-diversion-4.svg)

## The Problem

The pieces don't fit together because when we skew a 2-dimensional rectangle we are actually stretching one of the axes. The top and bottom edges of the skewed side-face are longer than they were before the transformation.

![**Figure 7**. The side view before and after skewing, with the top and bottom edges highlighted (a). The perimeter of the side view, before and after skewing, with the top and bottom edges highlighted (b). Side-by-side comparison of before and after side view perimeters, demonstrating they are no longer the same length (c).](/images/isometric-diversion-4.2.svg)

The skewed front and top views of our box truck also become stretched on one axis but because they both stretch the same axis, the pieces still fit together.

## The Quick Fix

We can fix the box truck's elongated side view by resizing it before we skew it. We need to shrink it along the axis that is going to be stretched by the skew. But how do we know what value to scale by? Here's how to find it:

 1. ![Unskewed side view with a line the same length as the view above it.](/images/isometric-diversion-5.svg)
    Draw a line the same length as the truck side view.

 2. ![Two lines, the same length, crossing. One lies horizontal, the other rotated clockwise.](/images/isometric-diversion-6.svg)
    Duplicate the line and rotate it by 30°.

 3. ![Horizontal line and rotated line connected together at one end, forming a 'V' shape.](/images/isometric-diversion-7.svg)
    Join one end of the two lines together.

 4. ![Two lines connected at one end in a 'V' shape with the area between the unconnected endpoints highlighted.](/images/isometric-diversion-8.svg)
    Measure the horizontal distance between the other ends of the lines. This is the amount the side must be shrunk by so that it will be the correct size when stretched by skewing.

 5. ![Before and after views of the side view length shortened by the distance measured above.](/images/isometric-diversion-9.svg)
    Shrink the side view by the distance we measured.

 6. ![The shortened side view skewed by 30° to appear foreshortened.](/images/isometric-diversion-10.svg)
    Now we can skew the side as we did before.

This time when we try to line up the 3 skewed views of our isometric drawing, they should fit together.

![**Figure 8**. All 3 skewed views connected together to look like an isometric rectangle.](/images/isometric-diversion-11.svg)

However, all the distortion in our render has not been eliminated. While this solution might look good, it is not true proportionally to the top and front views. They are still distorted from the skew along the axis perpendicular to the side view.

## The Full Fix

So, if the top and front views are still distorted, we will have to size them down and then re-skew them.

Comparing the edges where the front view and the top view meet, we see that they are actually the same length. To find the distance the views need to be shrunk by, we will only need to make this calculation once.

![**Figure 9**. We lay the front view on its side to better see that the top view and front view have the same width (a). The same method is used as above to find the length to shrink by (b).](/images/isometric-diversion-12.svg)

Now we can shrink the front view and then skew it as we did before.

![**Figure 10**. Transforming the front view by shortening its width by the distance we calculated in figure 9, and then skewing it by 30°.](/images/isometric-diversion-13.svg)

Likewise, we shrink the top view's width (in this case, this is the height of the diagram), skew it, and rotate it to fit.

![**Figure 11**. Transforming the top view as we did the side view, but also rotating clockwise by 30° to align with the front and side views.](/images/isometric-diversion-14.svg)

When we put all the pieces together, we can see that this version of our isometric model is less wide than before. This is because its width is no longer being stretched out of proportion.

![**Figure 12**. The 'quick fix' box truck result (a) compared to the 'full fix' (b). The wheels from the front faces have been deleted, since they are set further back from the front of the bus and, therefore, would not be visible (really they should form the face of the wheels, where the tread would be, but in our model it would hardly be visible).](/images/isometric-diversion-final.svg)

## Practical Applications

Is this useful? Multiview projections of vehicles, buildings, etc. are easy to find online. If you want to build proportionally-accurate isometric drawings then this information will help. For example, here is an isometric taxi cab made with this technique and some found [diagrams](https://drawingdatabase.com/checker-marathon-taxi/).

![**Figure 13**. Isometric projection drawing of a taxi cab.](/images/cab-final.svg)

## Conclusion

Making isometric drawings from blueprints of real objects is more fun and enjoyable when they come out looking like the real thing. Using the technique outlined here should eliminate distortion introduced from skewing multiview projections and retain their true proportions. Hopefully, it will improve your work as it has done mine.

![**Figure 14**. Isometric box truck with the front cab shaped to resemble an actual truck cab and window ports cut out.](/images/isometric-diversion-extra.svg)
