October 08, 2019 · How To Vecta

Introducing SVG Flattening for Laser and Vinyl Cutting

SVG editing for vinyl cutters and laser engravers just got much easier with Vecta's new feature - SVG Flattening. This feature is made possible with Vecta's user - John Robinson's feedback and input, thanks John!

What is flattening?

Flattening is an operation that removes shapes or part of shapes that is hidden under another. Consider the following semi transparent shapes:

What is flattening in SVG, illustrated
What is flattening in SVG, illustrated

For flattening operations, the yellow circle is fragmented, and the part of the shape that lies under the blue triangle is removed.

Why would you use flattening for?

Many hobbyists rely on SVG graphics to feed their laser engravers or vinyl cutting software to produce amazing products (like the Go board coasters shown below).

Go board coasters image, credits to John
Go board coasters image, credits to John

However the amount of work that goes into the drawing is huge and time consuming.

Consider a single Go piece on a grid as below:

Flattening problems explained
Flattening problems explained

It is easy to draw 2 grid lines and place a round Go piece on top, but the grid that runs under the Go piece will get engraved as well, which is NOT what you wanted.

The solution

Although users can use our advanced shape operations to do all these manually, with the flattening operation, all the work is fully automated, resulting in huge productivity.

How flattening works

Flattening removes shapes and paths underneath filled shapes (irrespective of their filled color and opacity).

Flatten only removes when shapes are filled
Flatten only removes when shapes are filled

Flattening will not remove shapes if the shape on top is not filled.

Added benefits

Vecta is designed to provide accuracy, with real world measurement units in inches, m, cm, and mm, which is particularly useful for accurate sizing.

In addition, Vecta also lets you create plugins using simple Javascript, where sky's the limit to what you can automate.

Do let us know if you have any comments on how we help you create SVG better, easier, faster.

Thanks for reading.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

October 25, 2018 · How To Vecta

How to create a customized vector background for your website within 1 minute

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don’t want to be paying for stock vector graphics? You can now create a vector background like below for yourself in less than 1 minute! ...

August 30, 2018 · How To Vecta

5 Great Reasons you should be using Google Fonts to Design SVG Images

Great typography adds to a great design. But oftentimes, getting a decent custom fonts showing up properly on screens comes at a price, either with extra effort or compromising in quality or even both. We experimented to find out the best way t...

August 23, 2018 · How To Vecta

Supercharge Vecta’s functionality with JavaScript based plugins

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform. Plugins can drastically change the way you work, saves time and enhances productivi...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.