Inkscape Series Special Edition

Full Circle THE INDEPENDENT MAGAZINE FOR THE UBUNTU LINUX COMMUNITY

INKSCAPE SERIES SPECIAL EDITION

INKSCAPEINKSCAPE VolumeVolume TwoTwo Parts 8-14 Full Circle Magazine is neither affiliated, with nor endorsed by, Canonical Ltd. Full Circle Magazine Specials About Full Circle Find Us Full Circle is a free, Website: independent, magazine http://www.fullcirclemagazine.org/ dedicated to the Ubuntu family of Linux operating systems. Forums: Each month, it contains helpful http://ubuntuforums.org/ how-to articles and reader- forumdisplay.php?f=270 submitted stories. IRC: #fullcirclemagazine on Full Circle also features a Welcome to another 'single-topic special' chat.freenode.net companion podcast, the Full Editorial Team Circle Podcast which covers the Continuing our Inkscape series by Mark Crutch, all you magazine, along with other budding artists can work through the features of this Editor: Ronnie Tucker news of interest. (aka: RonnieTucker) immensely capable vector graphics application in this [email protected] compilation of Inkscape series Parts 8-14, from issues #68 through 74. Webmaster: Rob Kerfia Please note: this Special Edition (aka: admin / linuxgeekery- is provided with absolutely no Please bear in mind the original publication date; current [email protected] warranty whatsoever; neither versions of hardware and software may differ from those Editing & Proofreading the contributors nor Full Circle illustrated, so check your hardware and software versions Mike Kennedy, David Haas, Magazine accept any before attempting to emulate the tutorials in these special Gord Campbell, Robert Orsino responsibility or liability for loss editions. You may have later versions of software installed or or damage resulting from Our thanks go to Canonical and the readers choosing to apply this available in your distributions' repositories. many translation teams around the content to theirs or others world. computers and equipment. Enjoy!

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. full circle magazine HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 88

f you've been following this of the parts and perform your or your objects are too close series from the start, you operations on them together and you want to select should now be quite simultaneously. only some of them. In these cases, I comfortable with ellipses, you can use Inkscape's 'touch rectangles and stars. You should Last time you learnt how to select' mode: just hold down the be able to construct some quite select two objects at once by ALT key as you click and drag your complex paths using the Boolean holding SHIFT as you click on the mouse around, drawing a red line operations, then manipulate them second one. If you continue to hold as you go. When you release the Unfortunately, there's not with the Node tool. You can give SHIFT while clicking on more mouse button any objects that always a blank area of the canvas your objects colours, gradients and objects, they will each be added to were touched by the red line will nearby. In the case of our hat, if it's patterns, as well as apply markers, the selection. Holding it while be selected. If you want to add to in situ on the snowman, then you'll thickness and different end caps to clicking on an already selected the existing selection, hold down probably have the background their strokes. In short, you've got object will remove it from the SHIFT as well. rectangle in the way. If you try to enough of a toolkit that you can selection. This approach is useful drag a selection box by starting on create quite complex drawings, when you want to select just a few another object you'll just end up should you wish. In this instalment objects, or if they're widely spaced moving that object instead. The we will look at ways to manage with other objects in between. answer is to hold SHIFT as you that complexity. In the case of our hat, however, start dragging your mouse, which will prevent Inkscape from As the number of objects in a there's a much better way. The selecting the object you started drawing increases, it becomes less objects are clustered closely on. Remember, SHIFT-CLICK will and less likely that manipulating together which makes it easy to add to your selection (or remove them one at a time will be simply drag a selection box around from it), but SHIFT-DRAG will acceptable. If you want to scale or them, as follows: click and hold on On many Linux systems you'll prevent the clicked object being rotate our snowman's hat, for a blank area of the canvas, then quickly discover a small issue if you added. example, you will quickly become drag the mouse diagonally away try to use ALT-drag for the touch frustrated if you have to first from the starting point. You'll see selection mode: often window One limitation with a selection manipulate the brim, then the side, a rectangle – the selection box – managers use ALT-drag as a way to box is that it will select only then the top – and that's without which follows the mouse pointer. move the window around without objects that are entirely enclosed considering the shadows and When you release the button, having to drag the title bar, which within the box. This can be a highlights we added last time. A anything inside the rectangle will prevents ALT-drag from working in problem if you're zoomed right in, far better approach is to select all be selected. Inkscape. There are three ways to

full circle magazine #68 22 �� HOWTO - INKSCAPE Pt8 deal with this limitation: entity, such as our snowman's hat. • Disable the ALT-drag option in You can even create a group that your window manager's contains only one object, but preferences. This isn't always easy usually grouping is used to make it to do, and will usually have the easier to work with several objects show you when you're inside a individually. side-effect of disabling it for all that form a single part of your group by temporarily placing its ID windows from all applications, not image. into the layers pop-up, to the right Setting a flat color for a group's just Inkscape. of the fill, stroke and opacity fill or stroke does exactly what you • Hold down the SUPER key (that's Often you will want to modify settings (shown above). might expect. But try setting a what it's nominally called in the an object that is in your group. One gradient or a pattern to the whole Linux world, but you probably approach is to select the group, Having entered a group, any group and you might be a little know it better as the WINDOWS then use Object > objects that you paste from the surprised by the results. Suppose key) in addition to ALT or SHIFT- Ungroup (CTRL-SHIFT-G) clipboard will be added to the you want to apply a gradient from ALT. or the Ungroup toolbox contents of that group, as will any white to black across a number of • Start dragging or SHIFT-dragging button (shown left) in new objects you create. There are objects: you might be tempted to as though you are dragging a order to break the group apart into various ways to exit a group, but group them and then apply the selection box, then press ALT to its constituent parts. After the most common is simply to gradient to the group. This is the switch to touch select mode during modifying your object you can re- select an object that's outside the actual result you would get: the process. You can press and group them again. It's usually group. You can also double-click on release ALT as often as you like beneficial to edit an object without a blank area of the canvas if you during this process – it's only when the rigmarole of ungrouping and don't want to select something the mouse button is released that then re-grouping afterwards, so else, or select 'Go To Parent' from Inkscape will check it to determine Inkscape lets you 'enter' a group in the context menu. whether to use the selection box order to work with its contents or touch select mode. directly. The fastest way to enter a In addition to moving and As you can see, although the group is simply to double-click on transforming a group, you can also gradient stops cover the whole With several objects selected, it, though there is an option at the adjust its fill and stroke settings. width of the group, Inkscape has it's time to combine them into a bottom of the right-click context Setting the fill or stroke will apply actually just used a small portion 'group' using the toolbox icon, the menu for 'Enter Group g#20'. those values to every object in the of it – the amount covered by the CTRL-G shortcut, or selecting the Inkscape assigns a unique identifier group, as will a change to the first object – and then repeated Object > Group menu item. Now to a group, so this menu entry will stroke width. Unfortunately, none that small amount for every other you can move, scale, skew and be slightly different for each of of the other line style attributes object in the group. So instead of rotate all the objects as though them. can be set like this, so if you want white to black across four objects, they were a single item. This makes Once you have entered a group, all the objects in your group to we get white to grey across one it easy to combine the separate you are free to edit its contents have a dashed stroke you'll need to object, which is then used for the shapes that make up a single individually. The status bar will enter the group and set each one

full circle magazine #68 23 �� HOWTO - INKSCAPE Pt8 other three as well. The same when you then also apply an select and move, rather than the back up to the page level. problem applies for patterns: each opacity of 50% to the group itself. dozens you had to contend with object has a copy of the first previously. But we can make things Nested groups follow the same object's pattern applied, rather Rather than the opacity being simpler still by creating a group rules as any other groups when it than there being one pattern that applied to each individual object – that is made up of our three comes to fill and stroke colors, covers the whole group. There is as a fill color would be – the circles existing groups. Just select all opacity and blur. Set a fill color on an answer to both these problems retain their individual opacities and three and create a group in the a nested group and all the objects, in the form of clipping paths, but then the group opacity is applied same way that we did earlier in the no matter how deeply nested, will that's a more complex subject for to the whole. The same rules apply article. be set to that color, but opacity another day. for blurs: the individual objects are and blur is applied to each object blurred first, then the group-level With a single group containing and group separately. The bottom section of the Fill blur is applied to the whole all the parts of our snowman, it's and Stroke dialog does have an collection. trivial to move him around. If you Although groups are an effect at the group level. If you set need to adjust the position or invaluable tool for managing the opacity or blur for a group, it It may seem counter-intuitive to angle of his hat, just enter the complex drawings, they're not applies to the whole group as a have fill and stroke affect groups in group and you can interact with without their limitations. In single object. This is in addition to one way, while blur and opacity the three groups inside it. Select particular, a group occupies a any opacity or blur that has been affect them in a different way. In one of those and you can enter it single 'slot' in the z-order stack – applied to individual objects, which practice, it's something you get again to get down to the individual so you can't interleave the objects lets you create complex used to very quickly, and the objects. Inkscape lets you nest from one group with those from combinations of effects. In this artistic benefits of having multiple your groups as deeply as you like. another. In this image, I've drawn a image, the top row shows two levels of opacity and blur easily series of interleaved squares on groups, one with no opacity on its outweigh any short-term To exit a deeply nested group, the left. The right-hand image objects, and one with the green confusion. you can use the same techniques shows the result of combining just circle set to 50% opacity. The as for a single group. To step back the red squares into a group: the bottom row shows what happens Groups are invaluable for out of your groups one level at a entire group takes up just a single gathering related objects together time, you can double-click on a slot in the z-order, occupying the into a single easily-managed entity blank area of the canvas, or use the same slot as the topmost object in – such as the case of the context menu's Go To Parent the group. snowman's hat at the start of this option. To jump directly to a article. You could also create particular level, you only need to another group for the snowman's click on another object or group head, and a third for his body and that's at that level. Alternatively, arms. Moving him around on your you can use the layers pop-up on drawing is now a lot simpler as the status bar to jump straight to there are only three objects to any ancestor group, or even right

full circle magazine #68 24 �� HOWTO - INKSCAPE Pt8

If you imagine these objects as be useful – a rope that snakes a stack of paper sheets, it's a bit around both the front and back of CCOODDEEWWOORRDD more obvious what's happened. another object couldn't be grouped as a single object – but in Every number in the grid is 'code' for a letter of the alphabet. The following image shows the Thus the number '2' may correspond to the letter 'L', for instance. interleaved sheets stacked on top many other cases groups will simplify your use of Inkscape All - except the difficult codeword puzzles - come with a few of each other, followed by the letters to start you off rearrangement of the z-order once significantly. the red sheets are grouped together.

If you enter a group, you can rearrange the z-order of the objects, but only relative to one another. The group as a whole will always just take up a single slot. In this case, it means that the three red sheets are indivisible – you can't move one of the orange sheets between them without either ungrouping the red sheets, Mark has been using Linux since or moving the orange sheet inside 1994, and uses Inkscape to create two webcomics, 'The Greys' and Solutions are on the second last page. the group as well. This limitation 'Monsters, Inked' which can both be will prevent you from creating found at: Puzzles are copyright, and kindly provided by, some groups that might otherwise http://www.peppertop.com/ The Puzzle Club- www.thepuzzleclub.com

full circle magazine #68 25 �� HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 99

aving covered the use of for managing layers: the Layer objects in your layer. A second click can re-order your layers, which in H groups in Inkscape, we're now menu, a dedicated Layers dialog, will unlock the layer. turn alters the z-index of the going to move onto 'layers' – which and some quick access tools in the objects in your drawing. You may are just like groups, but with a status bar at the bottom of the There are several ways to recall that the contents of groups different interface for screen. Let's start with the Layers create a new layer, but the most can't be interleaved, with each manipulating them. There's a good dialog which can be opened via the obvious is simply to click the green group occupying a single “slot” in reason for the similarities between Layer > Layers... menu entry, by + button at the bottom of the the z-index. The same applies to groups and layers: the SVG format pressing CTRL-SHIFT-L, or by using Layers dialog. You'll be prompted layers: you can move them relative has no concept of layers, so the View Layers to give the layer a name, and pick a to one another, but their contents Inkscape actually implements each button on the toolbox: position for it. For now, let's call can't mix. layer as a group with some extra our new layer “Layer 2” and bits of custom data. The layers dialog is fairly position it above the current layer. When creating a new layer you sparse, consisting of a list of layers can use the Position pop-up to at the top, and a few buttons and The Layers dialog should choose whether the new layer other widgets at the bottom. For a appear much as you would expect, should be above or below the new file, only a single layer will be with two entries: “Layer 2” is at the current layer. There is also a third present, usually named “Layer 1.” top of the list and “Layer 1” is option, which is to make it a Create a few objects in your below it. The order of layers in the sublayer of the current layer. drawing, and they will become part dialog represents their z-index Sublayers appear below their of that layer. Now try clicking on within the drawing such that layers parent layer in the dialog, slightly the little eye icon to the left of lower in the list will appear behind indented. The parent gains a small “Layer 1,” and you'll notice that layers that are higher in the list. triangle icon that can be used to your objects vanish. Click it again Check that “Layer 2” is selected show or hide the list of sublayers. and they reappear. Click on the and draw some more objects, In the same way that groups can lock icon and you'll be prevented ensuring that they overlap the be nested down to deep levels, so from making any changes to the previous objects from “Layer 1” it's possible to add sublayers to and are in a suitably contrasting sublayers – although going more color. You should be able to see than two or three levels deep is that your new objects are always likely to confuse more than it drawn on top of the old objects. helps. This image shows our “Layer There are three parts of the Using the arrow icons at the 1” with the addition of three Inkscape interface that are used bottom of the Layers dialog, you sublayers, two of which also have

full circle magazine #69 20 �� HOWTO - INKSCAPE Pt9 sublayers of their own, one of that you can easily move around. which is collapsed using the So which is better, grouping or triangle button: layers? As is so often the case, the answer is “it depends”. For something like the snowman I would tend to use groups: the ability to move the whole character as one is usually more useful than the ability to easily hide it. For the background of the image – the snow, sky and stars – I would probably use a layer: you're construct an additional sublayer each part of his body. Now you unlikely to move the background below the others to hold any have the ability to hide or lock much, but you may want to hide it background content. individual parts of him by using the icons next to each sublayer, or to when working on the snowman, or lock it to prevent it accidentally The biggest advantage of quickly hide or lock the whole being modified once you're happy sublayers is as a means to quickly character using the icons by the with it. hide several parts of an image at parent layer. once. Considering our snowman Let's look at a real-world from previous instalments, you You may recall that the previous example (shown below). This is a could easily construct a parent instalment suggested grouping the The order of sublayers within comic strip I drew in 2010, layer to contain the snowman as a various parts of the snowman the dialog follows the same rules together with the corresponding whole, with several sub-layers for together to create a single object as for normal layers: the lower Layers dialog. You can download down the dialog a sublayer is, the the Inkscape source file from the lower down the z-index its URL at the end of the article. contents will be in the drawing. From this, it follows that a Working from the top layer sublayer's content will always downwards, we first have a Frame appear below any content in its layer which is locked. This is a thick parent layer. Although this makes black border that sits as the logical sense, it's often not what topmost layer in most of my you want artistically, so I find that comics and hides the ends of lines the best approach to using that extend outside the main sublayers is simply to keep the image, meaning that I don't have parent layer empty of objects and to be quite so careful when

full circle magazine #69 21 �� HOWTO - INKSCAPE Pt9 drawing objects near the edge of Content layer is just a holder for image much more quickly. One odd omission from the the scene. Next is the text layer, various sub-layers. Inside each of context menu is the option for which holds both the caption for those sub-layers the objects are When drawing a complex deleting a layer. This is available via this comic, and the box it sits in. grouped, such that the Towers image, you may find that you need the Layer > Delete Current Layer That layer is also locked to prevent layer contains three groups, one to move objects between layers. menu entry, or by the red minus me accidentally moving it when for each layer. That allowed me to This can't be done from the layers button in the dialog. Be aware that editing other parts of the comic. move each tower individually, dialog, but is instead handled from this will delete the layer and whilst still giving me the option to the Layer menu or a keyboard everything within it, including sub- hide them all at once. shortcut. Select the objects you layers, without any further want to move, and use Layer > prompting. If you do inadvertently The Background layer holds Move Selection to Layer Above delete a layer then all is not lost, as everything else that's visible within (SHIFT+PageUp) or Layer > Move Edit > Undo (CTRL-Z) will restore it. the comic image, including the Selection to Layer Below arena walls and hilly horizon. The (SHIFT+PageDown). Let's finish our tour of the Border layer, locked once again, Layers dialog with the controls at holds a common border that I use Another option you'll see in the the bottom. The Opacity slider with my comics which contains Layer menu is Duplicate Current works in the same manner as the license information, the URL of my Layer. This not only duplicates the one in the Fill and Stroke dialog, website and a drop shadow. layer itself, but also all the objects but applies to all the objects in the within that layer, including any sub- selected layer. It's yet another of Those last two layers are layers and their contents. Because Inkscape's many ways of making particularly interesting because the duplicated objects appear objects invisible. they both contain heavily blurred directly on top of the originals, it's objects. Blurs are implemented as not always obvious that copies The Blend Mode pop-up defines SVG filters, which will be covered in have been created, so be a little how the selected layer is drawn a future article, but at this stage careful when using this option. You with respect to the layers below it. it's useful to know that filters can can also duplicate layers directly Much like the Blur slider in the Fill be mathematically intensive, and inside the Layers dialog by using and Stroke dialog, it's actually a Below that is the Content layer. can significantly slow Inkscape's the context menu on the layer shortcut for adding a filter. The In many of my comics this is used redraw speed. One of the best name. Although the context menu blend modes on offer are Normal, as a normal layer in its own right, ways to avoid this slowdown is to offers up a “Rename Layer...” Multiply, Screen, Darken, and with all the main characters and hide the layer that contains the option, it's usually easier to just Lighten – although there's rarely props being placed directly into it. filtered objects. Inkscape doesn't click on a selected layer name much reason to use anything other In this case, I wanted to be able to have to draw them, so it doesn't do which turns it into an editable than Normal. I know of one artist hide various parts of the drawing the mathematical operations field. who puts all the shadows in his as I was working on it, so the required, and it can render your images into a single layer which is

full circle magazine #69 22 �� HOWTO - INKSCAPE Pt9 set to Multiply, and I've also used LINKS the Multiple mode to produce an anaglyph 3D image of the space The comics used in this tutorial, shuttle. In this image I've used that plus their Inkscape source files, can anaglyph space shuttle to be downloaded from: demonstrate the differences http://www.peppertop.com/fc/ between the blend modes, but the actual effect produced is highly dependent on the colours you start out with.

There's one aspect of layer management left to mention: the pop-up menu on the status bar. This allows you to quickly switch between layers and to hide, show, lock, or unlock the current layer using the buttons to the left of the pop-up.

The previous instalment introduced this pop-up in the context of managing groups. This deeply nested collection of groups dangerous, resulting in hidden is a side-effect of the fact that as it provides a mechanism to jump groups that you can't easily reveal layers are just groups with a bit of back through several steps at once. or locked groups that you can't extra metadata. In this case, the readily unlock. For this reason I name in the button will actually be tend to only use the Hide and Lock the internal ID of the group, and buttons in the Layers dialog, or at Mark has been using Linux since you can use the menu to exit a least double-check that I'm not 1994, and uses Inkscape to create two webcomics, 'The Greys' and group by switching to a parent Beware, however, that using the inside a group before using them group, or straight to a different 'Monsters, Inked' which can both be Hide or Lock buttons when you've from the status bar. found at: layer entirely. This can be got a group selected can be http://www.peppertop.com/ particularly useful if you're in a

full circle magazine #69 23 �� HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 1100

he previous instalment that the Inkscape developers have compatibility with users' files if the If you can't see anything, check T included a comic strip which little direct control over what code was simply excised. The that your color and opacity was made in Inkscape using paths, makes it into the specification, and Inkscape developers took the settings make sense via the status ellipses and rectangles with flat what doesn't. pragmatic decision to leave the bar. Congratulations, you've just fills and gradients – all elements Flowed Text feature in place, even created some SVG Text. If you that have been covered in this The first version of the SVG though using it will create files switch back to the Select tool series so far. But it also included spec was released in 2001, that other applications will not using the tool palette or F1 key, one other type of object which is followed by version 1.1 in 2003. fully understand. you can move, scale, skew and an essential element of many After that, several years were rotate your text object in the same images: text. spent working on version 1.2, As a result of this historical way as any other SVG element. which was to include many issue, Inkscape can create text in Because this type of text object Creating text objects in additions and improvements – two different forms: the SVG 1.1 conforms to SVG 1.1, it can be Inkscape isn't difficult, but does including additions to support text type, which doesn't automatically displayed or edited by various come with a few caveats that can which will wrap and reflow to fill flow into its container (which I'll be other applications. As you can see easily trip up beginners. Some of its container. The Inkscape referring to as SVG Text), and the from this image, even skewing and these are common to all vector developers spent quite some time SVG 1.2 type which does flow rotating the text object in Inkscape graphics programs, but the first implementing support for this (Flowed Text), but which doesn't (below) isn't enough to prevent it issue you're likely to face is “flowed text” format, fully conform to the SVG specification. displaying in Firefox (bottom): peculiar to Inkscape and involves a anticipating its official release in The problem arises because it's far brief history lesson… the new SVG standard. too easy to accidentally create Flowed Text, especially if you have Inkscape's native file format is Then SVG 1.2 withered and previous experience with other SVG, an open format specified by died. It never became a standard graphics applications. the World Wide Web Consortium and to this day – 8 years later! – (W3C). By using an open format, SVG 1.1 is still the latest official Let's get practical and Inkscape creates files that can be version of the SVG specification. actually create some viewed and edited, at least to This left Inkscape with the ability text. First select the Text some extent, in a wide range of to create objects that are tool by clicking its icon in the tool applications. This is a huge benefit compatible with only an aborted palette, or by pressing “T” or F8. to the user, whose files aren't spec, but, as this facility had made locked-in to being used just within it into a release version of the Now, simply click inside the Inkscape, but has the disadvantage software, it would break drawing window and start typing.

full circle magazine #70 23 �� HOWTO - INKSCAPE Pt10

Some other graphics If we load this SVG file into exactly the result you would described in previous articles. It applications require you to drag a Firefox, the result is a blank page. expect: must be a single object though, so rectangle on the canvas to contain Firefox ignores the Flowed Text can't be a group. You will also need your text. This is especially completely, and the same applies some text, but it doesn't matter common in desktop publishing to almost every other application. whether you create SVG Text or programs such as Scribus, where Remember, the difference Flowed Text at this stage. Select almost everything is defined by between creating SVG Text and both your shape and the text, and drawing a frame to contain it. You Flowed Text is as simple as then use the Text > Flow into can do this in Inkscape as well – whether you just click, or click- Frame menu to perform the magic. just select the Text tool then click drag. If you want to use your SVG Note that the status bar now and drag a rectangle onto the files in other applications, you describes your text object as canvas before typing. You've now should almost always just click “Linked flowed text”, and that you created a Flowed Text object. With when creating your text objects. If can modify your shape as much as the Text tool still active, and the you're in any doubt, select your you like, with the text re-flowing to Flowed Text object selected, you text object and check the status fit: should see a small square handle bar, which will describe the object at the bottom-left of the text as either “Text” or “Flowed text”. frame. By moving this handle you can change the size and shape of Despite the tone of the your frame, and the text will re- previous few paragraphs, there are flow automatically. The following sometimes valid reasons why you image shows the same Flowed would want to use Flowed Text. If Text object duplicated a couple of you don't want to use your times in Inkscape. The copies have Inkscape files in another had their frame sizes changed, and application, then the presence of The real advantage of Flowed you can easily see that the text has non-standard SVG code won't Text in Inkscape is that it can flow As with normal Flowed Text, moved around, and, in the case of affect you. Even if you do want to into shapes other than simple this will not be understood by the bottom-right frame, it has use your SVG files elsewhere, it can rectangles. First you will need a other SVG applications. You can been automatically truncated: sometimes be easier to create shape for the text to flow into: this still use Text > Convert to Text, Flowed Text during the drawing can be any of the simple Inkscape although with very complex paths stage, and then convert it to SVG primitives such as rectangles, you may find that the text shifts text using the Text > Convert to ellipses and stars, or it can be a around a lot during the conversion. Text menu entry just before you path element which allows you to Nevertheless, for labels and save the final version of your file. create complex shapes using all speech bubbles, the ability to Loading the file into Firefox gives the Boolean operations and node change your container shapes and editing tools that have been have the text re-flow to suit, can

full circle magazine #70 24 �� HOWTO - INKSCAPE Pt10 be a real time saver. appear using a couple of commercial comic fonts, and then how it appears on an Ubuntu box occur when you first open this can be used for any piece of text, that doesn't have those fonts menu: Inkscape shows a shortened but full justification (where the installed. version of it, with just a few fonts program tries to line up both the listed. If that happens, simply click start and end of every line) is There are four possible away from the menu to close it, available only for flowed text. You solutions to this problem: and then re-open it. Finally, you can convert fully justified flowed • Ensure that the required fonts may find that some fonts simply text into SVG text – which does a are present also on the destination Now that you know how to refuse to stay selected when surprisingly good job of machine. This may not be possible create basic text objects in their picked from this menu. I commonly maintaining the justification, but it if it's not your computer, or if the various forms, it's time to exert a have this problem with “Arial plays havoc with Inkscape's on- font licence prohibits it. little more control over the style of Black”, which Inkscape immediately page text editing if you need to your words. Most commonly, you'll replaces with a bold version “Arial”. subsequently change the content. want to choose a suitable font, set In this case, you can use the “Text its size, and perhaps change the and Font” dialog from the Text Having created your text justification. All of these options menu to select the stubborn objects in Inkscape, you may want are available from the Tool Control typeface, which will be used when to transfer the SVG file to another Bar, and, although they can be you click the Apply button. machine, or post it online. In doing changed at any time, it's often so, there's a good chance that easier to set them before you click The size drop-down lets you you'll run into a problem with (or click-drag) to place your text pick from a few predefined sizes, missing fonts. Text in SVG files is cursor to avoid problems with the all in units of “SVG pixels”. You can stored as a string of characters, focus being in the wrong place also type directly into this box to together with some style when you start to type. specify a different size, but there's information which contains the no way to use any other units. The font name. If an identically named The drop down menu to the left following two buttons are toggles, font isn't present on the of the toolbar lets you select a used to switch to bold or italic destination computer, the font. Inkscape can be a little fussy versions of the selected font – or a software used to display the file about its fonts, so you may find bold-italic version if both are will substitute it with an that some fonts on your system active. alternative, often with dramatic aren't available, especially those effects on the appearance of your that haven't been created by a Finally, there are four buttons image. The image right shows a professional type foundry. There's for setting the text's justification. couple of panels from one of my also an occasional glitch that can Left, centre and right justification comic strips, first as it should

full circle magazine #70 25 �� HOWTO - INKSCAPE Pt10 • Don't use the SVG format to paths, the text is just another transfer files to other systems. For collection of shapes in your SVG my comics, I always export a PNG file and no longer require the fonts version of the file to ensure that to be installed. my readers see a pixel-perfect representation of the image. This might sound like an ideal Exporting to other formats will be solution, but does come with a the subject of part 12 of this drawback: your “text” is no longer series. a text object, so can no longer be • Only use commonly available edited using the text Tool in fonts. This is not a perfect Inkscape. If you decide to use this solution, but may be viable in some approach I recommend performing circumstances. My “Greys” comics, the conversion to paths as late as for which I make the SVG files possible. You should also make a available to download, use the copy of the text object before you ubiquitous “Arial” font for this do so, in case you need to edit it reason. Even with that precaution, again at a later date. The text they often display poorly in a web object should then be put onto a browser, and although this hidden layer, dropped behind some approach makes it easier to open other object, made transparent, or the files in Inkscape, I still produce secreted away in some other PNG versions for the benefit of manner so that it doesn't interfere casual readers. with the rendering of the file on • Convert your text into paths the destination machine. before saving the file.

That last solution is as simple as selecting the text then the Path > Object to Path menu entry. In Inkscape 0.48, your text will be replaced with some identical Mark has been using Linux since looking paths, one for each letter, 1994, and uses Inkscape to create grouped together. Earlier versions two webcomics, 'The Greys' and simply produced a single 'Monsters, Inked' which can both be found at: composite path that contained all http://www.peppertop.com/ the letters. Once converted to

full circle magazine #70 26 �� HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 1111

n this instalment, we'll be respectively, and holding down the I continuing our investigation of Shift key whilst performing any of Inkscape's text tools. Previously, these movements will select the To begin with, you need to have you learned how to create SVG appropriate section of text. The some text to modify. If you're Text (compliant with the SVG 1.1 mouse isn't without its uses either: stuck for ideas as to what to type, spec, and supported in many other click to immediately position the why not try the Lorem Ipsum applications), and a couple of ways caret, or click and drag to select a extension, which will generate to create Flowed Text (not contiguous section of the text. paragraphs of the classic nonsense compatible with any official SVG Double-click to select a word, Latin text that typesetters spec, so practically restricted to triple-click to select a whole line. traditionally use as a placeholder. use within Inkscape). Whichever Simply select the Extensions > Text sort of text you use, when the Text With a portion of the text > Lorem Ipsum menu item, pick tool is selected, you are presented selected, it's time to play with the some values for the three fields, with the same Tool Control Bar. style. Start by setting the fill to a and click Apply. A Flowed Text Last time, we looked at the left different color, or perhaps adding object will be created on a new half of this toolbar, where you can a stroke. You can set the stroke- layer, with its flow box set to the differentiate it from the mouse select a font, size, style and width and join-type using the Fill size of the page. You may want to cursor or cursor keys on the justification. and Stroke dialog, but adding change the size of the flow box by keyboard). Alternatively, if the markers will have no effect. Other double-clicking on the text and Select tool is active, you can just We used these controls to parts of the dialog affect the text then moving the small diamond double click in the flowed text to choose the settings for an entire in different ways: you can set an handle at the bottom right, or you both position the caret and switch block of text at a time, but alpha level on the fill or stroke to could just make it flow into a new to the Text tool in one fell swoop. Inkscape also lets you apply most give it some transparency, but object using the Text > Flow into of them to individual words or changing the opacity setting has Frame menu that we looked at last With the caret happily flashing characters within a text object. The no effect. If you try to use blur, time. in the middle of your text, you obvious use for this is to gradients or patterns, you'll find should be able to move it around emphasise particular words by the whole text object is affected, With the Text tool selected, using the cursor keys, just as you making them bold, italic, or bold rather than just the selected click in the flowed text at the point would in a word processor. and italic, but you can also change section. Setting a dash style on the that you would like to place the Pressing the Home and End keys the font, size and color of parts of stroke will also affect the whole text editing cursor (from now on, will jump the caret to the start or your text, should you need to. text object, though you won't I'll use the term caret to end of the current line, notice it on any words that don't

full circle magazine #71 25 �� HOWTO - INKSCAPE Pt11 have a stroke applied. values are in pixels, but, in my experience, typing a value directly On the text control bar, you can into these – even if your document to investigate the less frequently The first of the spacing controls change the font for the selection, is set to use pixels as the default used icons and controls that affects the spacing between lines alter its size, or use the bold and units – results in the value being remain on the rest of the bar. in a paragraph of text. The value in italic buttons. The justification converted to something different. here is multiplied by the font size buttons work for only the whole In practice, it's not too great a The first of these you may in order to produce the final text object, not individual problem as it's rare to need recognise as Superscript and spacing. You can reduce this as low selections. This does, however, specific values in these fields. Subscript. Although you can apply as 0, in which case all the lines will mean that, if you want to left- More usually you will adjust them them to an entire text object, they be on top of each other, but it justify one paragraph and right- up and down to make your text a work best on a selection of just a doesn't allow negative values so justify the next, you'll have to split little tighter or looser. These fields few characters at a time. They have you can't use it as a way to make them into separate text objects. will allow you to enter negative the effect of reducing the font size your paragraphs run from bottom Nevertheless, by playing with values, if you really do want your for the selection, and adjusting the to top. Typically it's set to 1.25 for fonts, fills, strokes and more, you text to run backwards! text's baseline up or down. The normal paragraphs, though you can easily create some truly awful size can subsequently be modified may wish to adjust it for a looser or text designs. using the toolbar, but adjusting the tighter design. This image shows position isn't so straightforward, three paragraphs of our Lorem so although these buttons are Ipsum text, set to 0.75, 1.25 and useful for simple super- and sub- 2.0 respectively. scripts such as chemical formulae, they're not very useful if you want to finely position your text.

Fine positioning is precisely The next control is used to what the next six controls are all adjust horizontal kerning on SVG about. The first three work on both Text. Kerning is the term used to SVG Text and Flowed Text, describe the spacing between two whereas the last three are disabled individual characters. By adjusting for Flowed Text objects. The the kerning, you can arrange for former all deal with the general The next two controls are used characters to slot together a little spacing of your text, whereas the to set the standard spacing more neatly, giving a more latter allow fine control over between individual letters, and the Now that you've got the hang pleasing look to text, with fewer individual characters. spacing between words. The of positioning the caret and blank areas that can form visual tooltips claim that both these selecting parts of the text, it's time “rivers” of white on a page. Using

full circle magazine #71 26 �� HOWTO - INKSCAPE Pt11 this field is as simple as placing the with changing the font size, this for the whole text object, but worth using. The first is that the caret between the pair of letters can give you more fine-grained won't remove any changes to the Firefox developers have that you wish to kern, and then control than you get from using line, letter or word spacing specifically rejected the idea of entering a value to adjust the the Superscript and Subscript controls. supporting SVG fonts, due to their spacing. Negative values are most buttons. lack of some layout and commonly used, to encourage the The final buttons on the toolbar internationalisation features that second character to tuck-in to the The last of this group of let you switch between creating are available in other font formats. white space within the shape of controls lets you rotate individual horizontal and vertical text. In the Their concerns are certainly valid the first, but you can also use a characters, with the value being a latter case, the individual for a general purpose font format, positive value to force a pair of figure in degrees. Positive numbers characters are the right way up, but I think that misses some of the characters further apart. This rotate clockwise, negative but the words run vertically down advantages that SVG fonts can image shows the effect on a few numbers counter-clockwise. the page – as opposed to simply offer when used in an SVG image, pairs of characters with no kerning, Placing the caret will cause it to rotating the text object, in which and which no other format can. and then with a negative value. rotate just the following character. case the characters are also Selecting some text will rotate the rotated. An even bigger reason not to individual characters of the use SVG fonts, ironically, is selection, not the whole selection There's one big elephant in the Inkscape itself. Although it has an as one. It's not possible to select room which can't go unmentioned interface to help create them, it the rotation centre, but using the when discussing text and SVG files: has no mechanism to actually use Horizontal Kerning and Vertical SVG fonts. The SVG specification them once they've been created. After the Horizontal Kerning Shift controls can allow you to includes a font format where the The Font Editor, therefore, is control, there's a similar field for compensate for this if you need to. individual glyphs are defined using useful only if you're creating SVG adjusting the vertical position of standard SVG objects. In theory, fonts as an interim step towards your characters. If you simply In practice, the Horizontal this should allow fonts to be generating a TrueType or position the caret, then it shifts Kerning, Vertical Shift and created that contain colour and Postscript font using an the text from that point to the end Character Rotation controls are animations, and that can be application such as FontForge. of the line up or down. often best adjusted using keyboard dynamically changed by using Alternatively you can select shortcuts. Holding ALT while using standard Javascript code in a web specific characters or words to the cursor keys will adjust the browser – all while still presenting limit its effects – although, if your kerning and vertical shift, whilst understandable text content to selection spans more than one ALT-] and ALT-[ can be used for search engines. Mark has been using Linux since line, the behaviour can be a little character rotation. The Text > Although Inkscape contains a 1994, and uses Inkscape to create unexpected. Negative values in Remove Manual Kerns menu entry dedicated interface for creating two webcomics, 'The Greys' and this field will move your text will remove all the Horizontal SVG fonts, via the Text > SVG Font 'Monsters, Inked' which can both be found at: upwards, positive numbers will Kerning, Vertical Shift and Editor menu, there are a couple of http://www.peppertop.com/ move it downwards. Combined Character Rotation adjustments reasons why it's probably not

full circle magazine #71 27 �� HHOOWW--TTOO Written by Mark Crutch IInnkkssccaappee -- PPaarrtt 1122

reating images, diagrams and great for use as a master format, and its Gzipped counterpart, C drawings in Inkscape is all very but does mean that the file size is “Compressed Plain SVG”. These well, but, at some point, you are large, and it's saving a lot of will save you a few bytes and likely to need them in a format information that most other produce a purer version of the SVG other than Inkscape's own applications won't understand. that can be easier to work with if variation of SVG. Inkscape has you subsequently have to edit the many import and export formats, If the size of the file is your file by hand, or if you want to use it with the exact selection depending main concern, but you still want to on a site like Wikipedia—where on various external applications as preserve the Inkscape-specific simple SVG files are favoured over well. In this article I will introduce data, then you should use application-specific versions. the most common and most useful “Compressed Inkscape SVG”. This Although this might appear to be formats, generally found in the file has an svgz file extension, and is an ideal format for serving on the format popup of the File > Save the same as a standard Inkscape web, it does remove