Full Circledl.fullcirclemagazine.org/issueIS02_en.pdf'group' using the toolbox icon, the CTRL-G shortcut, or selecting the Object > Group menu item. Now you can move, scale, skew and

THE INDEPENDENT MAGAZINE FOR THE UBUNTU LINUX COMMUNITY

INKSCAPE SERIES SPECIAL EDITION

INKSCAPEINKSCAPEVolume TwoVolume Two Parts 8-14 Parts 8-14

Full Circle

Full Circle Magazine is neither affiliated, with nor endorsed by, Canonical Ltd.

Full Circle Magazine Specials

full circle magazine

The articles contained in this magazine are released under the Creative Commons Attribution-Share Alike 3.0 Unported license. This means you can adapt, copy, distribute and transmit the articles but only under the following conditions: You

must attribute the work to the original author in some way (at least a name, email or URL) and to this magazine by name ('full circle magazine') and the URL www.fullcirclemagazine.org (but not attribute the article(s) in any way that suggests that they endorse you or your use of the work). If you alter, transform, or build upon this work, you must distribute the resulting work under the same, similar or a compatible license.Full Circle Magazine is entirely independent of Canonical, the sponsor of Ubuntu projects and the views and opinions in the magazine should in no way be assumed to have Canonical endorsement.

Please note: this Special Edition is provided with absolutely no warranty whatsoever; neither the contributors nor Full Circle Magazine accept any responsibility or liability for loss or damage resulting from readers choosing to apply this content to theirs or others computers and equipment.

About Full Circle

Full Circle is a free, independent, magazine dedicated to the Ubuntu family of Linux operating systems. Each month, it contains helpful how-to articles and reader- submitted stories.

Full Circle also features a companion podcast, the Full Circle Podcast which covers the magazine, along with other news of interest.

Welcome to another 'single-topic special'Continuing our Inkscape series by Mark Crutch, all you budding artists can work through the features of this immensely capable vector graphics application in this compilation of Inkscape series Parts 8-14, from issues #68 through 74.

Please bear in mind the original publication date; current versions of hardware and software may differ from those illustrated, so check your hardware and software versions before attempting to emulate the tutorials in these special editions. You may have later versions of software installed or available in your distributions' repositories.

Enjoy!

Find Us

Website: http://www.fullcirclemagazine.org/

Forums: http://ubuntuforums.org/forumdisplay.php?f=270

IRC: #fullcirclemagazine on chat.freenode.net

Editorial Team

Editor: Ronnie Tucker (aka: RonnieTucker) [email protected]

Webmaster: Rob Kerfia (aka: admin / linuxgeekery- [email protected]

Editing & ProofreadingMike Kennedy, David Haas, Gord Campbell, Robert Orsino

Our thanks go to Canonical and the many translation teams around the world.

http://www.fullcirclemagazine.org/

http://ubuntuforums.org/forumdisplay.php?f=270

http://ubuntuforums.org/forumdisplay.php?f=270

mailto:[email protected]

mailto:[email protected]

full circle magazine #68 22 ��

HHOOWW--TTOOWritten by Mark Crutch IInnkkssccaappee -- PPaarrtt 88

Ifyou've been following thisseries from the start, youshould now be quitecomfortable with ellipses,

rectangles and stars. You shouldbe able to construct some quitecomplex paths using the Booleanoperations, then manipulate themwith the Node tool. You can giveyour objects colours, gradients andpatterns, as well as apply markers,thickness and different end caps totheir strokes. In short, you've gotenough of a toolkit that you cancreate quite complex drawings,should you wish. In this instalmentwe will look at ways to managethat complexity.

As the number of objects in adrawing increases, it becomes lessand less likely that manipulatingthem one at a time will beacceptable. If you want to scale orrotate our snowman's hat, forexample, you will quickly becomefrustrated if you have to firstmanipulate the brim, then the side,then the top – and that's withoutconsidering the shadows andhighlights we added last time. Afar better approach is to select all

of the parts and perform youroperations on themsimultaneously.

Last time you learnt how toselect two objects at once byholding SHIFT as you click on thesecond one. If you continue to holdSHIFT while clicking on moreobjects, they will each be added tothe selection. Holding it whileclicking on an already selectedobject will remove it from theselection. This approach is usefulwhen you want to select just a fewobjects, or if they're widely spacedwith other objects in between.

In the case of our hat, however,there's a much better way. Theobjects are clustered closelytogether which makes it easy tosimply drag a selection box aroundthem, as follows: click and hold ona blank area of the canvas, thendrag the mouse diagonally awayfrom the starting point. You'll seea rectangle – the selection box –which follows the mouse pointer.When you release the button,anything inside the rectangle willbe selected.

Unfortunately, there's notalways a blank area of the canvasnearby. In the case of our hat, if it'sin situ on the snowman, then you'llprobably have the backgroundrectangle in the way. If you try todrag a selection box by starting onanother object you'll just end upmoving that object instead. Theanswer is to hold SHIFT as youstart dragging your mouse, whichwill prevent Inkscape fromselecting the object you startedon. Remember, SHIFT-CLICK willadd to your selection (or removefrom it), but SHIFT-DRAG willprevent the clicked object beingadded.

One limitation with a selectionbox is that it will select onlyobjects that are entirely enclosedwithin the box. This can be aproblem if you're zoomed right in,

or your objects are too closetogether and you want to selectonly some of them. In these cases,you can use Inkscape's 'touchselect' mode: just hold down theALT key as you click and drag yourmouse around, drawing a red lineas you go. When you release themouse button any objects thatwere touched by the red line willbe selected. If you want to add tothe existing selection, hold downSHIFT as well.

On many Linux systems you'llquickly discover a small issue if youtry to use ALT-drag for the touchselection mode: often windowmanagers use ALT-drag as a way tomove the window around withouthaving to drag the title bar, whichprevents ALT-drag from working inInkscape. There are three ways to


HOWTO - INKSCAPE Pt8deal with this limitation:• Disable the ALT-drag option inyour window manager'spreferences. This isn't always easyto do, and will usually have theside-effect of disabling it for allwindows from all applications, notjust Inkscape.• Hold down the SUPER key (that'swhat it's nominally called in theLinux world, but you probablyknow it better as the WINDOWSkey) in addition to ALT or SHIFT-ALT.• Start dragging or SHIFT-draggingas though you are dragging aselection box, then press ALT toswitch to touch select mode duringthe process. You can press andrelease ALT as often as you likeduring this process – it's only whenthe mouse button is released thatInkscape will check it to determinewhether to use the selection boxor touch select mode.

With several objects selected,it's time to combine them into a'group' using the toolbox icon, theCTRL-G shortcut, or selecting theObject > Group menu item. Nowyou can move, scale, skew androtate all the objects as thoughthey were a single item. This makesit easy to combine the separateshapes that make up a single

entity, such as our snowman's hat.You can even create a group thatcontains only one object, butusually grouping is used to make iteasier to work with several objectsthat form a single part of yourimage.

Often you will want to modifyan object that is in your group. Oneapproach is to select the group,

then use Object >Ungroup (CTRL-SHIFT-G)or the Ungroup toolboxbutton (shown left) in

order to break the group apart intoits constituent parts. Aftermodifying your object you can re-group them again. It's usuallybeneficial to edit an object withoutthe rigmarole of ungrouping andthen re-grouping afterwards, soInkscape lets you 'enter' a group inorder to work with its contentsdirectly. The fastest way to enter agroup is simply to double-click onit, though there is an option at thebottom of the right-click contextmenu for 'Enter Group g#20'.Inkscape assigns a unique identifierto a group, so this menu entry willbe slightly different for each ofthem.

Once you have entered a group,you are free to edit its contentsindividually. The status bar will

show you when you're inside agroup by temporarily placing its IDinto the layers pop-up, to the rightof the fill, stroke and opacitysettings (shown above).

Having entered a group, anyobjects that you paste from theclipboard will be added to thecontents of that group, as will anynew objects you create. There arevarious ways to exit a group, butthe most common is simply toselect an object that's outside thegroup. You can also double-click ona blank area of the canvas if youdon't want to select somethingelse, or select 'Go To Parent' fromthe context menu.

In addition to moving andtransforming a group, you can alsoadjust its fill and stroke settings.Setting the fill or stroke will applythose values to every object in thegroup, as will a change to thestroke width. Unfortunately, noneof the other line style attributescan be set like this, so if you wantall the objects in your group tohave a dashed stroke you'll need toenter the group and set each one

individually.

Setting a flat color for a group'sfill or stroke does exactly what youmight expect. But try setting agradient or a pattern to the wholegroup and you might be a littlesurprised by the results. Supposeyou want to apply a gradient fromwhite to black across a number ofobjects: you might be tempted togroup them and then apply thegradient to the group. This is theactual result you would get:

As you can see, although thegradient stops cover the wholewidth of the group, Inkscape hasactually just used a small portionof it – the amount covered by thefirst object – and then repeatedthat small amount for every otherobject in the group. So instead ofwhite to black across four objects,we get white to grey across oneobject, which is then used for the


HOWTO - INKSCAPE Pt8other three as well. The sameproblem applies for patterns: eachobject has a copy of the firstobject's pattern applied, ratherthan there being one pattern thatcovers the whole group. There isan answer to both these problemsin the form of clipping paths, butthat's a more complex subject foranother day.

The bottom section of the Filland Stroke dialog does have aneffect at the group level. If you setthe opacity or blur for a group, itapplies to the whole group as asingle object. This is in addition toany opacity or blur that has beenapplied to individual objects, whichlets you create complexcombinations of effects. In thisimage, the top row shows twogroups, one with no opacity on itsobjects, and one with the greencircle set to 50% opacity. Thebottom row shows what happens

when you then also apply anopacity of 50% to the group itself.

Rather than the opacity beingapplied to each individual object –as a fill color would be – the circlesretain their individual opacities andthen the group opacity is appliedto the whole. The same rules applyfor blurs: the individual objects areblurred first, then the group-levelblur is applied to the wholecollection.

It may seem counter-intuitive tohave fill and stroke affect groups inone way, while blur and opacityaffect them in a different way. Inpractice, it's something you getused to very quickly, and theartistic benefits of having multiplelevels of opacity and blur easilyoutweigh any short-termconfusion.

Groups are invaluable forgathering related objects togetherinto a single easily-managed entity– such as the case of thesnowman's hat at the start of thisarticle. You could also createanother group for the snowman'shead, and a third for his body andarms. Moving him around on yourdrawing is now a lot simpler asthere are only three objects to

select and move, rather than thedozens you had to contend withpreviously. But we can make thingssimpler still by creating a groupthat is made up of our threeexisting groups. Just select allthree and create a group in thesame way that we did earlier in thearticle.

With a single group containingall the parts of our snowman, it'strivial to move him around. If youneed to adjust the position orangle of his hat, just enter thegroup and you can interact withthe three groups inside it. Selectone of those and you can enter itagain to get down to the individualobjects. Inkscape lets you nestyour groups as deeply as you like.

To exit a deeply nested group,you can use the same techniquesas for a single group. To step backout of your groups one level at atime, you can double-click on ablank area of the canvas, or use thecontext menu's Go To Parentoption. To jump directly to aparticular level, you only need toclick on another object or groupthat's at that level. Alternatively,you can use the layers pop-up onthe status bar to jump straight toany ancestor group, or even right

back up to the page level.

Nested groups follow the samerules as any other groups when itcomes to fill and stroke colors,opacity and blur. Set a fill color ona nested group and all the objects,no matter how deeply nested, willbe set to that color, but opacityand blur is applied to each objectand group separately.

Although groups are aninvaluable tool for managingcomplex drawings, they're notwithout their limitations. Inparticular, a group occupies asingle 'slot' in the z-order stack –so you can't interleave the objectsfrom one group with those fromanother. In this image, I've drawn aseries of interleaved squares onthe left. The right-hand imageshows the result of combining justthe red squares into a group: theentire group takes up just a singleslot in the z-order, occupying thesame slot as the topmost object inthe group.


Mark has been using Linux since1994, and uses Inkscape to createtwo webcomics, 'The Greys' and'Monsters, Inked' which can both befound at:http://www.peppertop.com/

HOWTO - INKSCAPE Pt8

If you imagine these objects asa stack of paper sheets, it's a bitmore obvious what's happened.The following image shows theinterleaved sheets stacked on topof each other, followed by therearrangement of the z-order oncethe red sheets are groupedtogether.

If you enter a group, you canrearrange the z-order of theobjects, but only relative to oneanother. The group as a whole willalways just take up a single slot. Inthis case, it means that the threered sheets are indivisible – youcan't move one of the orangesheets between them withouteither ungrouping the red sheets,or moving the orange sheet insidethe group as well. This limitationwill prevent you from creatingsome groups that might otherwise

be useful – a rope that snakesaround both the front and back ofanother object couldn't begrouped as a single object – but inmany other cases groups willsimplify your use of Inkscapesignificantly.

CCOODDEEWWOORRDD

Solutions are on the second last page.

Every number in the grid is 'code' for a letter of the alphabet.Thus the number '2' may correspond to the letter 'L', for instance.All - except the difficult codeword puzzles - come with a fewletters to start you off

Puzzles are copyright, and kindly provided by,The Puzzle Club - www.thepuzzleclub.com



Having covered the use ofgroups in Inkscape, we're now

going to move onto 'layers' – whichare just like groups, but with adifferent interface formanipulating them. There's a goodreason for the similarities betweengroups and layers: the SVG formathas no concept of layers, soInkscape actually implements eachlayer as a group with some extrabits of custom data.

There are three parts of theInkscape interface that are used

for managing layers: the Layermenu, a dedicated Layers dialog,and some quick access tools in thestatus bar at the bottom of thescreen. Let's start with the Layersdialog which can be opened via theLayer > Layers... menu entry, bypressing CTRL-SHIFT-L, or by usingthe View Layersbutton on the toolbox:

The layers dialog is fairlysparse, consisting of a list of layersat the top, and a few buttons andother widgets at the bottom. For anew file, only a single layer will bepresent, usually named “Layer 1.”Create a few objects in yourdrawing, and they will become partof that layer. Now try clicking onthe little eye icon to the left of“Layer 1,” and you'll notice thatyour objects vanish. Click it againand they reappear. Click on thelock icon and you'll be preventedfrom making any changes to the

objects in your layer. A second clickwill unlock the layer.

There are several ways tocreate a new layer, but the mostobvious is simply to click the green+ button at the bottom of theLayers dialog. You'll be promptedto give the layer a name, and pick aposition for it. For now, let's callour new layer “Layer 2” andposition it above the current layer.

The Layers dialog shouldappear much as you would expect,with two entries: “Layer 2” is at thetop of the list and “Layer 1” isbelow it. The order of layers in thedialog represents their z-indexwithin the drawing such that layerslower in the list will appear behindlayers that are higher in the list.Check that “Layer 2” is selectedand draw some more objects,ensuring that they overlap theprevious objects from “Layer 1”and are in a suitably contrastingcolor. You should be able to seethat your new objects are alwaysdrawn on top of the old objects.Using the arrow icons at thebottom of the Layers dialog, you

can re-order your layers, which inturn alters the z-index of theobjects in your drawing. You mayrecall that the contents of groupscan't be interleaved, with eachgroup occupying a single “slot” inthe z-index. The same applies tolayers: you can move them relativeto one another, but their contentscan't mix.

When creating a new layer youcan use the Position pop-up tochoose whether the new layershould be above or below thecurrent layer. There is also a thirdoption, which is to make it asublayer of the current layer.Sublayers appear below theirparent layer in the dialog, slightlyindented. The parent gains a smalltriangle icon that can be used toshow or hide the list of sublayers.In the same way that groups canbe nested down to deep levels, soit's possible to add sublayers tosublayers – although going morethan two or three levels deep islikely to confuse more than ithelps. This image shows our “Layer1” with the addition of threesublayers, two of which also have


HOWTO - INKSCAPE Pt9sublayers of their own, one ofwhich is collapsed using thetriangle button:

The order of sublayers withinthe dialog follows the same rulesas for normal layers: the lowerdown the dialog a sublayer is, thelower down the z-index itscontents will be in the drawing.From this, it follows that asublayer's content will alwaysappear below any content in itsparent layer. Although this makeslogical sense, it's often not whatyou want artistically, so I find thatthe best approach to usingsublayers is simply to keep theparent layer empty of objects and

construct an additional sublayerbelow the others to hold anybackground content.

The biggest advantage ofsublayers is as a means to quicklyhide several parts of an image atonce. Considering our snowmanfrom previous instalments, youcould easily construct a parentlayer to contain the snowman as awhole, with several sub-layers for

each part of his body. Now youhave the ability to hide or lockindividual parts of him by using theicons next to each sublayer, or toquickly hide or lock the wholecharacter using the icons by theparent layer.

You may recall that the previousinstalment suggested grouping thevarious parts of the snowmantogether to create a single object

that you can easily move around.So which is better, grouping orlayers? As is so often the case, theanswer is “it depends”. Forsomething like the snowman Iwould tend to use groups: theability to move the wholecharacter as one is usually moreuseful than the ability to easilyhide it. For the background of theimage – the snow, sky and stars – Iwould probably use a layer: you'reunlikely to move the backgroundmuch, but you may want to hide itwhen working on the snowman, orlock it to prevent it accidentallybeing modified once you're happywith it.

Let's look at a real-worldexample (shown below). This is acomic strip I drew in 2010,together with the correspondingLayers dialog. You can downloadthe Inkscape source file from theURL at the end of the article.

Working from the top layerdownwards, we first have a Framelayer which is locked. This is a thickblack border that sits as thetopmost layer in most of mycomics and hides the ends of linesthat extend outside the mainimage, meaning that I don't haveto be quite so careful when


HOWTO - INKSCAPE Pt9drawing objects near the edge ofthe scene. Next is the text layer,which holds both the caption forthis comic, and the box it sits in.That layer is also locked to preventme accidentally moving it whenediting other parts of the comic.

Below that is the Content layer.In many of my comics this is usedas a normal layer in its own right,with all the main characters andprops being placed directly into it.In this case, I wanted to be able tohide various parts of the drawingas I was working on it, so the

Content layer is just a holder forvarious sub-layers. Inside each ofthose sub-layers the objects aregrouped, such that the Towerslayer contains three groups, onefor each layer. That allowed me tomove each tower individually,whilst still giving me the option tohide them all at once.

The Background layer holdseverything else that's visible withinthe comic image, including thearena walls and hilly horizon. TheBorder layer, locked once again,holds a common border that I usewith my comics which containslicense information, the URL of mywebsite and a drop shadow.

Those last two layers areparticularly interesting becausethey both contain heavily blurredobjects. Blurs are implemented asSVG filters, which will be covered ina future article, but at this stageit's useful to know that filters canbe mathematically intensive, andcan significantly slow Inkscape'sredraw speed. One of the bestways to avoid this slowdown is tohide the layer that contains thefiltered objects. Inkscape doesn'thave to draw them, so it doesn't dothe mathematical operationsrequired, and it can render your

image much more quickly.

When drawing a compleximage, you may find that you needto move objects between layers.This can't be done from the layersdialog, but is instead handled fromthe Layer menu or a keyboardshortcut. Select the objects youwant to move, and use Layer >Move Selection to Layer Above(SHIFT+PageUp) or Layer > MoveSelection to Layer Below(SHIFT+PageDown).

Another option you'll see in theLayer menu is Duplicate CurrentLayer. This not only duplicates thelayer itself, but also all the objectswithin that layer, including any sub-layers and their contents. Becausethe duplicated objects appeardirectly on top of the originals, it'snot always obvious that copieshave been created, so be a littlecareful when using this option. Youcan also duplicate layers directlyinside the Layers dialog by usingthe context menu on the layername. Although the context menuoffers up a “Rename Layer...”option, it's usually easier to justclick on a selected layer namewhich turns it into an editablefield.

One odd omission from thecontext menu is the option fordeleting a layer. This is available viathe Layer > Delete Current Layermenu entry, or by the red minusbutton in the dialog. Be aware thatthis will delete the layer andeverything within it, including sub-layers, without any furtherprompting. If you do inadvertentlydelete a layer then all is not lost, asEdit > Undo (CTRL-Z) will restore it.

Let's finish our tour of theLayers dialog with the controls atthe bottom. The Opacity sliderworks in the same manner as theone in the Fill and Stroke dialog,but applies to all the objects in theselected layer. It's yet another ofInkscape's many ways of makingobjects invisible.

The Blend Mode pop-up defineshow the selected layer is drawnwith respect to the layers below it.Much like the Blur slider in the Filland Stroke dialog, it's actually ashortcut for adding a filter. Theblend modes on offer are Normal,Multiply, Screen, Darken, andLighten – although there's rarelymuch reason to use anything otherthan Normal. I know of one artistwho puts all the shadows in hisimages into a single layer which is



HOWTO - INKSCAPE Pt9set to Multiply, and I've also usedthe Multiple mode to produce ananaglyph 3D image of the spaceshuttle. In this image I've used thatanaglyph space shuttle todemonstrate the differencesbetween the blend modes, but theactual effect produced is highlydependent on the colours youstart out with.

There's one aspect of layermanagement left to mention: thepop-up menu on the status bar.This allows you to quickly switchbetween layers and to hide, show,lock, or unlock the current layerusing the buttons to the left of thepop-up.

The previous instalmentintroduced this pop-up in thecontext of managing groups. Thisis a side-effect of the fact thatlayers are just groups with a bit ofextra metadata. In this case, thename in the button will actually bethe internal ID of the group, andyou can use the menu to exit agroup by switching to a parentgroup, or straight to a differentlayer entirely. This can beparticularly useful if you're in a

deeply nested collection of groupsas it provides a mechanism to jumpback through several steps at once.

Beware, however, that using theHide or Lock buttons when you'vegot a group selected can be

dangerous, resulting in hiddengroups that you can't easily revealor locked groups that you can'treadily unlock. For this reason Itend to only use the Hide and Lockbuttons in the Layers dialog, or atleast double-check that I'm notinside a group before using themfrom the status bar.

LINKS

The comics used in this tutorial,plus their Inkscape source files, canbe downloaded from:http://www.peppertop.com/fc/



The previous instalmentincluded a comic strip which

was made in Inkscape using paths,ellipses and rectangles with flatfills and gradients – all elementsthat have been covered in thisseries so far. But it also includedone other type of object which isan essential element of manyimages: text.

Creating text objects inInkscape isn't difficult, but doescome with a few caveats that caneasily trip up beginners. Some ofthese are common to all vectorgraphics programs, but the firstissue you're likely to face ispeculiar to Inkscape and involves abrief history lesson…

Inkscape's native file format isSVG, an open format specified bythe World Wide Web Consortium(W3C). By using an open format,Inkscape creates files that can beviewed and edited, at least tosome extent, in a wide range ofapplications. This is a huge benefitto the user, whose files aren'tlocked-in to being used just withinInkscape, but has the disadvantage

that the Inkscape developers havelittle direct control over whatmakes it into the specification, andwhat doesn't.

The first version of the SVGspec was released in 2001,followed by version 1.1 in 2003.After that, several years werespent working on version 1.2,which was to include manyadditions and improvements –including additions to support textwhich will wrap and reflow to fillits container. The Inkscapedevelopers spent quite some timeimplementing support for this“flowed text” format, fullyanticipating its official release inthe new SVG standard.

Then SVG 1.2 withered anddied. It never became a standardand to this day – 8 years later! –SVG 1.1 is still the latest officialversion of the SVG specification.This left Inkscape with the abilityto create objects that arecompatible with only an abortedspec, but, as this facility had madeit into a release version of thesoftware, it would break

compatibility with users' files if thecode was simply excised. TheInkscape developers took thepragmatic decision to leave theFlowed Text feature in place, eventhough using it will create filesthat other applications will notfully understand.

As a result of this historicalissue, Inkscape can create text intwo different forms: the SVG 1.1type, which doesn't automaticallyflow into its container (which I'll bereferring to as SVG Text), and theSVG 1.2 type which does flow(Flowed Text), but which doesn'tconform to the SVG specification.The problem arises because it's fartoo easy to accidentally createFlowed Text, especially if you haveprevious experience with othergraphics applications.

Let's get practical andactually create sometext. First select the Text

tool by clicking its icon in the toolpalette, or by pressing “T” or F8.

Now, simply click inside thedrawing window and start typing.

If you can't see anything, checkthat your color and opacitysettings make sense via the statusbar. Congratulations, you've justcreated some SVG Text. If youswitch back to the Select toolusing the tool palette or F1 key,you can move, scale, skew androtate your text object in the sameway as any other SVG element.Because this type of text objectconforms to SVG 1.1, it can bedisplayed or edited by variousother applications. As you can seefrom this image, even skewing androtating the text object in Inkscape(below) isn't enough to prevent itdisplaying in Firefox (bottom):



Some other graphicsapplications require you to drag arectangle on the canvas to containyour text. This is especiallycommon in desktop publishingprograms such as Scribus, wherealmost everything is defined bydrawing a frame to contain it. Youcan do this in Inkscape as well –just select the Text tool then clickand drag a rectangle onto thecanvas before typing. You've nowcreated a Flowed Text object. Withthe Text tool still active, and theFlowed Text object selected, youshould see a small square handleat the bottom-left of the textframe. By moving this handle youcan change the size and shape ofyour frame, and the text will re-flow automatically. The followingimage shows the same FlowedText object duplicated a couple oftimes in Inkscape. The copies havehad their frame sizes changed, andyou can easily see that the text hasmoved around, and, in the case ofthe bottom-right frame, it hasbeen automatically truncated:

If we load this SVG file intoFirefox, the result is a blank page.Firefox ignores the Flowed Textcompletely, and the same appliesto almost every other application.Remember, the differencebetween creating SVG Text andFlowed Text is as simple aswhether you just click, or click-drag. If you want to use your SVGfiles in other applications, youshould almost always just clickwhen creating your text objects. Ifyou're in any doubt, select yourtext object and check the statusbar, which will describe the objectas either “Text” or “Flowed text”.

Despite the tone of theprevious few paragraphs, there aresometimes valid reasons why youwould want to use Flowed Text. Ifyou don't want to use yourInkscape files in anotherapplication, then the presence ofnon-standard SVG code won'taffect you. Even if you do want touse your SVG files elsewhere, it cansometimes be easier to createFlowed Text during the drawingstage, and then convert it to SVGtext using the Text > Convert toText menu entry just before yousave the final version of your file.Loading the file into Firefox gives

exactly the result you wouldexpect:

The real advantage of FlowedText in Inkscape is that it can flowinto shapes other than simplerectangles. First you will need ashape for the text to flow into: thiscan be any of the simple Inkscapeprimitives such as rectangles,ellipses and stars, or it can be apath element which allows you tocreate complex shapes using allthe Boolean operations and nodeediting tools that have been

described in previous articles. Itmust be a single object though, socan't be a group. You will also needsome text, but it doesn't matterwhether you create SVG Text orFlowed Text at this stage. Selectboth your shape and the text, andthen use the Text > Flow intoFrame menu to perform the magic.Note that the status bar nowdescribes your text object as“Linked flowed text”, and that youcan modify your shape as much asyou like, with the text re-flowing tofit:

As with normal Flowed Text,this will not be understood byother SVG applications. You canstill use Text > Convert to Text,although with very complex pathsyou may find that the text shiftsaround a lot during the conversion.Nevertheless, for labels andspeech bubbles, the ability tochange your container shapes andhave the text re-flow to suit, can


HOWTO - INKSCAPE Pt10be a real time saver.

Now that you know how tocreate basic text objects in theirvarious forms, it's time to exert alittle more control over the style ofyour words. Most commonly, you'llwant to choose a suitable font, setits size, and perhaps change thejustification. All of these optionsare available from the Tool ControlBar, and, although they can bechanged at any time, it's ofteneasier to set them before you click(or click-drag) to place your textcursor to avoid problems with thefocus being in the wrong placewhen you start to type.

The drop down menu to the leftof the toolbar lets you select afont. Inkscape can be a little fussyabout its fonts, so you may findthat some fonts on your systemaren't available, especially thosethat haven't been created by aprofessional type foundry. There'salso an occasional glitch that can

occur when you first open thismenu: Inkscape shows a shortenedversion of it, with just a few fontslisted. If that happens, simply clickaway from the menu to close it,and then re-open it. Finally, youmay find that some fonts simplyrefuse to stay selected whenpicked from this menu. I commonlyhave this problem with “ArialBlack”, which Inkscape immediatelyreplaces with a bold version “Arial”.In this case, you can use the “Textand Font” dialog from the Textmenu to select the stubborntypeface, which will be used whenyou click the Apply button.

The size drop-down lets youpick from a few predefined sizes,all in units of “SVG pixels”. You canalso type directly into this box tospecify a different size, but there'sno way to use any other units. Thefollowing two buttons are toggles,used to switch to bold or italicversions of the selected font – or abold-italic version if both areactive.

Finally, there are four buttonsfor setting the text's justification.Left, centre and right justification

can be used for any piece of text,but full justification (where theprogram tries to line up both thestart and end of every line) isavailable only for flowed text. Youcan convert fully justified flowedtext into SVG text – which does asurprisingly good job ofmaintaining the justification, but itplays havoc with Inkscape's on-page text editing if you need tosubsequently change the content.

Having created your textobjects in Inkscape, you may wantto transfer the SVG file to anothermachine, or post it online. In doingso, there's a good chance thatyou'll run into a problem withmissing fonts. Text in SVG files isstored as a string of characters,together with some styleinformation which contains thefont name. If an identically namedfont isn't present on thedestination computer, thesoftware used to display the filewill substitute it with analternative, often with dramaticeffects on the appearance of yourimage. The image right shows acouple of panels from one of mycomic strips, first as it should

appear using a couple ofcommercial comic fonts, and thenhow it appears on an Ubuntu boxthat doesn't have those fontsinstalled.

There are four possiblesolutions to this problem:• Ensure that the required fontsare present also on the destinationmachine. This may not be possibleif it's not your computer, or if thefont licence prohibits it.



HOWTO - INKSCAPE Pt10• Don't use the SVG format totransfer files to other systems. Formy comics, I always export a PNGversion of the file to ensure thatmy readers see a pixel-perfectrepresentation of the image.Exporting to other formats will bethe subject of part 12 of thisseries.• Only use commonly availablefonts. This is not a perfectsolution, but may be viable in somecircumstances. My “Greys” comics,for which I make the SVG filesavailable to download, use theubiquitous “Arial” font for thisreason. Even with that precaution,they often display poorly in a webbrowser, and although thisapproach makes it easier to openthe files in Inkscape, I still producePNG versions for the benefit ofcasual readers.• Convert your text into pathsbefore saving the file.

That last solution is as simple asselecting the text then the Path >Object to Path menu entry. InInkscape 0.48, your text will bereplaced with some identicallooking paths, one for each letter,grouped together. Earlier versionssimply produced a singlecomposite path that contained allthe letters. Once converted to

paths, the text is just anothercollection of shapes in your SVGfile and no longer require the fontsto be installed.

This might sound like an idealsolution, but does come with adrawback: your “text” is no longera text object, so can no longer beedited using the text Tool inInkscape. If you decide to use thisapproach I recommend performingthe conversion to paths as late aspossible. You should also make acopy of the text object before youdo so, in case you need to edit itagain at a later date. The textobject should then be put onto ahidden layer, dropped behind someother object, made transparent, orsecreted away in some othermanner so that it doesn't interferewith the rendering of the file onthe destination machine.



In this instalment, we'll becontinuing our investigation of

Inkscape's text tools. Previously,you learned how to create SVGText (compliant with the SVG 1.1spec, and supported in many otherapplications), and a couple of waysto create Flowed Text (notcompatible with any official SVGspec, so practically restricted touse within Inkscape). Whicheversort of text you use, when the Texttool is selected, you are presentedwith the same Tool Control Bar.Last time, we looked at the lefthalf of this toolbar, where you canselect a font, size, style andjustification.

We used these controls tochoose the settings for an entireblock of text at a time, butInkscape also lets you apply mostof them to individual words orcharacters within a text object. Theobvious use for this is toemphasise particular words bymaking them bold, italic, or boldand italic, but you can also changethe font, size and color of parts ofyour text, should you need to.

To begin with, you need to havesome text to modify. If you'restuck for ideas as to what to type,why not try the Lorem Ipsumextension, which will generateparagraphs of the classic nonsenseLatin text that typesetterstraditionally use as a placeholder.Simply select the Extensions > Text> Lorem Ipsum menu item, picksome values for the three fields,and click Apply. A Flowed Textobject will be created on a newlayer, with its flow box set to thesize of the page. You may want tochange the size of the flow box bydouble-clicking on the text andthen moving the small diamondhandle at the bottom right, or youcould just make it flow into a newobject using the Text > Flow intoFrame menu that we looked at lasttime.

With the Text tool selected,click in the flowed text at the pointthat you would like to place thetext editing cursor (from now on,I'll use the term caret to

differentiate it from the mousecursor or cursor keys on thekeyboard). Alternatively, if theSelect tool is active, you can justdouble click in the flowed text toboth position the caret and switchto the Text tool in one fell swoop.

With the caret happily flashingin the middle of your text, youshould be able to move it aroundusing the cursor keys, just as youwould in a word processor.Pressing the Home and End keyswill jump the caret to the start orend of the current line,

respectively, and holding down theShift key whilst performing any ofthese movements will select theappropriate section of text. Themouse isn't without its uses either:click to immediately position thecaret, or click and drag to select acontiguous section of the text.Double-click to select a word,triple-click to select a whole line.

With a portion of the textselected, it's time to play with thestyle. Start by setting the fill to adifferent color, or perhaps addinga stroke. You can set the stroke-width and join-type using the Filland Stroke dialog, but addingmarkers will have no effect. Otherparts of the dialog affect the textin different ways: you can set analpha level on the fill or stroke togive it some transparency, butchanging the opacity setting hasno effect. If you try to use blur,gradients or patterns, you'll findthe whole text object is affected,rather than just the selectedsection. Setting a dash style on thestroke will also affect the wholetext object, though you won'tnotice it on any words that don't


HOWTO - INKSCAPE Pt11have a stroke applied.

On the text control bar, you canchange the font for the selection,alter its size, or use the bold anditalic buttons. The justificationbuttons work for only the wholetext object, not individualselections. This does, however,mean that, if you want to left-justify one paragraph and right-justify the next, you'll have to splitthem into separate text objects.Nevertheless, by playing withfonts, fills, strokes and more, youcan easily create some truly awfultext designs.

Now that you've got the hangof positioning the caret andselecting parts of the text, it's time

to investigate the less frequentlyused icons and controls thatremain on the rest of the bar.

The first of these you mayrecognise as Superscript andSubscript. Although you can applythem to an entire text object, theywork best on a selection of just afew characters at a time. They havethe effect of reducing the font sizefor the selection, and adjusting thetext's baseline up or down. Thesize can subsequently be modifiedusing the toolbar, but adjusting theposition isn't so straightforward,so although these buttons areuseful for simple super- and sub-scripts such as chemical formulae,they're not very useful if you wantto finely position your text.

Fine positioning is preciselywhat the next six controls are allabout. The first three work on bothSVG Text and Flowed Text,whereas the last three are disabledfor Flowed Text objects. Theformer all deal with the generalspacing of your text, whereas thelatter allow fine control overindividual characters.

The first of the spacing controlsaffects the spacing between linesin a paragraph of text. The value inhere is multiplied by the font sizein order to produce the finalspacing. You can reduce this as lowas 0, in which case all the lines willbe on top of each other, but itdoesn't allow negative values soyou can't use it as a way to makeyour paragraphs run from bottomto top. Typically it's set to 1.25 fornormal paragraphs, though youmay wish to adjust it for a looser ortighter design. This image showsthree paragraphs of our LoremIpsum text, set to 0.75, 1.25 and2.0 respectively.

The next two controls are usedto set the standard spacingbetween individual letters, and thespacing between words. Thetooltips claim that both these

values are in pixels, but, in myexperience, typing a value directlyinto these – even if your documentis set to use pixels as the defaultunits – results in the value beingconverted to something different.In practice, it's not too great aproblem as it's rare to needspecific values in these fields.More usually you will adjust themup and down to make your text alittle tighter or looser. These fieldswill allow you to enter negativevalues, if you really do want yourtext to run backwards!

The next control is used toadjust horizontal kerning on SVGText. Kerning is the term used todescribe the spacing between twoindividual characters. By adjustingthe kerning, you can arrange forcharacters to slot together a littlemore neatly, giving a morepleasing look to text, with fewerblank areas that can form visual“rivers” of white on a page. Using



HOWTO - INKSCAPE Pt11this field is as simple as placing thecaret between the pair of lettersthat you wish to kern, and thenentering a value to adjust thespacing. Negative values are mostcommonly used, to encourage thesecond character to tuck-in to thewhite space within the shape ofthe first, but you can also use apositive value to force a pair ofcharacters further apart. Thisimage shows the effect on a fewpairs of characters with no kerning,and then with a negative value.

After the Horizontal Kerningcontrol, there's a similar field foradjusting the vertical position ofyour characters. If you simplyposition the caret, then it shiftsthe text from that point to the endof the line up or down.Alternatively you can selectspecific characters or words tolimit its effects – although, if yourselection spans more than oneline, the behaviour can be a littleunexpected. Negative values inthis field will move your textupwards, positive numbers willmove it downwards. Combined

with changing the font size, thiscan give you more fine-grainedcontrol than you get from usingthe Superscript and Subscriptbuttons.

The last of this group ofcontrols lets you rotate individualcharacters, with the value being afigure in degrees. Positive numbersrotate clockwise, negativenumbers counter-clockwise.Placing the caret will cause it torotate just the following character.Selecting some text will rotate theindividual characters of theselection, not the whole selectionas one. It's not possible to selectthe rotation centre, but using theHorizontal Kerning and VerticalShift controls can allow you tocompensate for this if you need to.

In practice, the HorizontalKerning, Vertical Shift andCharacter Rotation controls areoften best adjusted using keyboardshortcuts. Holding ALT while usingthe cursor keys will adjust thekerning and vertical shift, whilstALT-] and ALT-[ can be used forcharacter rotation. The Text >Remove Manual Kerns menu entrywill remove all the HorizontalKerning, Vertical Shift andCharacter Rotation adjustments

for the whole text object, butwon't remove any changes to theline, letter or word spacingcontrols.

The final buttons on the toolbarlet you switch between creatinghorizontal and vertical text. In thelatter case, the individualcharacters are the right way up,but the words run vertically downthe page – as opposed to simplyrotating the text object, in whichcase the characters are alsorotated.

There's one big elephant in theroom which can't go unmentionedwhen discussing text and SVG files:SVG fonts. The SVG specificationincludes a font format where theindividual glyphs are defined usingstandard SVG objects. In theory,this should allow fonts to becreated that contain colour andanimations, and that can bedynamically changed by usingstandard Javascript code in a webbrowser – all while still presentingunderstandable text content tosearch engines.

Although Inkscape contains adedicated interface for creatingSVG fonts, via the Text > SVG FontEditor menu, there are a couple ofreasons why it's probably not

worth using. The first is that theFirefox developers havespecifically rejected the idea ofsupporting SVG fonts, due to theirlack of some layout andinternationalisation features thatare available in other font formats.Their concerns are certainly validfor a general purpose font format,but I think that misses some of theadvantages that SVG fonts canoffer when used in an SVG image,and which no other format can.

An even bigger reason not touse SVG fonts, ironically, isInkscape itself. Although it has aninterface to help create them, ithas no mechanism to actually usethem once they've been created.The Font Editor, therefore, isuseful only if you're creating SVGfonts as an interim step towardsgenerating a TrueType orPostscript font using anapplication such as FontForge.



Creating images, diagrams anddrawings in Inkscape is all very

well, but, at some point, you arelikely to need them in a formatother than Inkscape's ownvariation of SVG. Inkscape hasmany import and export formats,with the exact selection dependingon various external applications aswell. In this article I will introducethe most common and most usefulformats, generally found in the fileformat popup of the File > SaveAs... dialog. Let's start with a verycommon file type amongstInkscape users: SVG.

You may not have given muchthought to SVG as an exportformat, other than knowing thatit's Inkscape's default file type. YetInkscape actually offers sixvariations of SVG in its Save As...dialog, each making differenttrade-offs between file size andcontent. The first, simply referredto as “Inkscape SVG”, is thestandard Inkscape format, and isthe one you should probably use tostore the master copies of yourInkscape drawings. It preserves allthe Inkscape-specific data, which is

great for use as a master format,but does mean that the file size islarge, and it's saving a lot ofinformation that most otherapplications won't understand.

If the size of the file is yourmain concern, but you still want topreserve the Inkscape-specificdata, then you should use“Compressed Inkscape SVG”. Thishas an svgz file extension, and isthe same as a standard InkscapeSVG file, but compressed using theGzip algorithm. This can typicallyreduce the file size by fifty percentor more. Compressed files aremore prone to data loss if the filebecomes corrupted, andsometimes won't display inapplications that are otherwisehappy to render SVG files. Someweb browsers won't render themwhen loaded as local files, despitebeing happy to accept them whenissued from a web server.

Most other applications won'tunderstand the Inkscape-specificdata in an SVG file, so you can alsosave a version with this strippedout. This is the “Plain SVG” option,

and its Gzipped counterpart,“Compressed Plain SVG”. Thesewill save you a few bytes andproduce a purer version of the SVGthat can be easier to work with ifyou subsequently have to edit thefile by hand, or if you want to use iton a site like Wikipedia—wheresimple SVG files are favoured overapplication-specific versions.Although this might appear to bean ideal format for serving on theweb, it does remove <script>elements, which limits its appealfor some web content.

If you really want to removeevery redundant byte from yourfiles, then the “Optimised SVG”option (below right) is the one togo for. This runs the outputthrough a Python script called“scour” which is also available as astand-alone application. Itpresents a dialog to let you fine-tune the optimisations it willperform, and can take a while torun if the file is complex.

Getting the best out of Scourrelies on some knowledge aboutthe structure of SVG files. There's


HOWTO - INKSCAPE Pt12no compressed version of the“Optimised SVG” format availablefrom within Inkscape's save dialog,but you can manually Gzip theresultant SVG file for the sameeffect.

The final SVG format is“Compressed Inkscape SVG withmedia”. This actually creates a zipfile (not Gzip) which contains anInkscape SVG file, plus copies ofany linked media. The linked mediaare typically bitmap images thathave been added to a drawing, butnot embedded. Adding bitmapgraphics is a subject we'll becovering later in this series. Thisformat is useful for transferring anInkscape drawing, and all its linkedmedia, to another machine, but,ironically, it can't be opened by acopy of Inkscape on the receivingend. Instead, the zip file has to bedecompressed, and only then canthe included SVG file be opened.

As a comparison between thesizes of these SVG variants, I saveda copy of the snowman drawingfrom part nine of this series ineach format. I also did the samefor one of my longer comic strips.The “Compressed Optimised SVG”was manually compressed using“gzip -9 filename.svg” to give the

best compression, and thefilename extension then changedfrom “svg.gz” to “svgz”. Finally Ialso exported both files to PNGformat to show the difference(shown above) in size betweenbitmap and vector graphics.

As you can see, the differencesbecome more significant as thecomplexity and size of the imageincrease; however, we're stilltalking about relatively smallsavings in these days of multi-terabyte hard drives. Saving plain,optimised or compressed files isgenerally only worth doing if youhave a specific reason orrequirement – such as wanting tohand edit the files, or use them ona site like Wikipedia. If you've gotplenty of space on your web server,it's not even worth compressingyour files for online use: insteadensure that your web serversoftware is configured to gzip thedata on the fly. In my own case, I

use compressed Inkscape formatfor the files that can bedownloaded from my website –with over 200 comics available todownload, it helps keep storagecosts down – but I use theuncompressed Inkscape formatwhen storing files locally.

After SVG, the most commonexport format is probably PNG.This is a bitmap format that can beviewed by almost all web browsersand graphics programs. It's theonly standard bitmap format thatInkscape can export to, so if youwant to convert your image to aJPEG, TIFF, Windows BMP file or

any other type of bitmap graphicyour first step will be to create aPNG and then convert it in anotherapplication.

A very common—andunderstandable—mistake that newInkscape users make is to use the“Cairo PNG” option from the File >Save As... dialog. Unfortunately,this is almost never the right wayto create PNGs, as it doesn'tsupport transparency or filters.Instead you should use the File >Export Bitmap... menu entry, whichwill open the PNG export dialog.

The four buttons at the top ofthe dialog are handy shortcuts forchoosing what part of your imageyou would like to export: the wholepage, a rectangle large enough toenclose the whole drawing – whichcould be larger or smaller than thepage, a rectangle large enough toenclose all the objects youcurrently have selected, or a

Format Snowman ComicInkscape SVG 172KB 849KBPlain SVG 154KB 769KBOptimised SVG 133KB 504KBCompressed Inkscape SVG 93KB 274KBCompressed plain SVG 90KB 261KBCompressed Optimised SVG 87KB 209KBPNG exported at 90dpi 211KB 1400KB


HOWTO - INKSCAPE Pt12custom rectangle whose size is setby the x0, x1, y0 and y1coordinates. You can also specify acustom rectangle using x0, y0,Width and Height, in which casethe x1 and y1 figures will beupdated automatically.

Usually everything that's visibleon screen and which lies within thespecified rectangle is exported. Ifyou want only the selected objector group exported, without anybackground elements, you cancheck the “Hide all exceptselected” box at the bottom of thedialog. If you have more than oneobject or group selected, you canuse the “Batch export” checkboxto save each of them to a separatefile.

The “Bitmap Size” part of thedialog allows you to set the Widthand Height of the PNG file that willbe created. Alternatively, you canset the “dots per inch” or “dpi”,which will also change the Widthand Height fields. Increasing thedpi will produce a file that is larger,with more pixels; reducing the dpiwill result in a smaller file withfewer pixels. 90dpi is usually goodfor web graphics, but you mightwant to use 300dpi for a file that isgoing to be printed. If you want it

printed twice as large, use 600dpiinstead, or 150dpi for half the size.The rule here is the same as with adigital camera: more pixels equalsmore detail, but a bigger file size.

The last part of this dialog, the“Filename” section, is a littledeceptive. You can type a path andname, although whatever nameyou use, Inkscape will alwaysproduce a PNG file. Alternatively,you can click on the “Browse...”button to bring up a file selector.The catch with this is that the fileselector has a “Save” button whichdoesn't actually save the file.Instead it simply puts the selectedpath and filename into the“Filename” field, but the imageisn't actually created on disk untilyou click the “Export” button.Exporting is usually quite fast, butcan take a while for large dpivalues, or if the image containscomplex filters.

Moving back to the “Save As...”file selector, the “PortableDocument Format”, “Postscript”and “Encapsulated Postscript”options are all variations on atheme. These are most usefulwhen creating files for a printbureau, as they often expect toreceive these “industry standard”

formats. They all present a verysimilar looking dialog in which toset a few options.

The most important options are“Convert texts to paths” and“Rasterise filter effects”. Theformer will automatically convertyour text objects into paths withinthe exported file, which preventsproblems caused by using fonts onyour machine that aren't presenton the target machine. None ofthese formats support the filtereffects – including the simple blur– that SVG offers, so if you don'tchoose to “rasterise” these, thecorresponding objects will simplybe omitted from the file.Rasterising consists of creating abitmap version of the filteredcontent, so, much like the ExportBitmap dialog, there's a setting forthe dpi. Once again a high value inhere will produce more detail inthe output file. If you're creating a

PDF to view on a computer screen,then 90dpi may be sufficient, but,if you want a high quality print, oryou expect your readers to zoomin, you should probably set thishigher.

An alternative way to create aPDF for a print bureau is to importyour SVG file into Scribus and usethat to generate the PDF file.Unfortunately, Scribus doesn'tsupport all of Inkscape's SVGfeatures, so this approach may notwork for more complex drawings.My experience has been that it'soften easiest to simply export ahigh resolution PNG file and let theprint bureau deal with getting itinto a suitable format for theirsystems. The downside of thisapproach, other than the large fileyou'll need to create, is that yourvectors are rasterized prematurely,so you probably won't get thesmoothest possible output. Forsmall items, that may not matter,but, if your plan is to createposters or billboards, it can makeall the difference. Inkscape's PNGfiles are all in RGB format, andsome particularly fussy bureausmay complain that they wantCMYK files. Even if they're happyto work with PNG files, do makesure you get a proof from them



HOWTO - INKSCAPE Pt12first to check that the colors arewhat you expect.

There are a variety of otherexport formats available in theSave As... file selector, servingvarious niches. Each has its ownlimitations on what Inkscape andSVG features can be successfullyrepresented. For more detailsabout many of these formats readthe Exporting Files section ofTavmjong Bah's excellent Inkscapemanual (link at the end of thearticle). Given the target audienceof Full Circle Magazine, though,there's one more format thatshould be discussed: “GIMP XCFmaintaining layers”.

This export format is availableonly if GIMP can be found in thesystem path. For most Linuxsystems, this will be doneautomatically if you install theapplication using your packagemanager, or if it's installed as partof the default installation. Onceit's available to you, selecting itwill present a dialog with a fewoptions for the export.

The “Save Guides” and “SaveGrid” options will include anyInkscape guides, and the firstrectangular grid, as their GIMPcounterparts. We haven't talkedabout guides and grids yet in thisseries, but, if you've stumbledacross them on your own, theseoptions might be useful. Inpractice, the guides may be useful,but the grid will appear muchdenser in The GIMP than in theoriginal Inkscape file, and can evenbe so dense as to obscure theimage entirely! The “SaveBackground” option is also aproblem as it applies the documentbackground color (set in File >Document Properties... withinInkscape) to every single layer,rather than just creating a singlebackground layer. In practice,therefore, I would suggest leavingat least the latter two optionsunchecked unless you have aparticular reason to do otherwise.

Loading the resultant XCF fileinto The GIMP will produce exactlywhat you expect – a bitmaprepresentation of your Inkscapefile with each of the Inkscapelayers present in a correspondingGIMP layer... almost.Unfortunately, any sub-layers are

automatically rendered into theparent layer, rather than remainingas separate layers in The GIMP. Ifyou want to keep your sub-layersseparate, you'll need to promotethem to top-level layers before youexport the file. The images createdby this export option are fixed at90dpi – if you want a differentsized image then you have to scalethe objects within Inkscape first.

An alternative to creating anXCF file from Inkscape is to insteadload an SVG file directly into TheGIMP. This will not preserve anylayers, flattening the image downto a single layer instead. Somemore advanced SVG features, orInkscape-specific additions, maynot render correctly. Loading anSVG file into The GIMP does,however, let you set the size of therendered bitmap

The “Import paths” option willcreate a GIMP path for each objectin your SVG file. This can be useful

if you wish to convert one or morepaths into a selection in order tolimit the scope of your GIMP edits.Generally, it's worth checking thisbox – you can simply ignore thepaths if you don't need them, but,having them available can makesome editing tasks a lot easier. The“Merge imported paths” option isless useful. It creates a path foreach object in the SVG file, thenmerges them all into a single path.Given that you can combinemultiple paths into a singleselection within The GIMP, leavingthem separate still allows you tocreate a single unified path if youneed to.

LINKS:Scour: https://launchpad.net/scour

“Exporting Files” in the Inkscapemanual:http://tavmjong.free.fr/INKSCAPE/MANUAL/html/File-Export.html



One thing you've probablynoticed about Inkscape

throughout the course of thisseries is that it operates with astack of objects placed one aboveanother—the “z-order.” You canintroduce some overall structureby putting objects into groups andlayers, but it's simply not possibleto create an element that passesboth over and under anotherobject.

Because we're mostlyinterested in creating an artisticresult, the solution is simply to putthe object on top, and thenremove the part that would behidden behind our second object.One way to remove the hiddenpart is to edit the paths that makeup our problem object, perhapsusing Boolean operations to cutout sections. But what if the objectis complex, such as a group ofmany individual elements thatwould each have to be cutindependently? A better option inthis case would be to tell Inkscapethat it should draw only certainareas, and leave the otherstransparent for the background

object to show through. This isdone by creating a path andapplying it as a “clip path.” Anypart of the object inside the pathwill be visible, whereas the partsthat are outside it are not drawn atall.

As an example let's resurrectthe snowman from earlier in thisseries, and give him a scarf. Wecould do this simply by drawing thefront part of the scarf onto thesnowman, but, in this contrivedcase, our scarf already has a backsection that we need to clip out ofthe final image.

Despite its name, a clip pathdoesn't have to be a path. It can beany closed shape—a rectangle,oval, star or polygon. It can also bea complex path which contains

multiple sub-paths (more on thatlater). Whatever shape you use,however, it must be a single objectrather than a group or a selectionof several elements.

Defining a clip path is simple:just draw the path or shape youwant, ensuring that it sits higher inthe z-order than the object orgroup you want to clip. Now selectboth the clip path and the objectyou wish to clip, and use the “SetClip” option on the right-clickcontext menu. The Object > Clip >

Set menu item has the sameeffect. Here, I've created an ovalon top of the scarf. I usually drawmy clipping paths with a brightgreen stroke and no fill—so thatthey're easy to spot against theitem I'm clipping. The color isirrelevant, as is the thickness ofthe stroke: it's purely the shape ofthe path that is used to define theclip.

Unfortunately the result of thisclip is the opposite of the effectwe're looking for. Instead ofremoving the back of the scarf,we're left with nothing but theback of the scarf!



Remember, clipping alwaysleaves the content inside the clippath visible, and hides everythingoutside it. There's no way to invertthis behaviour to hide the contentof the path, so, instead you have towork around it by creating a morecomplex path that does the job foryou. This is an ideal opportunity touse the Boolean operations thatwere introduced in Part 7 of thisseries. In this case, you just draw arectangle that's large enough toencompass the whole of the scarfthen, ensuring the oval is on top,use Path > Difference to “subtract”the oval from the rectangle.

At first glance this may appearto simply be a rectangle with anoval on top of it, but, in practice,

this is now a single complex path.“Complex” simply means that it'smade up of separate sub-paths.The rectangle is one sub-path, andthe oval is a second sub-path, butthe whole object is still consideredto be a single path and cantherefore be used for clipping.Once again, only the area insidethe path will remain, but in thiscase “inside” consists of the spacebetween the oval and therectangle; “outside” is anythingbeyond the rectangle, or within theoval. Try setting a fill if thedifference between inside andoutside isn't clear. Clipping withthis complex path gets us muchcloser to our desired result.

Remember, this is a purelyvisual effect. The original scarfremains the same, it's just that

parts of it are not being drawn.You can undo the effect at anytime by selecting a clipped objectthen choosing Release Clip fromthe context menu, or Object > Clip> Release from the main menu bar.This will return the object to itsnormal appearance, and also makethe clipping path visible again.

If we add the scarf to thesnowman you can see that we'reclose to the effect we're lookingfor, but there are still parts of thescarf that are being drawn in frontof the character's head.

The problem is that the clippath we've used was just anapproximation, and needs to betweaked to more closely match thesection that we want to hide. Inearlier versions of Inkscape, the

only way to do this was to releasethe clip, adjust the path, then re-clip. Even with the latest version,that's still the only option if yourclip “path” is actually a rectangle,star, oval or other primitive object.Thankfully, our Boolean operationhas turned our combination of anoval and a rectangle into a fullyfledged path, which can be editedwithout releasing the clip since the0.48 version of Inkscape.

To switch to editing mode, youhave to select the clipped object(as usual keep an eye on the statusbar where a clipped object will bedescribed as such), then switch tothe node tool—using the icon onthe tool palette or by pressing “n”or F2. You should now see yourclipping path rendered as a singlepixel green path, regardless of thecolor or thickness of the originalpath. The green color in this modeis the reason I choose bright greenwhen drawing my path in the firstplace—it helps to reinforce themental link between green pathsand clipping. If you don't see thegreen path, make sure the “Showclipping path(s) of selectedobject(s)” button (in the toolcontrol palette) is active.

From this point you can just edit



HOWTO - INKSCAPE Pt13the path using the node tools thatwere described in Part 6. You mayfind it easier to reduce the opacityof your clipped object so that youcan see how your clipping pathrelates to the objects behind. Thechanges to the clipping path willbe applied live, so you can see theresult as you work. Once you'vefinished editing, return yourobject's opacity to 100% if youneed to, and change to theselection tool to hide the greenclipping path and see your results.Remember that the spacebar canbe used as a convenient shortcutto switch to the selection tool andthen back to the node tool duringediting, if you find that the nodesare obscuring your view.

With a little time spent on nodeediting, you should be able toadjust the clipping path to followthe head of the snowman andmake the scarf seem to disappearbehind it.

Sometimes you will be able toget away with a simple rectangleor oval as a clipping path, butusually it's worth pressing CTRL-SHIFT-C (or using Path > Object toPath) before setting the clip,simply for the advantage of beingable to edit the path withouthaving to un-set then re-set theclip.

Because clipping always resultsin a hard edge, it can be used tocreate some effects that wouldotherwise be very difficult toproduce. Wherever you have tostop a blur from spilling over anedge, clipping can provide asolution. Consider something like asemicircle which should only beblurred on the curved edge and cutcleanly on thestraight edge.Withoutclipping thiswould be a verydifficult imageto create.

The ability to cut out parts of ablurred object can lead to someparticularly interesting effectswhen used with text. For each ofthese examples, I've created twocopies of a text object. One of

them is blurred, whilst the otherhas been converted to a path andused to clip the blurred version.Different arrangements of clippath, blur, text, background andcolor choices can produce a varietyof results.

Clipping can also be used towork around the limited selectionof gradient types. Inkscape followsthe SVG standard in supportingonly linear and radial gradients,but other types can often beemulated through careful use ofblurred objects and clip paths. Inthis example, a few blurredsegments and a donut-shapedclipping pathmakes anacceptablesubstitute fora conicalgradient whendrawing a CD.

Although clipping has manyuses, and is a technique that's wellworth getting to grips with,sometimes you need a little moresubtlety than the hard edges itcreates. Next time, we'll look atmasking—a related technique thatlets you fade objects out gradually,rather than just stopping themdead at the edge of a path.



Transparency – or itscounterpart, opacity – is such a

fundamental concept in Inkscapethat it was one of the earliesttopics covered in this series. Backin Part 3 you were introduced tothe Opacity spin-box on the statusbar, which gives you the ability toset a single transparency level fora whole object, or even a group ofobjects.

If you want a single object tohave varying opacity – such ascompletely transparent at one end,and opaque at the other – you canuse a gradient for the fill andstroke. But what about doing thesame for a group of objects? Youcould set suitable gradients oneach individual item in the groupseparately to get the desiredeffect, but if your group containslots of objects, then that approachbecomes tedious very quickly.

The solution to this problem ismasking. This is a technique thatuses a grayscale image as a meansof specifying the opacity ofanother object or group. Any whitesections in the image cause that

part of the masked object toappear opaque. Black sectionscause that part to appeartransparent. And grays in-betweenresult in varying levels of opacity.

Let's look at an example. In thisimage (below) I've placed a solidred circle on top of a solid greenbackground. The green is theremainly to show the effect moreclearly. On top of the circle is arectangle with a white-black-whitegradient. Using this rectangle as amask for the circle gives the resultof a clipped circle that fades fromopaque to transparent and back toopaque.

Note that anything outside themask is clipped. In that respect,masking could even be used as analternative to the clip paths thatwere introduced in the previouspart of this tutorial. Draw yourmask entirely in white – or in solidshades of white and black – andany parts of the masked objectwhich lie outside the mask, orwhich are colored black, will beclipped. Usually I recommend usinga clip path in preference to a maskif you simply want a hard clippededge, but, as we will see later inthis article, there are times whenit's easier to use a mask.

You may recall that the fill andstroke of a clip path are irrelevantto the final effect on the clippedobject. With masks, however, theopposite is true – the color of eachindividual pixel is taken intoaccount when calculating its effecton the masked object, so fills andstrokes have significance.

Did I say pixel? In a vectorformat? In practice, there are fewcases where an SVG file is actuallyused as a purely vector format. Ifyou want to display an SVG file ona computer screen, or print it to aninkjet or laser printer, it isultimately converted to pixels.Masking takes place during thisfinal output step, so although themask may be made up of vectorobjects, and the item beingmasked is also a vector, the finalresult is really generated only atthe point that those vectors areconverted to individual pixels fordisplay or printing.

Using a thick-stroked rectangleand strictly black or white pixels,it's easy to see the differencebetween a clip path and the use of


HOWTO - INKSCAPE Pt14a mask to simulate clipping. In thetop pair of images, I've used therectangle as a clip path, and youcan see that the result is alignedwith the center line of the stroke.The second and third pairs ofimages show the rectangle beingused as a mask, with only whiteparts remaining and black partsbecoming transparent. It'sespecially clear in the last pair thatthe stroke has an effect.

By now it should be clear thatclipping and masking are similaroperations, so it's not reallysurprising that Inkscape exposesthem with the same user interface.Just as with clipping, the maskingobject must be on top of the objectto be masked, in terms of the z-index. You then select both itemsand choose Set Mask from thecontext menu, or Object > Mask >Set from the main menu. Releasinga masked object is as simple asselecting it (it will be described as“Masked” in the status bar) thenchoosing Release Mask from thecontext menu, or Object > Mask >Release from the main menu. Justas with clip paths, it is possible toedit masks using the node toolwithout releasing them first, butgenerally there's little benefit todoing so as you can edit only theoutline shape of the path, not itscolor.

As you've seen, using agrayscale gradient as a mask givesyou some control over the opacityof the masked object. You may alsorecall that Inkscape offers aselection of black and whitepatterns in its Fill & Stroke dialog,plus a few grayscale bitmap fillpatterns. These may previously

have seemed rather limiting, buttheir monochrome nature makesthem perfect for use as a mask.

The checkerboard pattern is agood example of a situation whereit's easier to use a mask than a clippath. This same effect could beachieved by clipping with acomplex path, but it's probably notworth the extra effort. Lookingclosely at the checkerboard, you'llnotice that the fill isn't made up ofblack and white squares, but ratherwhite and transparent. Using whiteand transparent can sometimes

make it easier to see what parts ofan object you are masking: whiteareas will remain visible, andtransparent areas will be clipped. Atranslucent white area will havethe same effect as a shade of gray.It may seem counter-intuitive tocover the parts of the object thatyou want to keep, and expose theparts that will be hidden, but that'sthe way that masking has beendefined in the SVG specification, sothat's the way it works in Inkscape.

Because clip paths are definedby a boundary and a concept ofwhat's inside and outside thatboundary, it's possible to use onlya single path or object to define aclipping shape. Masks, on the otherhand, are concerned with only thecolor of pixels, so it doesn't reallymatter whether your mask is madeup of a single object or a wholeload of objects inside a group. Thisallows you to create complexarrangements of colors andpatterns which would beimpossible to reproduce using asingle path.

This example uses a groupmade up of a few random objectsas a mask. You can see that therepeating radial gradient of therectangle, made up of a white-to-



HOWTO - INKSCAPE Pt14transparent transition, results in asimilar pattern being visible fromthe masked red circle. But byadding extra black and whitefeatures to the mask group, youcan “override” the pattern withexplicit sections of transparencyand opacity. One thing to note isthe place where the black linecrosses the white one: because theblack line is on top, the pixels atthat position are black, so that partof the masked object istransparent. It doesn't matterwhat's going on within the group,all that matters is the color of thefinal pixels. This may not be thebest piece of abstract art in theworld, but it would have been a lotharder to draw without usingmasks.

Although you can use masks tocreate complex arrangements ofclipping and transparency,probably the most common use issimply to add “feathering” to theedges of a group so that it fadesinto the background. In that caseall you need for your mask designis a strongly blurred white ellipse,as demonstrated in this whollyunseasonal greeting card design.

Throughout this article I'vereferred to masks as beinggrayscale images. That's notstrictly true – a mask can be anycombination of colors that youwant. However, anything otherthan white, black or gray will beconverted into a grayscale imagebefore it's used as a mask. This canmake it difficult to predict the

exact effect of a color on theresultant opacity, so I recommendusing pure grayscales whendrawing your masks in almost allcases.

Documents

Full Circledl.fullcirclemagazine.org/issueIS02_en.pdf'group' using the toolbox icon, the CTRL-G shortcut, or selecting the Object > Group menu item. Now you can move, scale, skew and