Index for my Inkscape tutorial series in Full Circle Magazine

For several years I have been writing a monthly column about the Free vector graphics program Inkscape, for Full Circle Magazine. Many of the articles have also been collated into “Special Editions”. Both these and the original magazines are available to download free of charge.

I used to maintain an index of the articles at the semi-official Inkscape forum, however that has been offline for several weeks now, and may never return. So it makes sense to host an index here, on my own site. The individual articles are listed first, in case you only want some reference material for a single topic. If you are planning to work through the tutorials from the start then the Special Editions may be more useful: these are listed at the bottom of the page.

Individual Magazines

  1. Full Circle Magazine #61: Getting started. Circles, arcs and segments.
  2. Full Circle Magazine #62: Basic keyboard shortcuts. Rectangle tool.
  3. Full Circle Magazine #63: The status bar. Stars and polygons.
  4. Full Circle Magazine #64: The colour palette, and the Fill & Stroke dialog.
  5. Full Circle Magazine #65: Fill & Stroke dialog continued. Gradients.
  6. Full Circle Magazine #66: Introducing paths.
  7. Full Circle Magazine #67: Paths and Boolean operations.
  8. Full Circle Magazine #68: Selections and groups.
  9. Full Circle Magazine #69: Layers and blend modes.
  10. Full Circle Magazine #70: The text tool. Flowed vs normal text.
  11. Full Circle Magazine #71: Text tool continued: controls on the toolbar.
  12. Full Circle Magazine #72: Saving to different formats. Exporting bitmaps.
  13. Full Circle Magazine #73: Clipping.
  14. Full Circle Magazine #74: Masking.
  15. Full Circle Magazine #75: Using bitmap graphics.
  16. Full Circle Magazine #76: Manually tracing a logo (Guidelines, snapping, colour picker).
  17. Full Circle Magazine #77: Manually tracing a cartoon sketch (B├ęzier tool).
  18. Full Circle Magazine #78: Manually tracing a cartoon sketch, continued (Pencil tool, Calligraphy tool).
  19. Full Circle Magazine #79: Single scan (black & white) tracing using the Trace Bitmap dialog.
  20. Full Circle Magazine #80: Trace Bitmap dialog continued (multiple scans, colour tracing).
  21. Full Circle Magazine #81: Colouring a black & white trace. Bucket fill tool.
  22. Full Circle Magazine #82: Tweak tool (object tweaks).
  23. Full Circle Magazine #83: Tweak tool continued (node tweaks).
  24. Full Circle Magazine #84: Zoom tool, plus other zooming tips.
  25. Full Circle Magazine #85: 3D Box tool.
  26. Full Circle Magazine #86: Spray tool.
  27. Full Circle Magazine #87: Eraser tool and Connectors tool.
  28. Full Circle Magazine #88: Introducing clones.
  29. Full Circle Magazine #89: Clones continued: creating mirrored or kaleidoscopic effects.
  30. Full Circle Magazine #90: Clones continued: using “unset” fills and strokes.
  31. Full Circle Magazine #91: XML Editor (to fix an issue with clones).
  32. Full Circle Magazine #92: The advantages of combining clones with clipping and masking.
  33. Full Circle Magazine #93: Using the “Create Tiled Clones” dialog.
  34. Full Circle Magazine #94: The Scale, Rotation and Blur & Opacity tabs of the Tiled Clones dialog.
  35. Full Circle Magazine #95: The Colour tab of the Tiled Clones dialog.
  36. Full Circle Magazine #96: Finishing the Tiled Clones dialog, covering the Trace and Symmetry tabs.
  37. Full Circle Magazine #97: Grids.
  38. Full Circle Magazine #98: Align & Distribute Dialog: Aligning.
  39. Full Circle Magazine #99: Align & Distribute Dialog: Distributing and other features.
  40. Full Circle Magazine #100: Celebrating issue #100 with 100 Inkscape tips and tricks.
  41. Full Circle Magazine #101: The Arrange (formerly Rows & Columns) and Transform dialogs.
  42. Full Circle Magazine #102: Introducing Live Path Effects: Spiro Spline and Gears.
  43. Full Circle Magazine #103: LPE implementation details, and the Bend LPE.
  44. Full Circle Magazine #104: Envelope Deformation and Knot LPEs.
  45. Full Circle Magazine #105: Construct Grid, Hatches (Rough) and Interpolate Sub-Paths LPEs.
  46. Full Circle Magazine #106: Pattern Along Path, Ruler, Sketch, Stitch Sub-paths and (barely) the VonKoch LPEs.
  47. Full Circle Magazine #107: The last of the LPEs: Power Stroke and Clone Original Path.
  48. Full Circle Magazine #108: Introducing filters: creating a basic drop shadow filter.
  49. Full Circle Magazine #109: Filters: The Color Matrix filter primitive.
  50. Full Circle Magazine #110: Filters: The Composite filter primitive.
  51. Full Circle Magazine #111: Filters: The Flood and Turbulence filter primitives.
  52. Full Circle Magazine #112: Filters: The Image and Morphology filter primitives.
  53. Full Circle Magazine #113: Filters: Speeding up rendering, and the Displacement Map primitive.
  54. Full Circle Magazine #114: Filters: The Convolve Matrix primitive.
  55. Full Circle Magazine #115: Filters: Diffuse and Specular Lighting primitives.
  56. Full Circle Magazine #116: Filters: Component Transfer primitive (Inkscape 0.91+).
  57. Full Circle Magazine #117: Filters: Using “Background Image/Alpha” and chaining filters.
  58. Full Circle Magazine #118: Some SVG and web politics, installing 0.92, and the “paint-order” feature from SVG 2.
  59. Full Circle Magazine #119: Mesh Gradients.
  60. Full Circle Magazine #120: It’s the 10th anniversary of the magazine, so I made a cake!
  61. Full Circle Magazine #121: The Measurement tool.
  62. Full Circle Magazine #122: New in 0.91/0.92: Finding & selecting objects.
  63. Full Circle Magazine #123: New in 0.91/0.92: The Objects dialog
  64. Full Circle Magazine #124: New in 0.91/0.92: The Symbols dialog
  65. Full Circle Magazine #125: New LPEs in 0.92: BSpline and Simplify.
  66. Full Circle Magazine #126: New LPEs in 0.92: Roughen and Show Handles.
  67. Full Circle Magazine #127: New LPEs in 0.92: Fill Between Many and Taper Stroke.
  68. Full Circle Magazine #128: New LPEs in 0.92: Fill Between Strokes, Transform By 2 Points, Interpolate Points and Join Type
  69. Full Circle Magazine #129: New LPEs in 0.92: Perspective/Envelope, Lattice Deformation 2, Rotate Copies, Mirror Symmetry, Bounding Box, Ellipse by 5 Points, Attach Path
  70. Full Circle Magazine #130: An introduction to Extensions: Colour > Brighter, Colour > HSL Adjust, Render > Function Plotter, Render > Barcode > QR Code, Render > Hershey Text
  71. Full Circle Magazine #131: More extensions: Arrange > Deep Ungroup, Arrange > Restack, Text > Lorem Ipsum, Text > Extract, Text > Merge, Text > Split Text, Images > Embed Images, Images > Extract Image, and a warning to steer clear of anything in the Raster submenu.
  72. Full Circle Magazine #132: JessyInk
  73. Full Circle Magazine #133: Using SVG in a web page. Introduction, exporting as PNG, and linking directly to an SVG file.
  74. Full Circle Magazine #134: Using SVG in a web page. Using SVG files in <object> tags or as inline code. An introduction to XML namespaces with an eye to reducing the file size of exported SVG images.
  75. Full Circle Magazine #135: Using SVG in a web page. Basic CSS animations.
  76. Full Circle Magazine #136: Animating SVG using SMIL (1/2)
  77. Full Circle Magazine #137: Animating SVG using SMIL (2/2)
  78. Full Circle Magazine #138: Creating a self-drawing path with CSS
  79. Full Circle Magazine #139: Showing part of an image in a browser using viewBox and named views.
  80. Full Circle Magazine #140: Showing one group or layer from an image in a browser using the CSS “:target” selector.
  81. Full Circle Magazine #141: Changing the colour of inline SVG using the currentColor CSS keyword.
  82. Full Circle Magazine #142: Introducing some JavaScript into your SVG files.
  83. Full Circle Magazine #143: Using embedded JS scripts to change an object’s style.
  84. Full Circle Magazine #144: Using CSS classes to change an object’s style with JS.
  85. Full Circle Magazine #145: Creating a clickable button with JS and CSS classes.
  86. Full Circle Magazine #146: Extending the clickable button from last time to control a different object, using an external JS file.
  87. Full Circle Magazine #147: Using Inkscape, JavaScript and a browser to create an animated set of traffic lights.
  88. Full Circle Magazine #148: A deeper dive into SVG and JavaScript.
  89. Full Circle Magazine #149: Using JS in the browser to add, remove and re-order SVG elements.
  90. Full Circle Magazine #150: Using JS in the browser to animate SVG objects.
  91. Full Circle Magazine #151: The "transform" attribute.
  92. Full Circle Magazine #152: Using JS in the browser to manipulate the "transform" attribute.
  93. Full Circle Magazine #153: Using JS in the browser to manipulate the "transform" attribute (cont’d).

Special Editions

These can all be downloaded via this page.

  • Inkscape Special Edition #1: Prequel article, plus parts 1-7 in one handy download
  • Inkscape Special Edition #2: Parts 8-14 in one handy download
  • Inkscape Special Edition #3: Parts 15-21 in one handy download (Updated in January 2017 – parts 22-24 were split off into Special Edition 4)
  • Inkscape Special Edition #4: Parts 22-28 in one handy download
  • Inkscape Special Edition #5: Parts 29-35 in one handy download
  • Inkscape Special Edition #6: Parts 36-42 in one handy download

Off-screen windows with Inkscape on MacOS and XQuartz

My go-to editor for vector images is Inkscape. So much so that I use it in the creation of my cartoons and comic strips, and have been writing a monthly column about it in Full Circle Magazine for over six years now!

Just recently I’ve switched jobs and have to use a Mac as my day-to-day work machine, rather than the Linux box I’m used to. Whilst Inkscape is available for the Mac, there is no maintainer to release native builds. For most releases, therefore, the Mac offering is a straight port of the Linux version, and uses XQuartz as its X Server. Unfortunately XQuartz has more than a few “issues” – not least of which is a significant problem with multi-screen setups. At my new job they suffer from the delusion that more screens are better, so I have to work with a 3-screen arrangement that would make an air traffic controller proud.

The biggest problem with XQuartz on a multi-screen setup is that it has an annoying tendency to place new windows off-screen. This manifests itself in Inkscape as dialogs disappearing into the ether before you ever get a chance to see them. Open the Document Properties dialog and there’s a good chance it will be placed at some obnoxious coordinates that render it invisible to the user. The same with the Fill & Stroke dialog, the Inkscape Preferences, the Align & Distribute dialog, and all the others. If you get lucky some might appear where you can use them, but enough will go missing that it makes working with the program virtually impossible for anything but the simplest of uses.

This issue is well known to MacOS users of Inkscape, and has been reported on Launchpad at least twice, has its own entry in the Inkscape FAQ, and also crops up on the main Inkscape forum. There are various workarounds mentioned on those sites, but they’re all a little clunky, to say the least.

So I’ve crafted my own clunky (but hopefully slightly less clunky than the others) solution to the problem: a shell script to find all the Inkscape windows and move them to the top-left of the XQuartz screen. But that seemed like overkill when it’s usually just the last dialog you tried to open that you need to move. And what about other applications? Surely Inkscape can’t be the only program that XQuartz has problems with. So I expanded the script to cover all those cases.

1) You’ll need to install the ‘wmctrl’ program, which does the hard work of repositioning the windows. I installed it using Homebrew. (brew install wmctrl)

2) Download the script using this link

3) Please take a look at the script (it’s not that long) to confirm that it’s not sending all your bitcoins to me, or anything equally dodgy. Then you’ll need to make it executable by running:

chmod +x gather_windows.sh

4) To use it, open a terminal within XQuartz and run it with either no options, or a single option, as follows (this is the result of running with the -h option):

Usage: gather_windows.sh [option]
With no options : move the last opened window to the top left of the screen
-1, -p, --previous : move the previously opened window to the top left of the screen
-i, --inkscape : move all the Inkscape windows to the top left of the screen
-a, --all : move all the windows from all applications to the top left of the screen
-h, --help : show this help text
With any other option, try to find windows that match the string provided as part of their WM_CLASS property, and move them to the top left.

Note: the -1 option lets you open a terminal to run this script *after* your window has gone missing

E.g. gather_windows.sh xterm will move all your Xterm windows to the top left, gather_windows.sh -i will move only the Inkscape windows, and gather_windows.sh will just move the last window you opened. As the note in the help text suggests, if you try to open a dialog in Inkscape (or some other program) and it doesn’t appear due to rendering off-screen, you can then open a terminal and run gather_windows.sh -1 (or -p or –previous) to move the window to the top left.

Please note that this script probably isn’t very robust, and any efforts to move the “last” or “previous” windows are purely based on the assumption that wmctrl -l lists windows in the order they were opened. It has worked well enough for my purposes, but that doesn’t mean it will work for you.

For bonus points you can add the script to the ‘Applications’ menu in XQuartz, so it’s always readily available when you lose a dialog. In that case it’s best to call it with no options, so you can select it as soon as a dialog goes AWOL.

Posted in Miscellaneous, SVG, Tech. Tags: , . No Comments »