Using Lil' Vector: All About Shapes

Like most vector graphic systems, Scalable Vector Graphic images are made up of many different parts, or "shapes". Each shape has its own set of attributes that define how and where it gets displayed when the image is drawn. Lil' Vector follows this system very closely, so understanding how these shapes work can make it easier to create your artwork.

Parts of a Shape

The first thing every shape needs is a Name. This is a string of letters and numbers that uniquely identify a shape and allow it to be selected in the Shape Management Window. Shapes also keep their names when the image is exported to SVG, as this allows other tools, like JavaScript on a webpage, to manipulate this shape on demand.

Next, each shape has its own Fill and Stroke. A shape's Fill refers to the color that "fills" it in, while a shape's Stroke controls the color and thickness of a shape's outline or border. To prevent a shape from being filled in or outlined, set the Fill or Stroke to transparent. Setting the Stroke's thickness to 0 will also work.

Another key part of any shape is the array of points that define it. The Main Window provides you with everything you need to manipulate these points freely, so see that page if you want more information on how to do this, and see the next section for some things to keep in mind while working with your shapes.

Lastly, each shape may have "transforms" applied to it. These include things like scaling, rotation, and translation. Although Lil' Vector currently handles these details behind the scenes, it does provide tools to manipulate them indirectly.

Types of Shapes

To make things easier, Lil' Vector hides some details from you. This is done by classifying shapes as distinct types - paths, lines, circles, and rectangles. Internally, these are all the same sort of object; the difference lies in how Lil' Vector presents them to you.

Paths and Lines are effectively identical: Lines are simply open paths without a fill. Closing a Line object or setting a fill color will make this obvious.

Circles and Rectangles are also similar to each other - unlike Paths and Lines, the array of points that makes up a Circle or Rectangle cannot be manipulated directly. Instead, you're provided with four handles that can be moved around, and Lil' Vector will quietly update the shape's points to reflect any changes in the handle's positions.

Should the need arise, the Main Window has options in its menu that allow you to freely convert between shape types. Some information is lost when changing a shape's type, so changing its type again may not work out quite as well as hoped.