Nodes and what you can do with them

This is a continuation of our glossary of words and what they mean. In the last blog I wrote about what is a SVG and now we are continuing to nodes

What is a Node

Nodes are basically what makes up a vector graphic; we also call it an SVG. Lots of tiny little nodes make up the SVG.

This picture above is a basic Svg that just has circles and some text and a few straight lines…

…but this picture above is how this SVG became a SVG using nodes           

Can you see all the red dots? That means they are open paths and cannot be filled. In this case they are the bows that go around the eggs, they just consist of a few straight lines 

When you finished working on your different elements to the picture then you layer it all up so it looks like the first picture above.

Here is another example of open and closed paths

                           

The 2 red dots in the bottom picture have been separated which now makes this an open path and it cannot be filled in with anything until they are back together as in the top picture.

The following information below is a reference from Natalie Ballard’s new book: Designing with Vectors

To purchase Natalie’s new book, please follow the link Here

Path Basics

There are 4 different Node Types

Start/end nodes are at either end of an open path

Smooth nodes are use for a continuous curving line.

Cusp nodes are used whenever your curve needs a distinct change in direction but will be curved on one or both sides.

Straight/corner nodes do not have handles at all.

Node Basics

All vector drawings are basically a dot-to-dot; but what creates the path is the information in the dot. 

The node is the equivalent of the co-ordinate of that point in the path. 

The handles control how and where the path comes in and leaves the node. 

The handle angle is equivalent to the entry or departure point of the path. Picture your node as a railway turntable – the handle angle shows which track the train is going to carry on to. 

The handle length reflects how long the path should follow that trajectory for but remembering the path cannot change direction without a new node. 

The path is equally influenced by the handles at either end of the node. 

The Darker line above is known as the path. and the fainter line is the handles.             

Drawing Your Own Paths

Drawing paths from scratch is easy. A click with the path tool places a corner/straight node, while clicking and dragging creates a smooth node. 

Adobe Illustrator [P]

The pen tool is the way to draw paths and connect to open paths. Press [Enter] to finish an open path. 

Affinity Designer [P]

The pen tool is the way to draw paths and connect/extend to open paths. Press [V] to finish an open path.

CorelDraw [Shift]+[N]

The pen tool is the way to draw paths and connect to open paths, add new and remove existing ones without switching tools. Press [V] or [Enter] to finish an open path. 

Inkscape [B]

The Bezier Paths tool in Inkscape works the same as Illustrator’s pen tool. By changing the drawing mode (at the top of the screen) you can also create easy spirals or constrain to right angles at any rotation. Press [Enter] to finish an open path. 

Different programs have the different node tools but usually most programs will have then highlighted when you put your mouse over the tool.

I won’t bore you with any fancier words about nodes 

But we have learnt basically a node is a series of little dots that make up the paths and the paths make the svg’s (vector graphics) which can also be text as well.

See you in the next blog post as we continue with another meaning for another one of Natalie’s favourite used words, feel free to comment below if you have a question or any words you want to know more about 

If you missed the last instalment you can find that by clicking here.

Thank you 

Tracy Stephens-Wood