LGM: Inkscape quietly evolves into a development platform

There was no new release of Inkscape at Libre Graphics Meeting 2012 in Vienna, but the SVG vector editor still made a significant impact. One session showcased a new extension that enables drawing with variable-width strokes, but several others showed off independent applications that leverage Inkscape's extensibility to build other tools, including an interactive mock-up creator for UI design and a font editor.

Libre Graphics Meeting is the annual workshop and conference of the open source graphics community; there are presentations from developers and artists alike, as well as workshops and team meetings. 2012 was the event's seventh year. LGM mainstays include GIMP, Blender, Inkscape, Krita, and Scribus, among other projects, but the exact makeup varies each year due to the moving venue and the irregular release schedules kept by the various teams. Inkscape is nearing its next major release, but its presence was felt in other sessions this year.

Variable-width stroke

The variable-width stroke feature is named Powerstroke, and was authored by presenter Johan Engelen. The implementation is based on Inkscape's Live Path Effects (LPE) technique, which allows the user to attach a non-destructive effect to any path object. These effects are functions that manipulate the path data itself — meaning its points and control points, not "stylistic" features like color or opacity. LPEs can deform paths, map text or images along a path, and many other tricks. LPEs produce a valid SVG path as output, so they are preserved in other SVG viewers, but the original data is also saved in an Inkscape-specific attribute, which makes them reversible.

Without Powerstroke, each path has a fixed stroke width along its entire length (which is the default in almost every vector editor). The new feature adds "width points" along the path; each contains the location along the path and the width at that point — where they change, the effect interpolates smoothly between them. In the user interface, each width is shown as a line perpendicular to the curve of the path, and has "handles" that allow you to directly adjust the width on-canvas.

For the stroke width itself, there is very little else to it. The interpolation between widths is performed by the lib2geom library, and width control points have special purple handles to distinguish them from regular points. There is an "advanced" option which allows you to rearrange the order of the stroke-width points, which creates some zany effects, and an auxiliary LPE called "Clone original path" was created to enable filling Powerstroked shapes.

What is more complicated is how to handle sharp corners. The SVG specification defines three possibilities: rounded, mitered (pointed), or beveled (flattened). Powerstroke adds two of its own: extrapolated and "spiro." The extrapolated corner is a variant on the miter, but it is designed to more smoothly follow the shape that a pen might take on paper. The spiro corner is more rounded, based on the Spiro curve type created by Raph Levien.

Engelen hinted at several improvements for Powerstroke in future releases. He would like to make Powerstroke output an option for Inkscape's calligraphy tool rather than a stand-alone LPE, as well as tackle asymmetric stroke widths. Calligraphy tool support might make Powerstroke usable with pressure-sensitive pen tablets, which artists would like. There are also pathological cases where the math currently breaks down, such as coupling extremely sharp corners with extremely large widths; fixing those is something mathematicians would like.

Mocking the user interface

Red Hat's Máirín Duffy and Emily Dirsh presented a session entitled "An awesome FLOSS design collaboration workflow," covering a range of projects developed to support the Fedora Design Team. Duffy explained that working as a user experience (UX) designer, she found the existing collaboration tools frustrating when compared to Git and other tools made for developers. Designers need to collaborate with each other and with developers, she said, but often had little choice beyond shared-folder synchronization and email attachments. The first product of her campaign to create better design tools was SparkleShare, a Git-backed storage service that functions like Dropbox, but with the full power of commit, forking, and revision history.

SparkleShare helps developers share and iterate designs via flat files, but it does not help when creating interactive UX mock-ups. For that, Duffy said, most designers are stuck with unfavorable options like proprietary tools, Adobe Flash, and web services that may or may not be around in years to come. Her solution to this dilemma is Magic Mockup, a utility for creating clickable, interactive mock-ups with Inkscape. The nexus of the idea came from Sozi, which makes animated presentations using SVG. Just as Sozi uses SVG's ability to embed JavaScript to transition between slide frames, Magic Mockup lets designers draw interactive buttons, dialogs, and other widgets that respond to mouse events. Clicks trigger a simple "change frames" action, which lets designers mimic application state-changes, user input, or animations. Duffy wrote the original implementation (in JavaScript), which Garrett LeSage then rewrote in CoffeeScript.

Still in development is a way for designers to share their Magic Mockup work with the public. Dirsh demonstrated her project, Glitter Gallery, which is built primarily for sharing and commenting on Magic Mockup SVG files, but supports other file types, too. Glitter Gallery is a Ruby application and is designed to run on Red Hat's OpenShift platform.

Typography

I presented another Inkscape-built utility in my talk about new open font development tools. The Inkscape typography extensions are a collection of related extensions that let font designers use Inkscape as the glyph-drawing canvas. The workflow allows the designer to draw each glyph on a separate layer, keeping the entire font in a single file (both because SVG does not have the concept of "pages," and to make comparing glyphs simpler). The first extension sets up a blank glyph-creation document, with guides set for baseline, x-height, cap-height, ascenders, and descenders. The second is a "new layer" function, which creates a new layer named for whichever letter of the alphabet the user specifies. The third extension cycles through the layers and builds an SVG font file, mapping each layer to the appropriate encoding slot. The extensions can also open and edit existing SVG fonts.

SVG fonts are not nearly as prevalent as TrueType or PostScript fonts, but the extensions make for a good start. FontForge is the application of choice for open source font crafting, but it does not offer a particularly pleasant editing experience. Inkscape has better and more flexible tools, plus an easier to work with canvas (for example, FontForge's glyph editor does not support on-canvas transformations). Is is also less crash-prone than FontForge, and has better essential application features (such as a fully-functional Undo/Redo).

More with SVG

In addition to the Inkscape-specific talks, there were several sessions about SVG itself. Jeroen Dijkmeijer presented his iScriptDesign project, a web-based application that lets you construct CAD-like blueprints suitable for laser cutting or CNC milling. Dijkmeijer uses iScriptDesign to create and build wooden furniture, but it is suitable for any project made of flat parts that can be cut with a 2-D tool.

What makes iScriptDesign an improvement over bare SVG drawings is that it supports dynamic, adjustable measurements — for example, defining object X as half the width of object Y. Dijkmeijer has added support for JavaScript pre-processing directives, calling the result "JSVG." The list includes named-variable substitution, mathematical expressions that are evaluated when the image is rendered, and user input methods like text-entry boxes and adjustment sliders. He demonstrated a JSVG plan for a sofa table that incorporated adjustable measurements for height, width, and depth. On-page sliders allow the user to scale various dimensions of the design, and the application rearranges the resulting pieces to fit them onto the smallest total area, to minimize production cost.

Dijkmeijer explained that the application also took steps to transform complex paths in the image so that they were optimized for a laser-cutter's computer-controlled motion. For example, a shape might include reflected segments, but it needs to have all of its paths oriented in the same direction so that the cutting head can trace it with one continuous pass.

Chris Lilley from the World Wide Web Consortium (W3C)'s SVG working group was on hand at LGM as well, and provided feedback to several of the SVG-oriented talks. He also presented an update on the ongoing development of the SVG 2.0 specification, which will sport several enhancements of interest to artists. First, it will allow images to specify colors in more precise terms than the generic 8-bit RGB triples common in HTML. The initial plan was to use the Lab color space and specify a white point, but thanks to a Q&A exchange on that subject with Kai-Uwe Behrmann of Oyranos and Richard Hughes of colord, the standard may soon use the more abstract (but simpler) XYZ color space instead. It will also support attaching ICC color profiles to documents, and will use them for embedded raster images, both ensuring better color matching.

I spoke to Lilley later about Dijkmeijer's JSVG effort, and he confirmed that the SVG Working Group is interested in eventually adding mathematical expression, dynamic variables, and other such constructs to the specification, although it will probably not make 2.0. The Q&A exchange with the color management developers was not the only point in the week where the SVG specification took hints from the artists and developers at the event; Lilley asked questions of many of the speakers, and called their feedback to the process valuable — such as Magic Markup's interest in having layers become part of the core format. Likewise, he was able to point some of the projects to helpful-if-not-well-known options that could simplify development.

The last few Inkscape releases have added more and more via the application's extensions mechanism, and they are increasingly specialized. For example, although she did not present an update on it this year, Susan Spencer's Sew Brilliant uses Inkscape extensions to assist textile-makers, implementing dynamic pattern-changing options akin to what iScriptDesign does with furniture designs. There may not be many projects that combine font development, UI mock-ups, and textile making, so it is impressive to see that Inkscape has evolved — under the radar — into a tool that so many people are using in such diverse tasks. Likewise, although at times standards bodies seem like remote and unapproachable entities, it is interesting to see a specification like SVG evolve in real-time as developers and artists give their feedback. That sort of frank back-and-forth between developers and end users is also one of the facets of LGM that makes it worth attending, whether your favorite application has a new release to unveil or not.

[Thanks to the Libre Graphics Meeting for assistance with travel to Vienna.]