Inkscape is an open source, free program that creates vector-based graphics that can be used in web and print design, in interface and logo creation, and in material cutting. Its capabilities are similar to those of commercial products such as Adobe Illustrator, Macromedia Freehand, and CorelDraw and can be used for any number of practical purposes—creating vector graphics for use in illustrations, business letterheads, computer and electronic wallpapers, and designing web pages and the elements within them.
This is a beginner's guide to using Inkscape. This means you will learn all the ins and outs of using this software—including all the details about the interface, menus, buttons, as well as how to create graphics. We'll start with the very basic parts of graphics and build up as we continue through the book to more complex graphics projects pointing out how you would use these items in everyday projects.
However, before learning the details on how to use Inkscape, let's take a step back and define vector graphics, how a computer displays them, how vector graphics work together, and why we want to use them in design.
Specifically, this chapter will teach you the following:
- What vector graphics are
- Scalable Vector Graphics and Inkscape
- Reasons for using vector graphics over rasterized images
- How vector graphics are used in design
Let's get started!
What are vector graphics?
A vector graphic is made up of points, lines, curves, and shapes or polygons, which are all based on mathematical equations. Inkscape uses these objects and can convert them into paths. A path is a line with a start and end, which are also calculated with a mathematical equation. These paths are not limited to being straight—they can be of any shape, size, and even encompass any number of curves. When you combine them, they create drawings, diagrams, and can even help create certain fonts.
How does this all relate to vector-based graphics? Vector-based graphics aren't made up of pixels. Since they are resolution-independent, you can make them larger (by scaling) and the image quality will stay the same, lines and edges stay clean, and the same images can be used on items as small as letterheads or business cards, blown up to be billboards, or used in high-definition animation sequences. This flexibility, often accompanied by smaller file sizes, makes vector graphics ideal—especially in the world of Internet, computer displays of varying resolution, and hosting services for web pages. Inkscape can help in the navigation of those waters of vector graphics and is a tool that can be invaluable when designing for the digital world as well as print.
These characteristics make vector graphics very different from JPEGs, GIFs, or BMP images—all of which are considered raster or bitmap images, made up of tiny squares called pixels or bits. If you magnify these images, you will see that they are made up of a grid (or bitmap), and if magnified further, they will become blurry and grainy as each pixel with bitmap square's zoom level grows larger.
As stated earlier in the chapter, many programs and applications are similar to Inkscape and can open vector graphics. Some can only open these files for viewing purposes and others can edit them.
Other applications typically used for page layout, but which can open and manipulate vector graphics include Scribus, Quark Xpress, and Adobe InDesign. Scribus is unique in that it is also open source (as Inkscape is) and can even import SVG files (the file type Inkscape uses) and manipulate them. The other programs can open, import, place, scale, and distort .eps files, a vector graphic file type, but unfortunately cannot create or otherwise modify vector graphics.
To create vector graphics, you will use illustration programs like Inkscape—which this book is about—or other programs like Adobe Illustrator, Adobe Freehand Corel Draw, Freehand, XARA Xtreme, or Serif DrawPlus. These programs all have native file formats, but allow you to export your graphics as .eps or .svg files, as needed. What is different about these applications than those for page layout is that you start with a completely blank document that allows you to fully design or draw what you would like, whereas the page layout application focuses on full page layouts.
In the previous section, it was noted that .eps, an Encapsulated Post Script file, is a common vector graphic format—or open format—that can be read by most applications that open and/or create vector graphics. However, there are other file formats that are also considered vector-graphic compatible. These include Inkscape's .svg format, Adobe Illustrator (.ai), Adobe Freehand (.Fhx), and Adobe Flash files, which are mostly vector data and are considered proprietary formats, tied more directly to the prospective software that can open them.
There are a number of other proprietary graphic file formats which can include vector graphics within them as well as rasterized (or bitmap) graphics. These include:
Also note that .eps files are basically the same files a Post Script laser printer uses. Both file types are developed by Adobe and are the foundation of the Adobe PDF format.
What does Inkscape use? A completely different file format—one that is fairly complex in nature, but works well for the flexible nature of vector graphics. They can be edited within Inkscape and can be opened in a text editor and edited at an XML code level. Inkscape uses Scalable Vector Graphics (SVG), a vector-based drawing format that incorporates some basic principles:
- A drawing can (and should) be scalable to any size without losing detail
- A drawing can use an unlimited number of smaller drawings used in any number of ways (and reused) and still be a part of a larger whole
More specifically, Scalable Vector Graphics (SVG) is an XML-based file format for describing two-dimensional vector graphics. The specification defines an open standard that has been in development with the World Wide Web Consortium (W3C) since 1999.
Inkscape was built with SVG and the W3C web standards in mind, which give it a number of features, including a rich body of XML (Extensible Markup Language) with complete descriptions. Inkscape drawings can be reused in other SVG-compliant drawing programs and can adapt to different presentation methods. The .svg format has growing support across most web browsers (Firefox, Chrome, Opera, Safari, Internet Explorer).
The SVG files then, which are inherently XML, can be searched, indexed, scripted, and compressed within a text editor. In fact, they can be created and edited with a text editor if required, but drawing programs like Inkscape can create the SVG files. In fact, Inkscape has an XML editor feature which allows direct edits to the XML files; more information on this is in Chapter 12,How you can use the XML Editor.
There are some slight differences between traditional vector graphics and SVG. All vector graphics are scalable, use smaller-sized files, and have the flexibility to be resized when needed. However, the vector graphic format of SVG has even more detailed advantages than the vector graphic native.
SVG vector images, because they are based on XML, have some distinct advantages over open standard vector formats. These are as follows:
- They can be read and modified by a large range of tools (including browsers, text editors, and other vector graphics software, as described previously)
- They are smaller and more compressible than JPEG and GIF images which are often used in web design
- They are also scalable, like vector graphics
- Text in SVG can be searched, edited, indexed, and more
- SVG is an open-standard
- SVG files are pure XML, which allows them to be opened in other programs (or even a text editor) and edited in non-graphical UI ways (or by programmers directly)
- Most modern browsers offer some support for SVG. Internet Explorer 8, however, does not offer this support
There are still some limitations in the Inkscape program, even though it aims to be fully SVG-compliant. For example, as of version 0.48, it still does not support animation or use SVG fonts within the software for design—though there are plans to add these capabilities into future versions.
The biggest drawback to vector graphic formats is that they are not ideally suited to working with photographs. Sure, Inkscape and other vector graphic applications can open, import, or place photographs into projects, but the colors and complexities of displaying the photograph will essentially overwhelm the application. Also, as stated earlier, as photographs are very much rasterized images being imported into the vector-based application, once you re-size or scale the photograph, the integrity of the photograph can be lost.
This same complexity will appear for advanced coloring and lighting effects when using vector graphics as well—the more you try to make it look like a photograph, the more you might need to rasterize part of the vector graphic as well, essentially making it a non-vector graphic.
Another known drawback for vector graphics is interoperability. If you want to share files between vector graphic applications, you might run into some issues, even when you use .eps files which are more universally accepted as a vector graphic format. Vector information can be lost during the conversion. All fonts, elements, and objects need to be embedded (not linked) and tested thoroughly—however, this sharing is not impossible and entirely depends on the applications being used. Using Inkscape across teams as the development tool can help solve this problem as the application is open source and free to download.
If you are new to design, you might be surprised to learn that even when you are using a word processing program, you are using vector graphics all the time—fonts! Fonts illustrate two common properties of vector graphics:
- An entire font, with all its letters, numbers, and symbols, has a very small file size
- Fonts can be set to any size without losing quality
Some vector-based applications, including Inkscape, allow you to convert text to paths so you can modify the shapes of the letters themselves.
We've spent a lot of time discussing vector graphics and how they differ from rasterized bitmap images. In doing so, it is also important to know when it is best to use each type, because there are instances when it does make sense to use one over the other.
Let's say we're doing a project that will get printed; a brochure—and for best results, we'll use both vector and bitmap graphics. We'll look at the most basic steps of how to put this brochure together in the following section.
For this example, let's look at the design elements and determine how we would put them together in a design:
- Determine the exact size of the brochure. For our example, we'll focus on creating the outside of an 8.5 x 11 tri-fold brochure. Specifically, the cover design of this brochure is as follows:
- Design a basic front cover layout. We'll use the following one for the cover:
- Decide on the elements we will use for the design. For ours, we'll have a photograph, company logo, brochure title, and some additional copy.
Now we need to figure out what elements go where and which graphic types will work best. Determine what type of graphics each of our design elements should be to best suit our needs (and the design) and make sure we have the files in that format.
- Photographs naturally have a lot of colors and gradients, and are often taken in a fixed size from a digital camera. That said, the files are rasterized bitmaps and can be in any number of file formats—including
.tif, .jpg, .gif, or.png, and are larger in size. Photographs don't lend themselves to being vector graphics.
- Logos should be portable, so that they can look clean at any size and resolution. The graphics themselves are often simple with less color variation and therefore lend themselves to being vector graphics as opposed to bitmaps. We'll use a graphic-based on one in the Openclipart.org collection, which will be explained later, as an example for a company logo. You can use files of the SVG, AI, or EPS format.
- The company name/title and copy will be text, which is a font and vector graphic. It can still be scaled to accommodate both the boldness of the company name and also be a body copy for the brochure:
Take all of the elements we defined—both bitmaps and vector graphics—and create the outside design of the brochure as follows:
This chapter was dedicated to teaching you the basics about vector graphics and how they differ from bitmap images. We learned how vector graphics are resolution-independent and why we might want to use them in design, how Inkscape supports Scalable Vector Graphics (SVG), which is an open format, and the advantages of using these types of open graphics instead of proprietary. We also took some practical time learning to distinguish when it is best to use vector graphics and when raster images are needed.
Now it is time to learn how to install Inkscape 0.48 and begin creating vector graphics of our
