What do you get with eBook?

Instant access to your Digital eBook purchase

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Buy Now

Inkscape Beginner's Guide

Chapter 1. Getting Started with Vector Graphics

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.

Programs that use vector graphics

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.

Vector formats

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:

Adobe Photoshop (.psd): This includes vector layers such as text, shapes, and paths
Adobe Acrobat Portable Document Format (.pdf): This contains vector data and bitmap images in different forms
The Encapsulated Post Script file (.eps): This, again, can hold both vector data and bitmap images

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.

Scalable Vector Graphics

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.

Advantages of an open-standard vector format

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.

Additional advantages of SVG vector images over proprietary formats

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.

Disadvantages of vector graphics over non-vector formats

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.

Description

Learning to use Inkscape, an exciting open-source vector graphics program, broadens your software toolkit as a graphic designer. Using practical, real-world examples, you'll learn everything about the software and its capabilities so you'll be able to design anything from logos to websites.Inkscape Beginner's Guide is a practical step-by-step guide for learning this exciting vector graphics software. Not only will it take you through each menu item and toolbar, but you will also learn about creating complex shapes, text styling, filters, working with images, extensions, and the XML editoróall using real world examples.The book starts with an overview of vector graphics and how best to use them when designing for digital and print mediums. Then we install Inkscape and start learning all the ins and outs of the software. You'll build your first vector graphic while learning best practices for using layers, and build simple and complex objects with shapes and paths that will ultimately become exciting graphics to be used in your designs. Beyond designing sample logos and brochures while learning the software, you'll also learn how to use filters, install and use extensions, and the ins-and-outs of SVG and the XML Editor in Inkscape.

What you will learn

Explore Inkscape by taking a tour of the software: menu by menu, toolbar by toolbar A primer for what vector graphics are and how best they are used in design Manage project files and discover what file types work best in Inkscape Build your first vector graphic in Inkscapeóand then make that simple shape more complex by combining it with others, and changing fill or stroke colors Transform objects to paths, use stroke to paths, and even track bitmaps using the Path Effect editor Make 2D graphics come to life by using filters Import, render, and trace images. Raster images to vector, and learn how to export these images for best use in print or digital design Explore what templates and extensions to add to Inkscape and install other Open Source plugins, scripts, extensions, and templates.

What do you get with eBook?