Education‎ > ‎Design‎ > ‎

2D Vector Design 101

Curriculum


What are vector graphics?

    1. Graphics created by combining lines, shapes, or objects.

    2. These objects are stored by mathematical representation, rather than using a grid of pixels.

    3. Vector graphics are scalable without creating distortion, unlike bitmap graphics.

What is Inkscape?

    1. A vector graphic editing software

    2. Free open source software www.inkscape.org that is used for creating and editing vector graphics (like Adobe Illustrator, Corel etc.)

    3. Available for Linux, Macintosh, and Windows

    4. Utilizes SVG (Scalable Vector Graphic) file format used

    5. Great program for: web graphics, print and digital projects, and more

    6. It is editable by anyone and has a diverse community of users

What is SVG (Scalable Vector Graphic)?

    1. Great for web and mobile uses

    2. An open file format (for creating 2D graphic)

    3. Any artwork created can be sized up without any loss of quality.

    4. Used by other open source and commercial software

      1. Includes: Vector, Raster, Text object

      2. Uses XML code to define images

      3. Import & Export graphics in several other programs

Vector vs Bitmap

    1. Explain the difference between them

    2. Explain how they affect the laser: vector and raster images

Default Inkscape window.


Basics

From Inkscape: https://inkscape.org/learn/tutorials/

Panning the canvas

There are many ways to pan (scroll) the document canvas. Try Ctrl+arrow keys to scroll by keyboard. (Try this now to scroll this document down.) You can also drag the canvas by the middle mouse button. Or, you can use the scrollbars (press Ctrl+B to show or hide them). The wheel on your mouse also works for scrolling vertically; press Shift with the wheel to scroll horizontally.

Zooming in or out

The easiest way to zoom is by pressing - and + (or =) keys. You can also use Ctrl+middle click or Ctrl+right click to zoom in, Shift+middle click or Shift+right click to zoom out, or rotate the mouse wheel with Ctrl. Or, you can click in the zoom entry field (in the bottom right corner of the document window), type a precise zoom value in %, and press Enter. We also have the Zoom tool (in the toolbar on left) which lets you to zoom into an area by dragging around it.

Inkscape also keeps a history of the zoom levels you've used in this work session. Press the ` key to go back to the previous zoom, or Shift+` to go forward.

Inkscape tools

The vertical toolbar on the left shows Inkscape's drawing and editing tools. In the top part of the window, below the menu, there's the Commands bar with general command buttons and the Tool Controls bar with controls that are specific to each tool. The status bar at the bottom of the window will display useful hints and messages as you work.

Many operations are available through keyboard shortcuts. Open Help > Keys and Mouse to see the complete reference.

Creating and managing documents

To create a new empty document, use File > New or press Ctrl+N. To create a new document from one of Inkscape's many templates, use File > New from Template... or press Ctrl+Alt+N

To open an existing SVG document, use File > Open (Ctrl+O). To save, use File > Save (Ctrl+S), or Save As (Shift+Ctrl+S) to save under a new name. (Inkscape may still be unstable, so remember to save often!)

Inkscape uses the SVG (Scalable Vector Graphics) format for its files. SVG is an open standard widely supported by graphic software. SVG files are based on XML and can be edited with any text or XML editor (apart from Inkscape, that is). Besides SVG, Inkscape can import and export several other formats (EPS, PNG).

Inkscape opens a separate document window for each document. You can navigate among them using your window manager (e.g. by Alt+Tab), or you can use the Inkscape shortcut, Ctrl+Tab, which will cycle through all open document windows. (Create a new document now and switch between it and this document for practice.) Note: Inkscape treats these windows like tabs in a web browser, this means the Ctrl+Tab shortcut only works with documents running in the same process. If you open multiple files from a file browser or launch more than one Inkscape process from an icon it will not work.

Creating shapes

Time for some nice shapes! Click on the Rectangle tool in the toolbar (or press F4) and click-and-drag, either in a new empty document or right here:

An example image

As you can see, default rectangles come up blue, with a black stroke (outline), and fully opaque. We'll see how to change that below. With other tools, you can also create ellipses, stars, and spirals:

An example image

These tools are collectively known as shape tools. Each shape you create displays one or more diamond-shaped handles; try dragging them to see how the shape responds. The Controls panel for a shape tool is another way to tweak a shape; these controls affect the currently selected shapes (i.e. those that display the handles) and set the default that will apply to newly created shapes.

To undo your last action, press Ctrl+Z. (Or, if you change your mind again, you can redo the undone action by Shift+Ctrl+Z.)

Moving, scaling, rotating

The most frequently used Inkscape tool is the Selector. Click the topmost button (with the arrow) on the toolbar, or press F1 or Space. Now you can select any object on the canvas. Click on the rectangle below.

An example image

You will see eight arrow-shaped handles appear around the object. Now you can:

  • Move the object by dragging it. (Press Ctrl to restrict movement to horizontal and vertical.)

  • Scale the object by dragging any handle. (Press Ctrl to preserve the original height/width ratio.)

Now click the rectangle again. The handles change. Now you can:

  • Rotate the object by dragging corner handles. (Press Ctrl to restrict rotation to 15 degree steps. Drag the cross mark to position the center of rotation.)

  • Skew (shear) the object by dragging non-corner handles. (Press Ctrl to restrict skewing to 15 degree steps.)

While in Selector, you can also use the numeric entry fields in the Controls bar (above the canvas) to set exact values for coordinates (X and Y) and size (W and H) of the selection.

Transforming by keys

One of Inkscape's features that set it apart from most other vector editors is its emphasis on keyboard accessibility. There's hardly any command or action that is impossible to do from keyboard, and transforming objects is no exception.

You can use the keyboard to move (arrow keys), scale (< and > keys), and rotate ([ and ] keys) objects. Default moves and scales are by 2 px; with Shift, you move by 10 times that. Ctrl+> and Ctrl+< scale up or down to 200% or 50% of the original, respectively. Default rotates are by 15 degrees; with Ctrl, you rotate by 90 degrees.

However, perhaps the most useful are pixel-size transformations, invoked by using Alt with the transform keys. For example, Alt+arrows will move the selection by 1 pixel at the current zoom (i.e. by 1 screen pixel, not to be confused with the px unit which is an SVG length unit independent of zoom). This means that if you zoom in, one Alt+arrow will result in a smaller absolute movement which will still look like one-pixel nudge on your screen. It is thus possible to position objects with arbitrary precision simply by zooming in or out as needed.

Similarly, Alt+> and Alt+< scale selection so that its visible size changes by one screen pixel, and Alt+[ and Alt+] rotate it so that its farthest-from-center point moves by one screen pixel.

Note: Linux users may not get the expected results with the Alt+arrow and a few other key combinations if their Window Manager catches those key events before they reach the inkscape application. One solution would be to change the WM's configuration accordingly.

Multiple selections

You can select any number of objects simultaneously by Shift+clicking them. Or, you can drag around the objects you need to select; this is called rubberband selection. (Selector creates rubberband when dragging from an empty space; however, if you press Shift before starting to drag, Inkscape will always create the rubberband.) Practice by selecting all three of the shapes below:

An example image

Now, use rubberband (by drag or Shift+drag) to select the two ellipses but not the rectangle:

An example image

Each individual object within a selection displays a selection cue — by default, a dashed rectangular frame. These cues make it easy to see at once what is selected and what is not. For example, if you select both the two ellipses and the rectangle, without the cues you would have hard time guessing whether the ellipses are selected or not.

Shift+clicking on a selected object excludes it from the selection. Select all three objects above, then use Shift+click to exclude both ellipses from the selection leaving only the rectangle selected.

Pressing Esc deselects any selected objects. Ctrl+A selects all objects in the current layer (if you did not create layers, this is the same as all objects in the document).

Grouping

Several objects can be combined into a group. A group behaves as a single object when you drag or transform it. Below, the three objects on the left are independent; the same three objects on the right are grouped. Try to drag the group.

An example image

To create a group, you select one or more objects and press Ctrl+G. To ungroup one or more groups, select them and press Ctrl+U. Groups themselves may be grouped, just like any other objects; such recursive groups may go down to arbitrary depth. However, Ctrl+U only ungroups the topmost level of grouping in a selection; you'll need to press Ctrl+U repeatedly if you want to completely ungroup a deep group-in-group.

You don't necessarily have to ungroup, however, if you want to edit an object within a group. Just Ctrl+click that object and it will be selected and editable alone, or Shift+Ctrl+click several objects (inside or outside any groups) for multiple selection regardless of grouping. Try to move or transform the individual shapes in the group (above right) without ungrouping it, then deselect and select the group normally to see that it still remains grouped.

Fill and stroke

Probably the simplest way to paint an object some color is to select an object, and click a swatch in the palette below the canvas to paint it (change its fill color). Alternatively, you can open the Swatches dialog from the View menu (or press Shift+Ctrl+W), select an object, and click a swatch to paint it (change its fill color).

More powerful is the Fill and Stroke dialog from the Object menu (or press Shift+Ctrl+F). Select the shape below and open the Fill and Stroke dialog.

An example image

You will see that the dialog has three tabs: Fill, Stroke paint, and Stroke style. The Fill tab lets you edit the fill (interior) of the selected object(s). Using the buttons just below the tab, you can select types of fill, including no fill (the button with the X), flat color fill, as well as linear or radial gradients. For the above shape, the flat fill button will be activated.

Further below, you see a collection of color pickers, each in its own tab: RGB, CMYK, HSL, and Wheel. Perhaps the most convenient is the Wheel picker, where you can rotate the triangle to choose a hue on the wheel, and then select a shade of that hue within the triangle. All color pickers contain a slider to set the alpha (opacity) of the selected object(s).

Whenever you select an object, the color picker is updated to display its current fill and stroke (for multiple selected objects, the dialog shows their average color). Play with these samples or create your own:

An example image

Using the Stroke paint tab, you can remove the stroke (outline) of the object, or assign any color or transparency to it:

An example image

The last tab, Stroke style, lets you set the width and other parameters of the stroke:

An example image

Finally, instead of flat color, you can use gradients for fills and/or strokes:

An example image

When you switch from flat color to gradient, the newly created gradient uses the previous flat color, going from opaque to transparent. Switch to the Gradient tool (Ctrl+F1) to drag the gradient handles — the controls connected by lines that define the direction and length of the gradient. When any of the gradient handles is selected (highlighted blue), the Fill and Stroke dialog sets the color of that handle instead of the color of the entire selected object.

Yet another convenient way to change a color of an object is by using the Dropper tool (F7). Just click anywhere in the drawing with that tool, and the picked color will be assigned to the selected object's fill (Shift+click will assign stroke color).

Duplication, alignment, distribution

One of the most common operations is duplicating an object (Ctrl+D). The duplicate is placed exactly above the original and is selected, so you can drag it away by mouse or by arrow keys. For practice, try to fill the line with copies of this black square:

An example image

Chances are, your copies of the square are placed more or less randomly. This is where the Align and Distribute dialog (Shift+Ctrl+A) is useful. Select all the squares (Shift+click or drag a rubberband), open the dialog and press the “Center on horizontal axis” button, then the “Make horizontal gaps between objects equal” button (read the button tooltips). The objects are now neatly aligned and distributed equispacedly. Here are some other alignment and distribution examples:

An example image

Z-order

The term z-order refers to the stacking order of objects in a drawing, i.e. to which objects are on top and obscure others. The two commands in the Object menu, Raise to Top (the Home key) and Lower to Bottom (the End key), will move your selected objects to the very top or very bottom of the current layer's z-order. Two more commands, Raise (PgUp) and Lower (PgDn), will sink or emerge the selection one step only, i.e. move it past one non-selected object in z-order (only objects that overlap the selection count, based on their respective bounding boxes).

Practice using these commands by reversing the z-order of the objects below, so that the leftmost ellipse is on top and the rightmost one is at the bottom:

An example image

A very useful selection shortcut is the Tab key. If nothing is selected, it selects the bottommost object; otherwise it selects the object above the selected object(s) in z-order. Shift+Tab works in reverse, starting from the topmost object and proceeding downwards. Since the objects you create are added to the top of the stack, pressing Shift+Tab with nothing selected will conveniently select the object you created last. Practice the Tab and Shift+Tab keys on the stack of ellipses above.

Selecting under and dragging selected

What to do if the object you need is hidden behind another object? You may still see the bottom object if the top one is (partially) transparent, but clicking on it will select the top object, not the one you need.

This is what Alt+click is for. First Alt+click selects the top object just like the regular click. However, the next Alt+click at the same point will select the object below the top one; the next one, the object still lower, etc. Thus, several Alt+clicks in a row will cycle, top-to-bottom, through the entire z-order stack of objects at the click point. When the bottom object is reached, next Alt+click will, naturally, again select the topmost object.

[If you are on Linux, you might find that Alt+click does not work properly. Instead, it might be moving the whole Inkscape window. This is because your window manager has reserved Alt+click for a different action. The way to fix this is to find the Window Behavior configuration for your window manager, and either turn it off, or map it to use the Meta key (aka Windows key), so Inkscape and other applications may use the Alt key freely.]

This is nice, but once you selected an under-the-surface object, what can you do with it? You can use keys to transform it, and you can drag the selection handles. However, dragging the object itself will reset the selection to the top object again (this is how click-and-drag is designed to work — it selects the (top) object under cursor first, then drags the selection). To tell Inkscape to drag what is selected now without selecting anything else, use Alt+drag. This will move the current selection no matter where you drag your mouse.

Practice Alt+click and Alt+drag on the two brown shapes under the green transparent rectangle:

An example image

Selecting similar objects

Inkscape can select other objects similar to the object currently selected. For example, if you want to select all the blue squares below first select one of the blue squares, and use Edit > Select Same > Fill Color from the menu. All the objects with a fill color the same shade of blue are now selected.

An example image

In addition to selecting by fill color, you can select multiple similar objects by stroke color, stroke style, fill & stroke, and object type.


Shapes

From Inkscape: https://inkscape.org/learn/tutorials/

Inkscape has four versatile shape tools, each tool capable of creating and editing its own type of shapes. A shape is an object which you can modify in ways unique to this shape type, using draggable handles and numeric parameters that determine the shape's appearance.

For example, with a star you can alter the number of tips, their length, angle, rounding, etc. — but a star remains a star. A shape is “less free” than a simple path, but it's often more interesting and useful. You can always convert a shape to a path (Shift+Ctrl+C), but the reverse conversion is not possible.

The shape tools are Rectangle, Ellipse, Star, and Spiral. First, let's look at how shape tools work in general; then we'll explore each shape type in detail.

General tips

A new shape is created by dragging on canvas with the corresponding tool. Once the shape is created (and so long as it is selected), it displays its handles as white diamond, square or round marks (depending on the tools), so you can immediately edit what you created by dragging these handles.

All four kinds of shapes display their handles in all four shape tools as well as in the Node tool (F2). When you hover your mouse over a handle, it tells you in the statusbar what this handle will do when dragged or clicked with different modifiers.

Also, each shape tool displays its parameters in the Tool Controls bar (which runs horizontally above the canvas). Usually it has a few numeric entry fields and a button to reset the values to defaults. When shape(s) of the current tool's native type are selected, editing the values in the Controls bar changes the selected shape(s).

Any changes made to the Tool Controls are remembered and used for the next object you draw with that tool. For example, after you change the number of tips of a star, new stars will have this number of tips as well when drawn. Moreover, even simply selecting a shape sends its parameters to the Tool Controls bar and thus sets the values for newly created shapes of this type.

When in a shape tool, selecting an object can be done by clicking on it. Ctrl+click (select in group) and Alt+click (select under) also work as they do in Selector tool. Esc deselects.

Rectangles

A rectangle is the simplest but perhaps the most common shape in design and illustration. Inkscape attempts to make creating and editing rectangles as easy and convenient as possible.

Switch to the Rectangle tool by F4 or by clicking its toolbar button. Draw a new rectangle alongside this blue one:

An example image

Then, without leaving the Rectangle tool, switch selection from one rectangle to the other by clicking on them.

Rectangle drawing shortcuts:

  • With Ctrl, draw a square or an integer-ratio (2:1, 3:1, etc) rectangle.

  • With Shift, draw around the starting point as center.

As you see, the selected rectangle (the just-drawn rectangle is always selected) shows three handles in three of its corners. In fact, these are four handles, but two of them (in the top right corner) overlap if the rectangle is not rounded. These two are the rounding handles; the other two (top left and bottom right) are resize handles.

Let's look at the rounding handles first. Grab one of them and drag down. All four corners of the rectangle become rounded, and you can now see the second rounding handle — it stays in the original position in the corner. If you want circular rounded corners, that is all you need to do. If you want corners which are rounded farther along one side than along the other, you can move that other handle leftwards.

Here, the first two rectangles have circular rounded corners, and the other two have elliptic rounded corners:

An example image

Still in the Rectangle tool, click on these rectangles to select, and observe their rounding handles.

Often, the radius and shape of the rounded corners must be constant within the entire composition, even if the sizes of the rectangles are different (think diagrams with rounded boxes of various sizes). Inkscape makes this easy. Switch to the Selector tool; in its Tool Controls bar, there's a group of four toggle buttons, the second from the left showing two concentric rounded corners. This is how you control whether the rounded corners are scaled when the rectangle is scaled or not.

For example, here the original red rectangle is duplicated and scaled several times, up and down, to different proportions, with the “Scale rounded corners” button off:

An example image

Note how the size and shape of the rounded corners is the same in all rectangles, so that the roundings align exactly in the top right corner where they all meet. All the dotted blue rectangles are obtained from the original red rectangle just by scaling in Selector, without any manual readjustment of the rounding handles.

For a comparison, here is the same composition but now created with the “Scale rounded corners” button on:

An example image

Now the rounded corners are as different as the rectangles they belong to, and there isn't a slightest agreement in the top right corner (zoom in to see). This is the same (visible) result as you would get by converting the original rectangle to a path (Ctrl+Shift+C) and scaling it as path.

Here are the shortcuts for the rounding handles of a rectangle:

  • Drag with Ctrl to make the other radius the same (circular rounding).

  • Ctrl+click to make the other radius the same without dragging.

  • Shift+click to remove rounding.

You may have noticed that the Rectangle tool's Controls bar shows the horizontal (Rx) and vertical (Ry) rounding radii for the selected rectangle and lets you set them precisely using any length units. The Not rounded button does what is says — removes rounding from the selected rectangle(s).

An important advantage of these controls is that they can affect many rectangles at once. For example, if you want to change all rectangles in the layer, just do Ctrl+A (Select All) and set the parameters you need in the Controls bar. If any non-rectangles are selected, they will be ignored — only rectangles will be changed.

Now let's look at the resize handles of a rectangle. You might wonder, why do we need them at all, if we can just as well resize the rectangle with Selector?

The problem with Selector is that its notion of horizontal and vertical is always that of the document page. By contrast, a rectangle's resize handles scale it along that rectangle's sides, even if the rectangle is rotated or skewed. For example, try to resize this rectangle first with Selector and then with its resize handles in Rectangle tool:

An example image

Since the resize handles are two, you can resize the rectangle into any direction or even move it along its sides. Resize handles always preserve the rounding radii.

Here are the shortcuts for the resize handles:

  • Drag with Ctrl to snap to the sides or the diagonal of the rectangle. In other words, Ctrl preserves either width, or height, or the width/height ratio of the rectangle (again, in its own coordinate system which may be rotated or skewed).

Here is the same rectangle, with the gray dotted lines showing the directions to which the resize handles stick when dragged with Ctrl (try it):

An example image

By slanting and rotating a rectangle, then duplicating it and resizing with its resize handles, 3D compositions can be created easily:

An example image

Here are some more examples of rectangle compositions, including rounding and gradient fills:

An example image

Ellipses

The Ellipse tool (F5) can create ellipses and circles, which you can turn into segments or arcs. The drawing shortcuts are the same as those of the rectangle tool:

  • With Ctrl, draw a circle or an integer-ratio (2:1, 3:1, etc.) ellipse.

  • With Shift, draw around the starting point as center.

Let's explore the handles of an ellipse. Select this one:

An example image

Once again, you see three handles initially, but in fact they are four. The rightmost handle is two overlapping handles that let you “open” the ellipse. Drag that rightmost handle, then drag the other handle which becomes visible under it, to get a variety of pie-chart segments or arcs:

An example image

To get a segment (an arc plus two radii), drag outside the ellipse; to get an arc, drag inside it. Above, there are 4 segments on the left and 3 arcs on the right. Note that arcs are unclosed shapes, i.e. the stroke only goes along the ellipse but does not connect the ends of the arc. You can make this obvious if you remove the fill, leaving only stroke:

An example image

Note the fan-like group of narrow segments on the left. It was easy to create using angle snapping of the handle with Ctrl. Here are the arc/segment handle shortcuts:

  • With Ctrl, snap the handle every 15 degrees when dragging.

  • Shift+click to make the ellipse whole (not arc or segment).

The snap angle can be changed in Inkscape Preferences (in Behavior > Steps).

The other two handles of the ellipse are used for resizing it around its center. Their shortcuts are similar to those of the rounding handles of a rectangle:

  • Drag with Ctrl to make a circle (make the other radius the same).

  • Ctrl+click to make a circle without dragging.

And, like the rectangle resize handles, these ellipse handles adjust the height and width of the ellipse in the ellipse's own coordinates. This means that a rotated or skewed ellipse can easily be stretched or squeezed along its original axes while remaining rotated or skewed. Try to resize any of these ellipses by their resize handles:

An example image

Stars

Stars are the most complex and the most exciting Inkscape shape. If you want to wow your friends by Inkscape, let them play with the Star tool. It's endlessly entertaining — outright addictive!

The Star tool can create two similar but distinct kinds of objects: stars and polygons. A star has two handles whose positions define the length and shape of its tips; a polygon has just one handle which simply rotates and resizes the polygon when dragged:

An example image

In the Controls bar of the Star tool, the first two buttons control how the shape is drawn (regular polygon or star). Next, a numeric field sets the number of vertices of a star or polygon. This parameter is only editable via the Controls bar. The allowed range is from 3 (obviously) to 1024, but you shouldn't try large numbers (say, over 200) if your computer is slow.

When drawing a new star or polygon,

  • Drag with Ctrl to snap the angle to 15 degree increments.

Naturally, a star is a much more interesting shape (though polygons are often more useful in practice). The two handles of a star have slightly different functions. The first handle (initially it is on a vertex, i.e. on a convex corner of the star) makes the star rays longer or shorter, but when you rotate it (relative to the center of the shape), the other handle rotates accordingly. This means you cannot skew the star's rays with this handle.

The other handle (initially in a concave corner between two vertices) is, conversely, free to move both radially and tangentially, without affecting the vertex handle. (In fact, this handle can itself become vertex by moving farther from the center than the other handle.) This is the handle that can skew the star's tips to get all sorts of crystals, mandalas, snowflakes, and porcupines:

An example image

If you want just a plain regular star without any such lacework, you can make the skewing handle behave as the non-skewing one:

  • Drag with Ctrl to keep the star rays strictly radial (no skew).

  • Ctrl+click to remove the skew without dragging.

As a useful complement for the on-canvas handle dragging, the Controls bar has the Spoke ratio field which defines the ratio of the two handles' distances to the center.

Inkscape stars have two more tricks in their bag. In geometry, a polygon is a shape with straight line edges and sharp corners. In the real world, however, various degrees of curvilinearity and roundedness are normally present — and Inkscape can do that too. Rounding a star or polygon works a bit differently from rounding a rectangle, however. You don't use a dedicated handle for this, but

  • Shift+drag a handle tangentially to round the star or polygon.

  • Shift+click a handle to remove rounding.

“Tangentially” means in a direction perpendicular to the direction to the center. If you “rotate” a handle with Shift counterclockwise around the center, you get positive roundedness; with clockwise rotation, you get negative roundedness. (See below for examples of negative roundedness.)

Here's a comparison of a rounded square (Rectangle tool) with a rounded 4-sided polygon (Star tool):

An example image

As you can see, while a rounded rectangle has straight line segments in its sides and circular (generally, elliptic) roundings, a rounded polygon or star has no straight lines at all; its curvature varies smoothly from the maximum (in the corners) to the minimum (mid-way between the corners). Inkscape does this simply by adding collinear Bezier tangents to each node of the shape (you can see them if you convert the shape to path and examine it in Node tool).

The Rounded parameter which you can adjust in the Controls bar is the ratio of the length of these tangents to the length of the polygon/star sides to which they are adjacent. This parameter can be negative, which reverses the direction of tangents. The values of about 0.2 to 0.4 give “normal” rounding of the kind you would expect; other values tend to produce beautiful, intricate, and totally unpredictable patterns. A star with a large roundedness value may reach far beyond the positions of its handles. Here are a few examples, each indicating its roundedness value:

An example image

If you want the tips of a star to be sharp but the concaves smooth or vice versa, this is easy to do by creating an offset (Ctrl+J) from the star:

An example image

Shift+dragging star handles in Inkscape is one of the finest pursuits known to man. But it can get better still.

To closer imitate real world shapes, Inkscape can randomize (i.e. randomly distort) its stars and polygons. Slight randomization makes a star less regular, more humane, often funny; strong randomization is an exciting way to obtain a variety of crazily unpredictable shapes. A rounded star remains smoothly rounded when randomized. Here are the shortcuts:

  • Alt+drag a handle tangentially to randomize the star or polygon.

  • Alt+click a handle to remove randomization.

As you draw or handle-drag-edit a randomized star, it will “tremble” because each unique position of its handles corresponds to its own unique randomization. So, moving a handle without Alt re-randomizes the shape at the same randomization level, while Alt-dragging it keeps the same randomization but adjusts its level. Here are stars whose parameters are exactly the same, but each one is re-randomized by very slightly moving its handle (randomization level is 0.1 throughout):

An example image

And here is the middle star from the previous row, with the randomization level varying from -0.2 to 0.2:

An example image

Alt+drag a handle of the middle star in this row and observe as it morphs into its neighbors on the right and left — and beyond.

You will probably find your own applications for randomized stars, but I am especially fond of rounded amoeba-like blotches and large roughened planets with fantastic landscapes:

An example image

Spirals

Inkscape's spiral is a versatile shape, and though not as immersing as the star, it is sometimes very useful. A spiral, like a star, is drawn from the center; while drawing as well as while editing,

  • Ctrl+drag to snap angle to 15 degree increments.

Once drawn, a spiral has two handles at its inner and outer ends. Both handles, when simply dragged, roll or unroll the spiral (i.e. “continue” it, changing the number of turns). Other shortcuts:

Outer handle:

  • Shift+drag to scale/rotate around center (no rolling/unrolling).

  • Alt+drag to lock radius while rolling/unrolling.

Inner handle:

  • Alt+drag vertically to converge/diverge.

  • Alt+click to reset divergence.

  • Shift+click to move the inner handle to the center.

The divergence of a spiral is the measure of nonlinearity of its winds. When it is equal to 1, the spiral is uniform; when it is less than 1 (Alt+drag upwards), the spiral is denser on the periphery; when it is greater than 1 (Alt+drag downwards), the spiral is denser towards the center:

An example image

The maximum number of spiral turns is 1024.

Just as the Ellipse tool is good not only for ellipses but also for arcs (lines of constant curvature), the Spiral tool is useful for making curves of smoothly varying curvature. Compared to a plain Bezier curve, an arc or a spiral is often more convenient because you can make it shorter or longer by dragging a handle along the curve without affecting its shape. Also, while a spiral is normally drawn without fill, you can add fill and remove stroke for interesting effects.

An example image

Especially interesting are spirals with dotted stroke — they combine the smooth concentration of the shape with regular equispaced marks (dots or dashes) for beautiful moire effects:


An example image



Advanced

From Inkscape: https://inkscape.org/learn/tutorials/

Pasting techniques

After you copy some object(s) by Ctrl+C or cut by Ctrl+X, the regular Paste command (Ctrl+V) pastes the copied object(s) right under the mouse cursor or, if the cursor is outside the window, to the center of the document window. However, the object(s) in the clipboard still remember the original place from which they were copied, and you can paste back there by Paste in Place (Ctrl+Alt+V).

Another command, Paste Style (Shift+Ctrl+V), applies the style of the (first) object on the clipboard to the current selection. The “style” thus pasted includes all the fill, stroke, and font settings, but not the shape, size, or parameters specific to a shape type, such as the number of tips of a star.

Yet another set of paste commands, Paste Size, scales the selection to match the desired size attribute of the clipboard object(s). There are a number of commands for pasting size and are as follows: Paste Size, Paste Width, Paste Height, Paste Size Separately, Paste Width Separately, and Paste Height Separately.

Paste Size scales the whole selection to match the overall size of the clipboard object(s). Paste Width/Paste Height scale the whole selection horizontally/vertically so that it matches the width/height of the clipboard object(s). These commands honor the scale ratio lock on the Selector Tool controls bar (between W and H fields), so that when that lock is pressed, the other dimension of the selected object is scaled in the same proportion; otherwise the other dimension is unchanged. The commands containing “Separately” work similarly to the above described commands, except that they scale each selected object separately to make it match the size/width/height of the clipboard object(s).

Clipboard is system-wide - you can copy/paste objects between different Inkscape instances as well as between Inkscape and other applications (which must be able to handle SVG on the clipboard to use this).

Drawing freehand and regular paths

The easiest way to create an arbitrary shape is to draw it using the Pencil (freehand) tool (F6):

An example image

If you want more regular shapes, use the Pen (Bezier) tool (Shift+F6):

An example image

With the Pen tool, each click creates a sharp node without any curve handles, so a series of clicks produces a sequence of straight line segments. click and drag creates a smooth Bezier node with two collinear opposite handles. Press Shift while dragging out a handle to rotate only one handle and fix the other. As usual, Ctrl limits the direction of either the current line segment or the Bezier handles to 15 degree increments. Pressing Enter finalizes the line, Esc cancels it. To cancel only the last segment of an unfinished line, press Backspace.

In both freehand and bezier tools, the currently selected path displays small square anchors at both ends. These anchors allow you to continue this path (by drawing from one of the anchors) or close it (by drawing from one anchor to the other) instead of creating a new one.

Editing paths

Unlike shapes created by shape tools, the Pen and Pencil tools create what is called paths. A path is a sequence of straight line segments and/or Bezier curves which, as any other Inkscape object, may have arbitrary fill and stroke properties. But unlike a shape, a path can be edited by freely dragging any of its nodes (not just predefined handles) or by directly dragging a segment of the path. Select this path and switch to the Node tool (F2):

An example image

You will see a number of gray square nodes on the path. These nodes can be selected by click, Shift+click, or by dragging a rubberband - exactly like objects are selected by the Selector tool. You can also click a path segment to automatically select the adjacent nodes. Selected nodes become highlighted and show their node handles - one or two small circles connected to each selected node by straight lines. The ! key inverts node selection in the current subpath(s) (i.e. subpaths with at least one selected node); Alt+! inverts in the entire path.

Paths are edited by dragging their nodes, node handles, or directly dragging a path segment. (Try to drag some nodes, handles, and path segments of the above path.) Ctrl works as usual to restrict movement and rotation. The arrow keys, Tab, [, ], <, > keys with their modifiers all work just as they do in selector, but apply to nodes instead of objects. You can add nodes anywhere on a path by either double clicking or by Ctrl+Alt+click at the desired location.

You can delete nodes with Del or Ctrl+Alt+click. When deleting nodes it will try to retain the shape of the path, if you desire for the handles of the adjacent nodes to be retracted (not retaining the shape) you can delete with Ctrl+Del. Additionally, you can duplicate (Shift+D) selected nodes. The path can be broken (Shift+B) at the selected nodes, or if you select two endnodes on one path, you can join them (Shift+J).

A node can be made cusp (Shift+C), which means its two handles can move independently at any angle to each other; smooth (Shift+S), which means its handles are always on the same straight line (collinear); symmetric (Shift+Y), which is the same as smooth, but the handles also have the same length; and auto-smooth (Shift+A), a special node that automatically adjusts the handles of the node and surrounding auto-smooth nodes to maintain a smooth curve. When you switch the type of node, you can preserve the position of one of the two handles by hovering your mouse over it, so that only the other handle is rotated/scaled to match.

Also, you can retract a node's handle altogether by Ctrl+clicking on it. If two adjacent nodes have their handles retracted, the path segment between them is a straight line. To pull out the retracted node, Shift+drag away from the node.

Subpaths and combining

A path object may contain more than one subpath. A subpath is a sequence of nodes connected to each other. (Therefore, if a path has more than one subpath, not all of its nodes are connected.) Below left, three subpaths belong to a single compound path; the same three subpaths on the right are independent path objects:

An example image

Note that a compound path is not the same as a group. It's a single object which is only selectable as a whole. If you select the left object above and switch to node tool, you will see nodes displayed on all three subpaths. On the right, you can only node-edit one path at a time.

Inkscape can Combine paths into a compound path (Ctrl+K) and Break Apart a compound path into separate paths (Shift+Ctrl+K). Try these commands on the above examples. Since an object can only have one fill and stroke, a new compound path gets the style of the first (lowest in z-order) object being combined.

When you combine overlapping paths with fill, usually the fill will disappear in the areas where the paths overlap:

An example image

This is the easiest way to create objects with holes in them. For more powerful path commands, see “Boolean operations” below.

Converting to path

Any shape or text object can be converted to path (Shift+Ctrl+C). This operation does not change the appearance of the object but removes all capabilities specific to its type (e.g. you can't round the corners of a rectangle or edit the text anymore); instead, you can now edit its nodes. Here are two stars - the left one is kept a shape and the right one is converted to path. Switch to node tool and compare their editability when selected:

An example image

Moreover, you can convert to a path (“outline”) the stroke of any object. Below, the first object is the original path (no fill, black stroke), while the second one is the result of the Stroke to Path command (black fill, no stroke):

An example image

Boolean operations

The commands in the Path menu let you combine two or more objects using boolean operations:

An example image

The keyboard shortcuts for these commands allude to the arithmetic analogs of the boolean operations (union is addition, difference is subtraction, etc.). The Difference and Exclusion commands can only apply to two selected objects; others may process any number of objects at once. The result always receives the style of the bottom object.

The result of the Exclusion command looks similar to Combine (see above), but it is different in that Exclusion adds extra nodes where the original paths intersect. The difference between Division and Cut Path is that the former cuts the entire bottom object by the path of the top object, while the latter only cuts the bottom object's stroke and removes any fill (this is convenient for cutting fill-less strokes into pieces).

Inset and outset

Inkscape can expand and contract shapes not only by scaling, but also by offsetting an object's path, i.e. by displacing it perpendicular to the path in each point. The corresponding commands are called Inset (Ctrl+() and Outset (Ctrl+)). Shown below is the original path (red) and a number of paths inset or outset from that original:

An example image

The plain Inset and Outset commands produce paths (converting the original object to path if it's not a path yet). Often, more convenient is the Dynamic Offset (Ctrl+J) which creates an object with a draggable handle (similar to a shape's handle) controlling the offset distance. Select the object below, switch to the node tool, and drag its handle to get an idea:

An example image

Such a dynamic offset object remembers the original path, so it does not “degrade” when you change the offset distance again and again. When you don't need it to be adjustable anymore, you can always convert an offset object back to path.

Still more convenient is a linked offset, which is similar to the dynamic variety but is connected to another path which remains editable. You can have any number of linked offsets for one source path. Below, the source path is red, one offset linked to it has black stroke and no fill, the other has black fill and no stroke.

Select the red object and node-edit it; watch how both linked offsets respond. Now select any of the offsets and drag its handle to adjust the offset radius. Finally, note how you can move or transform the offset objects independently without losing their connection with the source.

An example image

Simplification

The main use of the Simplify command (Ctrl+L) is reducing the number of nodes on a path while almost preserving its shape. This may be useful for paths created by the Pencil tool, since that tool sometimes creates more nodes than necessary. Below, the left shape is as created by the freehand tool, and the right one is a copy that was simplified. The original path has 28 nodes, while the simplified one has 17 (which means it is much easier to work with in node tool) and is smoother.

An example image

The amount of simplification (called the threshold) depends on the size of the selection. Therefore, if you select a path along with some larger object, it will be simplified more aggressively than if you select that path alone. Moreover, the Simplify command is accelerated. This means that if you press Ctrl+L several times in quick succession (so that the calls are within 0.5 sec from each other), the threshold is increased on each call. (If you do another Simplify after a pause, the threshold is back to its default value.) By making use of the acceleration, it is easy to apply the exact amount of simplification you need for each case.

Besides smoothing freehand strokes, Simplify can be used for various creative effects. Often, a shape which is rigid and geometric benefits from some amount of simplification that creates cool life-like generalizations of the original form - melting sharp corners and introducing very natural distortions, sometimes stylish and sometimes plain funny. Here's an example of a clipart shape that looks much nicer after Simplify:

An example image

Creating text

Inkscape is capable of creating long and complex texts. However, it's also pretty convenient for creating small text objects such as heading, banners, logos, diagram labels and captions, etc. This section is a very basic introduction into Inkscape's text capabilities.

Creating a text object is as simple as switching to the Text tool (F8), clicking somewhere in the document, and typing your text. To change font family, style, size, and alignment, open the Text and Font dialog (Shift+Ctrl+T). That dialog also has a text entry tab where you can edit the selected text object - in some situations, it may be more convenient than editing it right on the canvas (in particular, that tab supports as-you-type spell checking).

Like other tools, Text tool can select objects of its own type - text objects -so you can click to select and position the cursor in any existing text object (such as this paragraph).

One of the most common operations in text design is adjusting spacing between letters and lines. As always, Inkscape provides keyboard shortcuts for this. When you are editing text, the Alt+< and Alt+> keys change the letter spacing in the current line of a text object, so that the total length of the line changes by 1 pixel at the current zoom (compare to Selector tool where the same keys do pixel-sized object scaling). As a rule, if the font size in a text object is larger than the default, it will likely benefit from squeezing letters a bit tighter than the default. Here's an example:

An example image

The tightened variant looks a bit better as a heading, but it's still not perfect: the distances between letters are not uniform, for example the “a” and “t” are too far apart while “t” and “i” are too close. The amount of such bad kerns (especially visible in large font sizes) is greater in low quality fonts than in high quality ones; however, in any text string and in any font you will probably find pairs of letters that will benefit from kerning adjustments.

Inkscape makes these adjustments really easy. Just move your text editing cursor between the offending characters and use Alt+arrows to move the letters right of the cursor. Here is the same heading again, this time with manual adjustments for visually uniform letter positioning:

An example image

In addition to shifting letters horizontally by Alt+Left or Alt+Right, you can also move them vertically by using Alt+Up or Alt+Down:

An example image

Of course you could just convert your text to path (Shift+Ctrl+C) and move the letters as regular path objects. However, it is much more convenient to keep text as text - it remains editable, you can try different fonts without removing the kerns and spacing, and it takes much less space in the saved file. The only disadvantage to the “text as text” approach is that you need to have the original font installed on any system where you want to open that SVG document.

Similar to letter spacing, you can also adjust line spacing in multi-line text objects. Try the Ctrl+Alt+< and Ctrl+Alt+> keys on any paragraph in this tutorial to space it in or out so that the overall height of the text object changes by 1 pixel at the current zoom. As in Selector, pressing Shift with any spacing or kerning shortcut produces 10 times greater effect than without Shift.

XML editor

The ultimate power tool of Inkscape is the XML editor (Shift+Ctrl+X). It displays the entire XML tree of the document, always reflecting its current state. You can edit your drawing and watch the corresponding changes in the XML tree. Moreover, you can edit any text, element, or attribute nodes in the XML editor and see the result on your canvas. This is the best tool imaginable for learning SVG interactively, and it allows you to do tricks that would be impossible with regular editing tools.




How to prepare files for laser & CNC

  • Save as .pdf

  • To preserve text, select the object and then click Object->Path

  • For text: use a script font so letters will be connected)

  • View -> Outline to see what the laser / cnc machine will see

  • Set Fill to none

      • Set Stroke to a colour

      • Stroke thickness to 1 px




  • For fancy lettering in one piece:

    • Type text in cursive font

    • Outset/Inset path

    • perform Union so it has one solid outline

    • This design below can now be laser or CNC cut




Comments