Book Image

Inkscape Beginner's Guide

By : Bethany Hiitola
Book Image

Inkscape Beginner's Guide

By: Bethany Hiitola

Overview of this book

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.
Table of Contents (18 chapters)
14
B. Keyboard Shortcuts
15
C. Glossary of Terms
17
Index

XML Editor basics

Let's look at a more complicated Inkscape document that is populated with a web design. Then we can discuss the screen basics, the SVG code, and understand how we might be able to edit it for our use. The following screenshot shows the open Inkscape document and the associated SVG code, side-by-side.

XML Editor basics

As you select items in the SVG code, you will see that Inkscape selects the items in the design (and vice versa). Also, if you were to edit any of the object properties, all changes would happen in real time on the canvas. But let's not get ahead of ourselves. First we need to understand the basics of the XML Editor screen:

  • The structure or tree of the XML is shown on the left-hand side of the screen (see the following screenshot). This XML tree is the entire canvas shown in SVG code.
    XML Editor basics
  • A layer is essentially a node in the tree. If the layer contained drawn objects, there would be additional nodes embedded beneath the layer node. Each node represents an object on that...