TennojiM - Using geometric constraints in the vector design.

INTRO

For the past few years, I have been actively engaged in CAD modeling. Both parametric and algorithmic. I am so used to usage of constraints that even the thought that in the vector editor I will have to deal with guides, grids and edges binding only, causes me complete frustration. When I started to analyze whether there are programs or tools for doing vector graphics with using of constraints, I was disappointed, because there are no programs that can do this out of the box. But at the same time, I saw that I am not alone in this question.

PREPARATION

But solution exists. It is still a combination of two programs: "Blender" and "Inkscape". Both of these programs are open source, flexible and have a large community of enthusiasts, which makes it possible to adjust and modify them for different needs and tasks. So I can say that workflow is pretty convenient.

Inkscape - an essential program to work with SVG (Scalable Vector Graphics) format. After installation it not requires any additional actions to achieve our goal.

Blender - a software package for 3D graphics which contains a lot of additional functionality out of the box and in the same time plenty of external community made add-ons.
Out of the box it can't do things we need. But we going to achieve desired functionality from external add-ons:

CAD Sketcher - a massive add-on for "Blender" that adds CAD modeling capabilities. It includes building sketches with usage of constraints and convert sketch content to Bezier curves.

Bezier Utilities - an add-on for "Blender" that adds ability to work with Bezier curves. It includes possibility to export Bezier curves as SVG objects.

You can read how to install these add-ons on related pages so better to open links I add and follow actual guides.

I am going to show you general workflow on the example of building a simple icon. Video and description complete each other. Please open the video and read steps below to figure out what I am doing.

VIDEO

BLENDER WORKFLOW PART

I saw how designers using golden ratio technique in logo creation and want to use it in my demo. For this purpose I sketched the "golden ratio spiral" in a separate sketch beforehand and will refer to it to determine the ratio of the shape objects of my icon. In my opinion, this is a good additional example of why using constraints in vector graphics is very handy.

So first of all I am going to open ".blend" file with "golden ratio spiral" sketch in it. I am opening it without loading of built-in UI settings to use my workspace instead of built-in in file.

After this I am saving project as separate "poppy.blend" file. I will keep doing quick save after each step.

3D Viewport > Toolbar > CAD Sketcher tools used for building entities of the sketch.
3D Viewport > Sidebar > Sketcher tab used to manage sketch, manage entities of the sketch, creating and managing constraint in the sketch.

Any SVG file consists of shape objects. Each of these shape objects has a fill and stroke. By logic of "CAD Sketcher" each individual sketch can be outputted as a separate Bezier curve and during export by "Bezier Utilities" each of the Bezier curves will be converted in-to the shape objects. Therefore, it is better to logically break the design into simple forms and build each of them in a separate sketches.

My icon will consist of 4 elements: "pistil", "petal_smaller", "petal_bigger", "stem".

Building constraints between entities of different sketches is totally possible in case if involved sketches are built on the same plane.

So now I am going to create separate sketches for each of the elements. All of them will be on the same plane with "golden ratio spiral" sketch and as the result on the same plane with each other.

Now I am going to edit each of the created sketches, build entities there and bind them with constraints.

Be aware! Sometimes before do constraint you need to plan beforehand and move entities closer to each other or locate them from the proper side to make correct alignment. This is especially true for arcs or circles.

If you change type of the entity to "Construction" it means this entity will continue to correspond with other entities and can have constraints with them but will not be visible at the final output.

3.1

"pistil"
Built circle.
Built two lines.
Constraint both lines vectors to the circle center point as "Coincident".
Constraint both lines end points to the circle edge as "Coincident".
Constraint line vectors between each other as "Perpendicular".
Constraint one of the line vectors as "Horizontal".
Change type of line vectors to "Construction".
Constraint circle edge to the first by size arc of the "golden_ratio_spiral" as "Equal".

3.2

"petal_smaller"
Build circle.
Constraint circle center point to the horizontal construction line vector of the "pistil" sketch as "Coincident".
Constraint circle edge to the horizontal construction line right end point of the "pistil" sketch as "Coincident".
Constraint circle to the second by size arc of the "golden_ratio_spiral" as "Equal".

3.3

"petal_bigger"
Build circle.
Constraint circle center point to the vertical construction line vector of the "pistil" sketch as "Coincident".
Constraint circle edge to the vertical construction line bottom end point of the "pistil" sketch as "Coincident".
Constraint circle to the third by size arc of the "golden_ratio_spiral" as "Equal".

3.4

"stem"
Build two arcs.
Constraint ending point of the first arc to starting point of the second arc as "Coincident".
Constraint curve of the first arc and curve of the second arc as "Tangent".
Constraint curve of the first arc and curve of the second arc as "Equal".
Constraint starting point of the first arc to the horizontal construction line right end point of the "pistil" sketch as "Coincident".
Constraint center point of the first arc to the horizontal construction line vector of the "pistil" sketch as "Coincident".
Constraint merged end point of two arcs to the vertical construction line vector of the "pistil" sketch as "Coincident".
Constraint starting point of the second arc to the vertical construction line vector of the "pistil" sketch as "Coincident".
Constraint curve of the second arc to the third by size arc of the "golden_ratio_spiral" as "Equal".

Most of the elements was constrained to entities of the "pistil" sketch. But "pistil" sketch is not fully defined because it do not have strict position and can be moved across coordinate plane. I am going to constrain it to the "pistil" sketch coordinate plane center. "CAD Sketcher" solver engine is not perfect so if you are moving entity of one sketch, you will see real-time feedback only from the other entities of the same sketch. Constraints between entities of other sketches need to be solved manually by pressing "Force Update" button.

Sometimes to avoid solver errors you need to move element little by little and after each movement do forced manual solving. Reason is that the forced manual solving is like automatic re-applying of all constraints one by one so potential problems are the same like during regular constraining.

To make sure I am constraining to coordinate center of the current sketch, I disabling all other sketches beforehand and selecting coordinate plane center from the entities manager.

Sketch itself is just an abstract object of "CAD Sketcher" add-on. To get Bezier from sketches I need to set "Convert Type" of them to "Bezier" and disable "Fill Shape" option. After this I see 4 Bezier objects appeared in the "Outliner" list.

During this step, I also made sure that the sketches are marked as "Fully defined sketch". This means that all the entities inside the sketch have no degrees of freedom, and they all have a logical reason to be where they are and have the dimensions they have. This is a rule of thumb in CAD modeling.

Now I am ready to export result as SVG.
3D Viewport > Sidebar > Tool > Bezier Utilities > Other Tools > Export to SVG
I prefer to keep setting as it is, because all of them can be changed in the "Inkscape" itself during processing.
Select location to export.
Make sure that you specified name with ".svg" extension in the end.
Press "Export to SVG".

INKSCAPE WORKFLOW PART

Now I am opening exported ".svg" file in the "Inkscape".

I had 4 Bezier objects in the export scope of "Blender" so I am expecting to see 4 shape objects in the "Layers and Objects" tool tab of "Inkscape". All shape objects are there. All of them without fill but with randomized stroke colors.

I prefer to group all shape objects to consolidate them and prevent moving them accidentally. After this to select particular shape object better to use "Layers and Objects" tool tab.

Now I am going to deal with icon dimensions and the ratio of the stroke width to this dimensions. I decide that icon will be 90 pixel in height and strokes will be 3 pixels width. I know two ways to set both of this parameters without affecting proportions, distortion of the shape objects or parameters to affect each other. One of them usable only if strokes have round cap shape. So better to use another one - more stable.

Select group of the shape objects.
Make sure "When scaling objects, scale the stroke width by the same proportion" option turned on to prevent distortion.
Make sure width - height proportion is locked.
Change both of this parameters one after another again and again several times until you get rid of the error in thousandths of a unit. Brute force, but works perfectly stable... and surprisingly precise...

Now I am going to set layer order of the shape objects.

I prefer to do it in the "Layers and Objects" tool tab by selecting particular shape object and raise|lower it by arrow buttons at the top right of the tab.

Now I am going to do coloring of the shape objects.

It it convenient to do this via "Fill and Stroke" tool tab.

Colors I am using: #200820, #A00020, #E00020

In the end I prefer to fit canvas size to drawing dimensions and use checkerboard background to highlight transparency.
Both of this things can be done in the File > Document Properties > Display.

And finally I am going to export result as ".png" image.
It can be done from the "Export" tool tab.

CONCLUSION

As you can see in the end we have pixel perfect result.

Here you can find final files of poppy.blend and poppy.svg.

Look... I know that all this "Inkscape" part most probably was not really needed for you. But by showing entire process I tried to convince you how solid this workflow is.

I really do not like video format of the software tutorials because if something need to be updated it became a big pain in the ass. So maybe in the future I will update it with more detailed, more maintainable and more common for my site image version of this tutorial. But for now I am still figuring out how to properly demonstrate something that I am doing on the big screen in the screenshots that are restricted by 960px wide.

Anyway, I hope this solution was useful to you. Thanks for you time!

Version: 2023_01_12_000001