How to Set an Aspect ratio in Excalidraw?

Online vector-based drawing programs like Excalidraw give you an infinite canvas to draw on. While it’s great for freehand doodling, it’s not ideal when it comes to drawing things in proportion to each other.

For example, you cannot give an aspect ratio to its canvas, which is kind of a bummer if you are doing any kind of wireframing or UI or UX work.

I too found it troublesome so I looked around on the internet and found many people had raised this feature request on GitHub. After learning that people wanted this, I started looking for workarounds and fortunately, I found one.

The problem:

You want to make sure that your drawings exported from Excalidraw maintain the aspect ratio. You don’t want any social media website to scale up or down your images and crop it at arbitrary places.

The solution:

1. Get a rectangular SVG box with the required aspect ratio. (More on this below)
2. Make all your drawings inside this box.
3. When you are ready to export, make the box transparent by sliding down the opacity bar to zero.
4. Select your drawings including the transparent background box (The Excalidraw will show you a border around this transparent frame, so you know that its selected.)
5. Copy or export your selection.

Here’s a video of the steps I described above:

Now comes the fun part: How to get the rectangular frame with the required aspect ratio.

There are a few ways to get these frames:

1. Pre-built aspect-ratio boxes

If you want to work with any of these popular aspect ratios, 16:9, 2:3, 1:1, 2:1, 4:3, 3:2, or 5:4, I have created boxes on Excalidraw with these aspect ratios, which you can use right away by following this link.

The link will take you to this page, where you will find prebuilt boxes in these aspect ratios.

To work with any of the boxes, you can either copy and paste it somewhere else or zoom right into the box and start working with it.

2. Use an SVG generator tool

If your needs are more nuanced that the aspect-ratios I showed you above ☝️, I’ve got you covered.

This method involves using Excalidraw’s ability to support SVG codes.

Excalidraw can automatically create SVG shapes when you paste the corresponding SVG code for it. For example, the below code, when pasted into Excalidraw will turn into a rectangle of 160px by 90px.

<svg width="160" height="90" xmlns="http://www.w3.org/2000/svg">
    <rect width="160" height="90" stroke="#5927e1" fill="#5927e144" stroke-width="1" />
</svg>

Thankfully, we can build a small project that can generate such SVG frames for virtually any aspect ratio you want.

I have given it a try (with VueJs) and come up with this:

You will have to input your desired aspect ratio in the x and y marked input fields. The black space below these inputs will show you a preview of what that aspect ratio looks like. Once you are satisfied, click the button below to select the SVG code. Hit Cmd+C or Ctrl+C (on windows) to copy the SVG code.

Also read: CSS Margins: An ULTIMATE guide

Now, go to Excalidraw and paste this by pressing Cmd+V (Ctrl+V on Windows). You should see a rectangular box of desired aspect ratio. You can now start doodling. 🍻

3. Use ‘stats for nerds’ in Excalidraw

You can also use Excalidraw’s native feature to draw boxes of required sizes and aspect-ratios.

Excalidraw is a vector based program, where you can scale objects infinitely, so displaying sizes of vector objects makes little sense. There’s no correct size of an object in SVG. They just have to be right in proportion to each other to look good.

Statistics like sizes of objects not only take valuable space on your canvas, but they also trip beginners. And if you have used Excalidraw for any length of time, you know that one of its strong pulls is its minimal aesthetics and zero learning curve.

That’s the reason Excalidraw has stashed these “extra” details deep below the stats for nerds button. You can enable these by pressing the Option + I (on Mac) or Alt + I on Windows. Alternately, you can—

1. Right-click on an empty area of the canvas
2. Click the Stats for nerds button

You will get a box showing you the width and height of any selected object.

You can now draw your objects in your desired aspect-ratio.

⭐ PS: This tip was shared to me by one of the members of the Excalidraw team in response to one of my email.

4. Use an Excalidraw library

One of the best things about Excalidraw is its excellent library support. Anyone can create any object in Excalidraw and submit it as a library for others to use.

You can browser through the following two libraries to check if they meet your needs:

1. Presentation Bundle: https://libraries.excalidraw.com/?theme=light&sort=default#gabrielamacakova-presentation-bundle
2. Common Screen Resolutions: https://libraries.excalidraw.com/?theme=light&sort=default#dpalay-common-screen-resolutions

Although, they are not exactly what you need, but they might be of help.

Final words

Wrapping up: presently, Excalidraw doesn’t have any feature to set a fixed aspect ratio of your canvas, so a workaround is to use a rectangular box of required aspect-ratio which becomes your artboard. Anything you draw, you draw within its boundaries.

Once you are done with your work, just make sure to make this artboard completely transparent, select everything within your artboard, including the transparent artboard and then export this selection. This transparent artboard makes sure your final image retains its aspect ratio.

And that’s it.

If you found this article useful, please share it with your friends.

Also read:

1. The ULTIMATE Guide to CSS Padding (with a free printable)
2. How to Make a Radar Scanner Animation in CSS (Using pseudo-elements)
3. How to Create a Chessboard Pattern in CSS