draw freely
Back to Inkscape.org
January 08, 2015


div.figure { padding: 5px; margin-bottom: 20px; text-align: center; background: #cccccc; }

div.figure img { }

div.figure p { font-size: 10px; }

This post got delayed due to work on ‘units’ for the 0.91 Inkscape release followed by the holidays.

The SVG Working Group had a two day meeting in Santa Clara as part of TPAC (the yearly meeting of all W3C working groups) at the end of October. This is an occasion to meet in person with other groups who have some shared interests in your group’s work. I would like to thank the Inkscape board for partially funding my attendance and W3C for waiving the conference fee.

Here are some highlights of the meeting:

Day 1, Morning


The morning session was divided into two parts: the first part was an SVG only meeting while the second part was a joint meeting with the Task Force for Accessibility.

  • SVG blending when embedded via <img>:

    This is probably not a real interesting topic to readers of this blog other than it can give one a flavor of the types if discussions that go on inside the SVG working group. We spent considerable time debating if elements inside an SVG that are included into a web page by the HTML <img> tag should blend with elements outside the SVG (other than following the simple “painters model” where transparency is allowed). Recall that in SVG 2 (and CSS) it is possible to select blend modes using the ‘mix-blend-mode’ CSS property (see my blog post about blending). So the question becomes should objects like a rectangle (inside the SVG referenced by an <img> element) with a ‘mix-blend-mode’ value of say ‘screen’ blend with an image in the HTML page behind? We finally concluded that an author would expect an external SVG to be isolated and not blend with other objects in the HTML page.

  • Accessibility:

    The Accessibility Task Force asked to meet with us to discuss accessibility issues in graphics. Work has begun on SVG2 Accessibility API Mappings. An example of how accessibility can work with graphics can be found in a Surfin’ Safari blog post.

Day 1, Afternoon


The afternoon session was a joint meeting with the CSS working group.

  • Text Decoration

    CSS has expanded the possibilities of how text is decorated (underlines, over-lines, etc.) by adding three new properties in CSS Text Decorations Module Level 3. The new properties ‘text-decoration-line’ and ‘text-decoration-style’ are easy to adopt into SVG (and in fact are already read and rendered by Inkscape 0.91). The new property ‘text-decoration-color’ is more problematic. SVG has long supported separate ‘fill’ and ‘stroke’ properties on text which also applies to text decoration. By careful nesting of <tspan>’s one can have a different underline color from the text color. Furthermore, SVG allows various paints to be applied to the text decoration, like a gradent or pattern fill. The ‘text-decoration-color’ property allows the color of the text decoration to be set directly, without the need for nested <tspan>’s so it is a quite attractive idea but how to support the richness found in SVG?

    I proposed a number of solutions (see my presentation). The CSS group agreed that my favorite solution, that adding ‘text-decoration-fill’ and ‘text-decoration-stroke’ was the proper way to move forward. (BTW, the CSS working would like to eventually allow fill and stroke on HTML text.)

  • Fitting Text in a Box

    We’ve had numerous requests for the ability to adjust the size of text to fit it inside a given box (note, this is not the same as wrapping text into a shape). SVG has the attribute ‘textLength’ which allows a renderer to adjust the spacing or glyph width to match text to a given length. It was intended to allow renderers to adjust the length of a given text string to account for differences in font metrics if a the specified font wasn’t available; it was never intended to be an overall solution to fitting text inside a box, in fact the SVG 2 spec currently warns against using it in this way. I received a proposal from another Inkscape developer on expanding ‘textLength’ to be more useful in fitting text in a box. It seems to me that finding a solution to this problem would be of more general interest than just for SVG so I added this topic to the SVG/CSS agenda. I prepared a presentation to provide a starting point for the discussion.

    We had quite a lengthy discussion. The consensus seemed to be that CSS could use a set of simple knobs to make small adjustments to text, mostly for the purpose of labels. This would satisfy most use cases. Large adjustments could (should?) be the domain of script libraries. It was decided to solicit more feedback from users.

  • Image Rendering

    CSS Images 3 has co-opted the SVG ‘image-rendering‘ property and redefined in to specify what about an image is important to preserve when scaling as compared to a speed/accuracy trade off as in SVG 1.1. I prepared a short report on a couple of issues I found. The first is that the specification does not describe very well the meaning of the new ‘crisp-edges’ value. Tab Atkins, one of the spec’s authors has agreed to elaborate and add some figures to demonstrate what is intended. I found the Wikipedia section Pixel art scaling algorithms to be particularly enlightening on the subject.

    The second issue is that some browsers and Inkscape use the now deprecated ‘optimizeSpeed’ value to indicate that the nearest neighbor algorithm should be used for scaling. This is important when scaling line art. I asked, and Tab agreed, that ‘optimizeSpeed’ value should correspond to the new ‘pixelated’ value to not break existing content (and not ‘auto’ as is currently in the spec).

  • Connectors

    I’ve been working on a connectors proposal for SVG. There is renewed interest as being able to show relationships between elements would greatly aid accessibility. We even had a brief meeting with the HTML working group where it was suggested that connectors (possibly without visual links) may be of interest to aid accessibility of HTML. One problem I’ve had is how to reference ports inside a <symbol> element. I asked the CSS group for suggestions (this is obviously not a styling issue but the CSS group members are experts at syntax). Tab Atkins suggested: url(#AndGate1) Out, Mid1, Mid2, url(#AndGate2) InA, where, for example, Out is the point defined inside the symbol with the ‘id’ AndGate1.

Day 2


The SVG working group met for entire day covering a real hodge-podge of topics, some not well minuted. Here are a few highlights:

  • NVidia presentation.

    NVidia gave a quite impressive demonstration of their OpenGL extensions for rendering 2D vectors, (think SVG), showing an entire HTML web page from the New York Times being rotated and scaled in real time on their Tegra based Shield tablet with all the text rendered as vectors (they can render 700,000 paths per second). They are trying to get other vendors interested in the extensions but it doesn’t seem to be a high priority for them.

  • CTM Calculations

    For mapping applications, a precision of greater than single precision is necessary for calculating the Current Transformation Matrix (CTM) due to rounding errors. It was proposed and accepted that SVG dictate that such calculations be done as double precision (as Inkscape already does). (Note: single precision is sufficient for actual rendering.)

  • Going to Last Call Working Draft

    We discussed when we’ll get SVG 2 out the door. It is a very large specification with various parts in various stages of readiness. We decided to target the February face-to-face meeting in Sydney as the date we move to the next stage in the specification process… where no new features can be added and incomplete ones removed.

  • HTML in SVG

    There has been a desire by some for quite awhile to allow HTML directly inside SVG (not wrapped by a <foriegnElement> tag). I personally am quite hesitant to see this happen. SVG as at the moment a nice stand-alone graphics specification that doesn’t necessarily have to be rendered in a Web browser. Incorporating HTML would threaten this.

  • SVG in HTML

    This is the opposite of the previous topic, allowing SVG to be directly embedded in HTML without using a name space.

  • Non-scaling Patterns

    Just as it often useful to have non-scaling stroke widths (especially for technical drawings), it would also be useful to have non-scaling patterns and hatches. We agreed that this should be added to the specification.

  • Minimum Stroke Width

    It would be useful to have a minimum stroke-width so that certain strokes do not disappear when a drawing is scaled down. It was claimed that this will be handled by vector-effect but I don’t see how.

  • SVG in Industry

    It was mentioned that Boeing is moving all their 787 docs to SVG so they can be viewed in browsers.

Unfortunately, we ran out of time before we could cover some of my other topics: stroke-miterlimit, text on a shape, and auto-path closing.

January 08, 2015 01:59 PM

January 07, 2015

Inkscape Tutorials

Blender 2.73 was released today, and it contains an awesome new feature that allows you to export Blender Freestyle renders into SVG format that can be further edited in Inkscape. Blender is a free and open source 3D computer graphics application that is used for a wide range of different things, including 3D modeling and animation. One of the features in blender is a line based nonphotorealistic (NPR) rendering engine that can be used to create lineart-style stills and animations such as this render I created of the GNOME Builder robotic crane:

The new feature that was added to the Blender version 2.73 allows exporting of an SVG from a Freestyle render. This creates the ability to model a 3D object in blender, create a Freestyle render, export it to SVG, and then open it up in Inkscape to edit and tweak it further. Here is a sample frame I rendered of the GNOME Builder crane, after opening it in inkscape and fine-tuning all the paths and strokes, and playing with different colours:


January 07, 2015 07:57 PM

December 23, 2014



This post is more geared to Inkscape developers than Inkscape users. I hope that by recording my trials and tribulations here it can help others in their coding efforts.

I have been working on adding support for ‘context-fill’ and ‘context-stroke’ to Inkscape. These magical ‘fill’ ans ‘stroke’ property values will allow Inkscape to finally match marker fill (e.g. arrowhead color) to path stroke (e.g. arrow tail) in a simple way. These new property values are part of SVG 2.

Adding this support is a multi-step process. First one must be able to read the new values and then one must be able to apply the values. The former part is rather straight forward. It simply required modifying the SPIPaint class by adding a new ‘enum’ SPPaintOrigin with entries that keep track of where the paint originates. The previous ‘currentColor’ boolean has been incorporated into this new ‘enum’. The latter part proved to be much more of a challenge.

Where does the ‘apply’ code go?

The ‘context-fill’ and ‘context-stroke’ values are applicable to things that are cloned. The driving force for these values is certainly the <marker> element but <symbol> and <pattern> elements could also find the values useful as could anything cloned by the <use> element. For the moment, I concentrated on implementing the values in markers and things cloned by the <use> element.

The first question that comes to mind is: Where in the code is styling applied? This turns out to not be best starting question for cloned objects. A better question is: How does the cloning take place? To answer this question I implemented three routines with the same name: recursivePrintTree(); but, as member functions of different classes: SimpleNode, SPObject, and DisplayItem. These represent different stages in Inkscape’s processing of an SVG document. Here are the findings:

XML Tree (SimpleNode)
The XML Tree matches the structure of the XML file with some extra elements possibly added by Inkscape such as <metadata> and <sodipodi:namedview>. This is the tree that is shown in the XML editor dialog. No cloning is evident.
Object Tree (SPObject)
The object tree is similar to the XML tree. Its main purpose is to handle the CSS styling which involves merging the various sources of styling (external style sheets (rect: {fill:red;}), styling properties (style=”fill:red”), and presentation attributes (fill=”red”), as well as handling all the necessary cascading of styles from parent to child. A few non-rendering elements are missing such as <RFD:rfd> and some new elements appear. Here is our first clue: the object tree includes the unnamed clones of elements created by the <use> element. It makes sense that they appear here. Cloned objects descending from a <use> element participate in the style cascading process. Marker clones, however, are no where to be seen.
Display Tree (DisplayItem)
The display (or rendering) tree includes only elements that will be rendered. All the styling has been worked out; all the placement and sizing of graphical items has been calculated. The metadata, the Inkscape editing data, and the <defs> section are all gone. But now clones of the markers appear, one clone for each node where a marker is placed, each containing the geometric data of position, scale, and orientation. This is a quite reasonable way to handle markers as each marker clone is identical to its siblings (at least until ‘context-fill’ and ‘context-stroke’ came along).

The above “tree” analysis gives the structure of each tree after it has been built, but doesn’t explain how each tree is created. This has ramifiations of how one can handle the ‘context-fill’ and ‘context-stroke’ values.

Creating the XML tree

There are a couple of ways to create the XML tree. The most common is via sp_repr_read_file(). This is used in SPDocument::createNewDoc() as well as routines to read in filters, templates, etc. Files opened by Inkscape from the command line use XSLT::open() which allows XSLT stylesheets to be applied to the SVG file (something I didn’t know we supported). Both functions call sp_repr_do_read() to read the actual files and both end up with an Inkscape::XML::Document.

Creating the object tree

Once the XML tree is created, it is passed to SPDocument::creatDoc() which builds the object tree top down via the recursive calling of SPObject::invoke_build() starting with the document root <svg> element. SPObject::invoke_build() calls the virtual function SPObject::build() which handles element specific things such as reading in attributes. Attributes are read by calling SPObject::readAttr() which performs a few checks before calling the virtual SPObject::set() function. The set() function for SPUse reads in ‘href’, the reference to the object to be cloned by the <use> element. Reading in the reference inserts a copy of the referenced object (the clone) into the object tree via SPUse::href_changed().

Markers are not cloned; only references to the marker elements are added at this step, in the SPShape::build() function.

Creating the display tree

The display tree is created by calling recursively SPItem::invoke_show() on the root object (SPItem, derived from SPObject, is for visible objects). This is done in SPDesktop::setDocument(). SPItem::invoke_show immediately calls the virtual function SPItem::show() which handles element specific things. (SPRoot::show() calls SPGroup::show() which calls SPGroup::_showChildren.) SPItem::show() creates an instance of an appropriate display class object that is derived from Inkscape::DrawingItem(). The virtual function DrawingItem::setStyle() is called to set the style information. One thing to note is that the a child is constructed (with styling) before adding it to the tree so a child’s style cannot be directly dependent on an ancestor in the tree. But ‘context-fill’ and ‘context-stroke’ need ancestor style information so we need to supply that in a different way.

Markers are tracked by a map of vectors of pointers to Inkscape::DrawingItem instances. This map is stored in SPMarker. The map is indexed by a key for each type of marker (start, mid, end) on a particular path. The vector has an entry for each position along the path a marker is to be placed. The DrawingItem instances are created in a two step process from SPShape::show(). First a call to sp_marker_show_dimensions() ensures that the vector is of the correct size. Then a call to sp_shape_update_marker_view() calls sp_marker_show_instance() which creates a new Inkscape::DrawingItem instance if it doesn’t already exist.

Setting the style of a clone

As mentioned above, style is handled in the virtual function DrawingItem()::setStyle(). The DrawingShape and DrawingText setStyle() functions call NRStyle.set() where the work of translating the style information from the object tree form to the display tree form takes place (in the display tree, the styling information is in a form used by the Cairo rendering library). To handle ‘context-fill’ and ‘context-stroke’ we would like to walk up the display tree to find the style of the element that references the clone, i.e. the <use> element or the <path> or <shape> elements in the case of markers. But at the point the setStyle() function is called on an element in the clone, the clone has not yet been inserted into the display tree, so one cannot walk up the display tree. What we can do is hand two sets of styling information from the object tree to to the setStyle() function, the first being the stying information for the object at hand and the second being the styling information that should be used in the case of ‘context-fill’ and ‘context-stroke’. We know the later for the <use> element as its clone is in the object tree. All that is required is setting a pointer to the context style information in the SPUse class and then passing it down to its children. This solution doesn’t work for markers as their clones are not in the object tree. The solution for markers is calling a function that walks down the tree setting the correct styling information after the cloned marker elements are added to the display tree.

Future work

There are still quite a few things to be done. In particular, before we can switch to using ‘context-fill’ and ‘context-stroke’, as well as the ‘orient’ attribute value ‘auto-start-reverse’ (which allows us to handle both start and end arrows with just one marker) we’ll need a fallback solution for SVG 1.1 renderers. Here is a list of things to do:

  • Handle gradients and patterns.
  • Handle text (appendText()).
  • Export to SVG 1.1.
  • Redo markers.svg (source of markers in Inkscape).


All the code is now in trunk. To implement ‘context-fill’ and ‘context-stroke’, I added about 200 lines of code. I don’t know the exact amount of time it took, but I would guess a minimum of 20 hours. That works out to about 10 lines per hour… not very productive. The first part, reading in ‘context-stroke’ and ‘context-fill’ took about an hour. I am quite familiar with this part of the code, having C++ified the SPStyle and related classes and having implemented other new properties and property values. It was the second part that took so long. Although I have worked with parts of this code before, it was often quite opaque as to which code is doing what (and why). I ended up going down many false paths. There is a serious lack of comments and often confusing variable and function names (what the heck is an ‘arenaitem’?). A few comments at the appropriate places could have shaved up to 90% of the time it took. In this case, the different way markers and clones are handled required solving the same problem twice.

When you begin a project, it is very hard to estimate the time it will take. I would have thought this project could be done in less than 5 hours, possibly in just a couple. It didn’t turn out that way. On the otherhand, implementing the new CSS property ‘paint-order’ which I thought would take considerable time, took only a couple of hours.

December 23, 2014 10:25 AM

November 17, 2014

Inkscape Tutorials

Here is a neat little workflow tutorial on creating a cartoon cactus using Inkscape. Most of the steps in this tutorial are pretty simple, using simple path manipulations, boolean operations and the circle tool to draw and simply shade your very own cactus.


November 17, 2014 03:33 PM

November 13, 2014

Inkscape Tutorials

Here is a tutorial on drawing a candle in a candle holder using Inkscape. Using basic inkscape fundamentals like the circle tool, the pencil tool and boolean operations, you will learn to draw this neat simple cartoon candle. In addition, you will learn how to edit your candle image to make a few frames that can be used to create an animation. (note that Inkscape itself cant do animation though)



November 13, 2014 02:25 AM

November 10, 2014

Inkscape Tutorials

Learn how to draw this adorable little pink elephant using inkscape. This a great tutorial to learn some of the basics of inkscape including the circle tool, using basic Boolean operations to create simple shading, and some creative use of the spiral tool to make the elephant’s trunk.


November 10, 2014 09:34 PM

November 09, 2014

Inkscape Tutorials

Here is a great tutorial for Inkscape on using gradients, blur and opacity to create a simple landscape scene with misty, cloudy hills in the background.hills

November 09, 2014 03:37 PM

In addition to the @inkscapetuts on twitter, the inkscape tutorials blog is now also on google+, and also on Facebook. Going forward, both the twitter, g+ and Facebook streams will be updated with all the new posts that show up here on the blog. So if you prefer to use either of those services, follow us there.

Speaking of google+, there is also the official inkscape google+ page, which features news and updates from the inkscape project. Also, there is the inkscape community on google+, that has tutorials, a gallery, and general inkscape posts and discussions.


November 09, 2014 02:51 PM

November 07, 2014

Inkscape Tutorials

Here is a super simple way of creating an egg shape oval using the Circle / Ellipse tool, and a little known feature of the Node Tool, called Node Sculpting.

Draw a circle

First up, use the circle / ellipse tool to draw a circle. Remember to hold down the control key on your keyboard to make sure it is a perfect circle.


Convert the circle to a path

Use the select tool to select your circle, and convert it to a path with Path > Object to Path. Now when you switch to the node tool, you will see your 4 nodes of your path.


Sculpt the Nodes

Using the Node Tool, select all the nodes in your circle path either by dragging a box around them, or using the keyboard shortcut Control + A. Now press the alt key on your keyboard, and click and drag the top node of the shape. Your simple egg shape is now complete!


Check out Tav’s book for more information on Node Sculpting

November 07, 2014 06:36 PM

Here is a super quick tutorial on how to draw pacman in inkscape. This tutorial is short and sweet, but is a great introduction on how to use the circle/arc tool in Inkscape.


November 07, 2014 05:55 PM

November 06, 2014

Inkscape Tutorials

Here is a 8-class lesson plan & curriculum by Máirín Duffy for teaching the basics of Inkscape to primary school children. (the class was specifically designed for teaching a US 7th grade class.) The course is themed around the students creating a logo for their fake rock band, and then creating different items based on that logo, such as posters and t-shirts.Each of the 8 lessons has a bunch of resources to run the class, including lesson plans, student handouts and exercise sheets to print out and give to the students during the lesson.

All the resources and course outline is available on this page. Máirín has already tested and run this class on a class of 7th graders, and blogged about the progress of each day — well worth a read too if you want to see how well this class performs in real life.

Even though this class is aimed at 7th graders, following along the course is also a great introduction to the basics of Inkscape for kids of all ages.

inkscape class


November 06, 2014 06:16 PM

Here is a neat two-part tutorial explaining how to draw a cute cartoon tractor. This tutorial has both written instructions and screencasts, so whatever your favourite way of consuming inkscape tutorials is, it should have you covered. The tractor that you learn how to draw in this tutorial is also featured in a neat little game that is currently being developed called Tractor Trample.


November 06, 2014 05:41 PM

November 04, 2014

Inkscape Tutorials

Have you ever noticed that in Inkscape when you have objects that are perfectly butted up against each other, that there is still a small gap rendered between them, exposing the background colour underneath?


Objects without space between, but gaps are still rendered.

This is a known issue with the way the SVG renderer in Inkscape does antialiasing, and there is even an Inkscape FAQ entry with a few ideas on how to workaround the issue.

However, I find that there is a simple workaround for this issue in a lot of cases. Simply group your objects together, and duplicate them twice:


One issue with this approach is that it doesn’t work very well if the objects you are using have any transparency, as you are duplicating objects below, which changes the way the top object looks. Also in drawings with many thousands of objects, duplicating them does tend to make inkscape a perform a lot slower. However in most cases, this technique works great as the finishing step in your workflow to remove the pesky gaps.

November 04, 2014 03:13 PM

November 03, 2014

Inkscape Tutorials

Here is another tutorial from , where you learn how to design a star-shaped badge motif with a bendy banner laid over the top. This tutorial is also a great explanation for different ways to put text on curves, bending paths with live path effects, and using the interpolate extension to easily make a line of the same objects.


November 03, 2014 09:31 PM

October 30, 2014

Inkscape Tutorials

After the tutorial last week on how to create rope with Inkscape, I was playing around with the technique outlined in the tutorial, and came up with a few vector rope assets that you all can now download and use. These three designs are all licensed CC0 1.0 Universal.That means they are all royalty free and free for both commercial and personal use without attribution.

These artworks will be great for use as a border or flourish in nautical, sailing and boating designs. Also suitable for cowboy and wild west style artwork, or anything that requires a rope or string design.

Rope border

Rope Border is an SVG vector clipart of rope in the shape of a rounded rectangle border.



Rope ring

Rope Ring is an SVG vector clipart of a single unbroken rope in a circle loop


Rope ring with a granny knot

Rope Ring with a granny knot is an SVG vector clipart of a single piece of rope tied in a circle loop by a granny knot at the bottom. Also known in heraldry as a Bourchier knot, the granny knot is visually similar to the reef knot, square knot or grief knot.


October 30, 2014 12:44 AM

October 28, 2014

Inkscape Tutorials

Here is a neat tutorial on creating a simple chat icon using inkscape by . It uses a lot of the essential basics of using inkscape, so some basic knowledge of Inkscape features is required, but


October 28, 2014 02:45 PM

October 27, 2014

Inkscape Tutorials

Today István Szép of Pesto Design is holding another live tutorial event on Google Hangouts Event is now done, but you can watch the video here. This will be a halloween themed event, so he will be showing us all how to draw a pumpkin jack-o-lantern in Inkscape! Don’t stress if you cannot view it live, as the videos are always available afterwards to view as well!halloweendrawing

This is part of a series of Live Drawing Events that István has been conducting over the last few months, and they are pretty awesome! Jump over to his Google+ page to find all the videos of past events.

October 27, 2014 02:00 PM

October 23, 2014

Inkscape Tutorials

Here is a set of free cartoon animal clipart that can be used for anything. All the images in this set are totally free can be used for any purpose and do not have any watermarks that will stop you from using them anywhere!

These cute animals are available over at  the Open Clip Art Library. There are many more in this style than in the sample below, so head past the break for the entire list of animals in this set. As with all the artwork in the Open Clip Art Library, these SVGs are Public Domain, so you can do pretty much anything with them!

Cartoon Peacock
with Peacock Feathers

Cartoon Hippo

Cartoon Rhino

Cartoon Zebra

Cartoon Panda

Cartoon Sheep

Cartoon Giraffe

Cartoon Elk

Cartoon Gnu

Cartoon Elephant

Cartoon Leopard

Cartoon Monkey

Cartoon Dog with Bone

Cartoon Cow

Cartoon Goat

Cartoon Kangaroo

Cartoon Squirrel

Cartoon Bear

Cartoon Owl

Cartoon Penguin

Cartoon Cat

Cartoon Ostrich

October 23, 2014 05:52 PM

October 22, 2014

Inkscape Tutorials

Here is a neat tutorial that uses both Inkscape and GIMP to create a bunch of puzzle pieces from a single image. The tutorial also uses an extension that is not included in Inkscape by default, so to do this tutorial, you will also learn how to install extensions for Inkscape.

title step_3

October 22, 2014 08:59 PM

The inkscape tutorials blog is now officially at inkscapetutorials.org. The old inkscapetutorials.wordpress.com should redirect smoothly to this new domain!

October 22, 2014 05:39 PM

October 21, 2014

Inkscape Tutorials


In this tutorial, learn how to draw vector ropes in Inkscape using the Pattern on Path path effect with inkscape. This technique is super useful for drawing a whole bunch of different vector assets with inkscape, like rope or laurel wreaths or anything that has a simple shape that is repeated along a path.

Lets get started!

Create the rope element to pattern to repeat

Using the pen tool in inkscape, draw a the shape that will make up the part of our rope that will be repeated. In this tutorial, we are going to call it our pattern.


Create our path to put the pattern on

Next, create the shape that you want your rope to be. This can be any shape. In the example image above, the shape i used was a series of paths to form the letters “rope”. But for this example, we just have a simple rounded-cornered frame. In this tutorial we are going to call it our Spine Path.

spineshape Add a path effect to the Spine Path

With the Spine Path selected, open up the Path Effects dialog (Path > Path Effects), Click the + button, and choose the Pattern Along Path option from the dialog. It will add the Pattern Along Path effect. Note however that your Spine Path or your Pattern will not change during this step.


Add the Pattern to the Spine Path

Next, select your Pattern, and copy it to the clipboard with Edit > Copy or Control+C. Once copied to the clipboard, select the Spine Path again, and in the Path Effects dialog, press the Link to Path on Clipboard button (its the last button in the Pattern Source section, with the tiny lock on it).

After doing this, your Spine path should look different — the pattern will be stretched out over the length of the spine path:


Change the Pattern Along Path settings

With the Spine Path still selected, change the Pattern Copies dropdown to Repeated, and mark the Pattern is vertical checkbox:


Tweak the spacing

Next, set the Spacing value. This number is going to be a negative number, but will vary widely depending on the size of your image. If a setting of -1 doesn’t change your path much, try a much larger number. Tweak this value until the rope edges line up fairly cleanly:


Tweak the pattern to fit better

Now the spacing is pretty close, but when you zoom in on the shapes, they are going to not fit perfectly:


Luckily, we can go back and change the shape of the Pattern. Choose the node tool, and tweak the shape of the Pattern until you have minimal overlaps between the shapes. YOu may also need to tweak the spacing a bit to make it fit better. The key here is that the outside edges line up neatly, don’t worry too much about the inside edges. The result should look something like this:


Tweak the spine path, then Convert to Path, and break apart

Finally, you can select the Spine Path and tweak the shape of it if you want (I didn’t because it was the shape I wanted). Once you are happy with the shape, convert it to a path with Path > Object to Path. Note that once you do this, you can’t tweak the shapes anymore. Finally, break your path into individual shapes with Path > Break Apart, and set the fill colour and stroke to what you want. Once you set the fill colour, the inside overlaps will be covered up.



Use this technique with a range of Patterns and Spine Paths to create a range of different results:


October 21, 2014 02:33 AM

October 20, 2014

Inkscape Tutorials

Here is a awesome tutorial on creating a simple button for your next user interface in Inkscape. The author assumes that you have a basic grasp of Inkscape before using this tutorial, there are no screenshots of which buttons to press. It is simply a explanation of the workflow used to make this button.


October 20, 2014 09:53 PM

October 02, 2014

Inkscape Tutorials

Improve how you draw light interacting with your subjects in inkscape with this article. The author covers the basics of making your lighting more realistic, including shadows, highlights and how light is reflected onto other objects.



October 02, 2014 03:53 PM

September 05, 2014


div.figure { padding: 5px; margin-bottom: 20px; text-align: center; background: #cccccc; }

div.figure img { }

div.figure p { font-size: 10px; }

The SVG Working Group had a four day Face-to-Face meeting just before The Graphical Web conference in Winchester (UK). The meetings were hosted by Mozilla in their London office.

Here are some highlights of the meeting:

Day 1


  • Symbol and marker placement shorthands:

    Map makers use symbols quite extensively. We decided at a previous meeting to add the ‘refX’ and ‘refY’ attributes (from <marker>) to <symbol> so that symbols can be aligned to a particular point on a map without having to do manual position adjustments. We have since been asked to provide ‘shorthand’ values for ‘refX’ and ‘refY’. I proposed adding ‘left’, ‘center’, and ‘right’ to ‘refX’ (defined as 0%, 50%, and 100%) of the view box as well as ‘top’, ‘center’, and ‘bottom’ to ‘refY’. These values follow those used in the ‘transform-origin’ property. We debated the usefulness and decided to postpone the decision until we had feedback from those using SVG for maps (see Day 4).

    For example, to center a symbol at the moment, one has to subtract off half the width and height from the ‘x’ and ‘y’ attributes of the <use> element:

      <symbol id="MySquare" viewBox="0 0 20 20">
        <rect width="100%" height="100%"
      <use x="100" y="100" width="100" height="100"

    By using ‘refX’ and ‘refY’ set to ‘center’, one no longer needs to perform the manual calculations:

      <symbol id="MySquare" viewBox="0 0 20 20"
                      refX="center" refY="center">
        <rect width="100%" height="100%"
      <use x="150" y="150" width="100" height="100"
    A square symbol centered in an SVG.

An example of a square <symbol> centered inside an SVG.

  • Marker and symbol overflow:

    One common ‘gotcha’ in using hand-written markers and symbols is that by default anything drawn outside the marker or symbol viewport is hidden. People sometimes naively draw a marker or symbol around the origin. Since this is the upper-left corner of the viewport, only one quarter of the marker or symbol is shown. We decided to change the default to not hide the region outside the viewport, however, if this is shown to break too much existing content, the change might be reverted (it is possible that some markers/symbols have hidden content outside the viewport).

  • Two triangle paths with markers on corners. Only one-fourth of each marker on the left path is shown.

    Example of markers drawn around origin point. Left: overflow=’hidden’ (default), right: overflow=”visible’.

  • Variable-stroke width:

    Having the ability to vary stroke width along a path is one of the most requested things for SVG. Inkscape has the Live Path Effect ‘Power Stroke’ extension that does just that. However, getting this into a standard is not a simple process. We must deal with all kinds of special cases. The most difficult part will be to decide how to handle line joins. (See my post from the Tokyo meeting for more details.) As a step towards moving this along, we need to decide how to interpolate between points. One method is to use a Centripital Catmull-Rom function. Johan Engelen quickly added this function as an option to Inkscape’ Power Stroke implementation (which he wrote) for us to test.

  • Day 2


    • Path animations:

      In the context of discussing the possibility of having a canonical path decomposition into Bezier curves (for speed optimization) we briefly discussed allowing animation between paths with different structures. Currently, SVG path animations require the start and end paths to have the same structure (i.e. same types of path segments).

    • Catmull-Rom path segments.

      We had a lengthy discussion on the merits of Catmull-Rom path segments. The main advantage of Catmull-Rom paths is that the path goes through all the specified points (unlike Bezier path segments where the path does not go through the handles). There are some disadvantages… adding a new segment changes the shape of the previous segment, the paths tend not to be particularly pretty, and if one is connecting data points, the curves have the tendency to over/under shoot the data. The majority of the working group supports adding these curves although there is some rather strong dissent. The SVG 2 specification already contains Catmull-Rom paths text.

      After discussing the merits of Catmull-Rom path segments we turned to some technical discussions: what exact form of Catmull-Rom should we use, how should start and end segments be specified, how should Catmull-Rom segments interact with other segment types, how should paths be closed?

      Here is a demo of Catmull-Rom curves.

    Day 3


    • <tref> decission:

      One problem I see with the working group is that it is dominated by browser interests: Opera, Google (both Blink), Mozilla (Gecko), and Adobe (Blink, Webkit, Gecko). (Apple and Microsoft aren’t actively involved with the group although we did have a Microsoft rep at this meeting.) This leaves those using SVG for other purposes sometimes high and dry. Take the case of <tref>. This element is used in the air-traffic control industry to shadow text so it is visible on the screen over multi-color backgrounds. Admittedly, this is not the best way to do this (the new ‘paint-order’ property is a perfect fit for this) but the fact is that it is being used and flight-control software can’t be changed at a moments notice. Last year there was a discussion on the SVG email list about deprecating <tref> due to some security issues. From reading the thread, it appeared the conclusion was reached that <tref> should be kept around using the same security model that <use> has.

      Deprecating <tref> came up again a few weeks ago and it was decided to remove the feature altogether and not just deprecate it (unfortunately I missed the call). The specification was updated quickly and Blink removed the feature immediately (Firefox had never implemented it… probably due to an oversight). It has reached the point of no-return. It seems that Blink in particular is eager to remove as much cruft as possible… but one person’s cruft is someone else’s essential tool. (<tref> had other uses too, such as allowing localization of Web pages through a server.)

    • Blending on ‘fill’ and ‘stroke’:

      We have already decided to allow multiple paint servers (color, gradient, pattern, hatch) on fills and strokes. It has been proposed that blending be allowed. This would follow the model of the ‘background-blend-mode’ property. (Blending is already allowed between various element using the ‘mix-blend-mode’ property’, available in Firefox (nightly), Chrome, and the trunk version of Inkscape.)

    • CSS Layout Properties:

      The SVG attributes: ‘x’, ‘y’, ‘cx’, ‘cy’, ‘r’, ‘rx’, ‘ry’ have been promoted to properties (see SVG Layout Properties). This allows them to be set via CSS. There is an experimental implementation in Webkit (nightly). It also allows them to be animated via CSS animations.

    A pink square centered in SVG if attributes supported, nothing otherwise.

    A test of support of ‘x’, ‘y’, ‘width’, and ‘height’ as properties. If supported, a pink square will be displayed on the center of the image.

    Day 4


    • Shared path segments (Superpaths):

      Sharing path segments between paths is quite useful. For example, the boundary between two countries could be given as one sub-path, shared between the paths of the two countries. Not only does this reduce the amount of data needed to describe a map but it also allows the renderer to optimize the aliasing between the regions. There is an example polyfill available.

      We discussed various syntax issues. One requirement is the ability to specify the direction of the inserted path. We settled for directly referencing the sub-path as d=”m 20,20 #subpath …” or d=”m 20,20 -#subpath…”, the latter for when the subpath should be reversed. We also decided that the subpath should be inserted into the path before any other operation takes place. This would nominally exclude having separate properties for each sub-path but it makes implementation easier.

    • Here, MySubpath is shared between two paths:

        <path id="MySubpath" d="m 150,80 c 20,20 -20,120 0,140"/>
        <path d="m 50,220 c -40,-30 -20,-120 10,-140 30,-20 80,-10
                         90,0 #MySubpath c 0,20 -60,30 -100,0 z"
      	style="fill:lightblue" />
        <path d="m 150,80 c 20,-14 30,-20 50,-20 20,0 50,40 50,90
                         0,50 -30,120 -100,70 -#MySubPath z"
      	style="fill:pink" />

      This SVG code would render as:

      Two closed paths sharing a common section.

    The two closed paths share a common section.

  • Stroke position:

    An often requested feature is to be able to position a stroke with some percentage inside or outside a path. We were going to punt this to a future edition of SVG but there seems to be quite a demand. The easiest way to implement this is to offset the path and then stroke that (remember, one has to be able to handle dashes, line joins, and end caps). If we can come up with a simple algorithm to offset a stroke we will add this to SVG 2. This is actually a challenging task as an offset of a Bezier curve is not a Bezier… thus some sort of approximation must be used. The Inkscape ‘Path->Linked Offset’ is one example of offsetting. So is the Inkscape Power Stroke Live Path Effect (available in trunk).

  • Symbol and marker placement shorthands, revisited:

    After feedback from mappers, we have decided to include the symbol and marker placement shorthands: ‘left’, ‘center’, ‘right’, ‘top’, and ‘bottom’.

  • Units in path data:

    Currently all path data is in User Units (pixels if untransformed). There is some desire to have the ability to specify a unit in the path data. Personally, I think this is mostly useless, especially as units (cm, mm, inch, etc.) are useless as there is no way to set a preferred pixel to inch ratio (and never will be). The one unit that could be useful is percent. In any case, we will be investigating this further.

  • Lots of other technical and administrative topics were discussed: improved DOM, embedding SVG in HTML, specification annotations, testing, etc.

    September 05, 2014 01:12 PM

    September 04, 2014


    The inkscape.org website has been upgraded to include a newer version of the django-cms framework. Allowing contributors to this website to update the website's content, keep track of changes and much more.

    Also in this release is the profile page, which now has InkSpaces; user created galleries where files (svg images) can be uploaded to the system. Each user starts off with a small 10MB quota of space in this initial roll out phase.

    The gallery page provides an overview of all the published artworks so far and allows users to browser other inkscape user's art and download them to see how they were made.

    This upgrade should also allow release file and Addons/extentions to be hosted directly on the site instead of on sourceforge and other file searching services. Improving inkscape's delivery of pre-built binaries to users.

    Development on the website continues over on launchpad: https://launchpad.net/inkscape-web

    September 04, 2014 02:55 AM

    September 02, 2014


    It's about that time again as we near the release of 0.91! The Inkscape team and community is winding down development and preparing to release Inkscape 0.91. Given that we will be releasing a new version of Inkscape, we need to have a new About Screen image for the release.


    October 1, 2014


    Having your art be the About Screen for the new version of Inkscape and a credit for your work.


    Preliminary judging will be done by the Inkscape community on DeviantART. The community judging period will be from October 2, 2014 - October 8, 2014. When we have an official “Top 3”, they will then be turned over to the Inkscape developers for final judging. Please note that once turned over to the developers, after they have chosen the winner they may have requests for modifications.

    More details on how to enter and all the various rules: DevianART journal

    September 02, 2014 04:29 AM

    July 18, 2014


    The Inkscape community is proud to announce the stable bug-fix release of Inkscape version 0.48.5. This is the fifth bug fix release for 0.48 and it contains over 60 bug fixes to improve stability and functionality on all platforms (over 190 for OS X since our last available package!). Check out the release notes for a summary of some of the fixes and improvements, the milestone page for the full list of closed bug reports, or just jump right to download your package for Windows, Linux or Mac OS X!

    We will be focusing our efforts on 0.91 (previously 0.49) and are not currently planning any further bug-fix releases in the 0.48 series at this time.

    July 18, 2014 10:33 PM

    July 07, 2014


    The Graphical Web conference, formerly "SVG Open", is THE conference for those interested in SVG.

    SVG is the native, core file format for Inkscape and thus Tav's talk will expand upon the next version of SVG "SVG 2.0" and it's role in both web design and graphics art.

    The topic for this year's conference is "Story Telling" and will take place from August 27th through 30th in Winchester, England. Additional information can be found at The Graphical Web Website

    July 07, 2014 06:59 PM

    June 29, 2014


    Just a note for anyone still pointing to the RSS feed: I migrated the blog to exclusive Atom syndication some time ago. Please point your feed reader or syndication service at http://moonbase.rydia.net/index.atom intead.

    June 29, 2014 10:00 AM

    June 14, 2014


    Both students are making progress on their projects.

    Tomasz Boczkowski extended the SVG compliance test suite that Inkscape uses. Additionally, he has implemented a TileView widget which will be used throughout the application. He has already put it to use in the Glyphs dialog as well as the Swatches dialog.

    Krzysztof Kosiński is currently working on creating a prototype interface between CGAL boolops and 2Geom.

    June 14, 2014 10:08 PM

    June 13, 2014

    Kees Cook

    In 2009, I reported this bug to glibc, describing the problem that exists when a program is using select, and has its open file descriptor resource limit raised above 1024 (FD_SETSIZE). If a network daemon starts using the FD_SET/FD_CLR glibc macros on fdset variables for descriptors larger than 1024, glibc will happily write beyond the end of the fdset variable, producing a buffer overflow condition. (This problem had existed since the introduction of the macros, so, for decades? I figured it was long over-due to have a report opened about it.)

    At the time, I was told this wasn’t going to be fixed and “every program using [select] must be considered buggy.” 2 years later still more people kept asking for this feature and continued to be told “no”.

    But, as it turns out, a few months later after the most recent “no”, it got silently fixed anyway, with the bug left open as “Won’t Fix”! I’m glad Florian did some house-cleaning on the glibc bug tracker, since I’d otherwise never have noticed that this protection had been added to the ever-growing list of -D_FORTIFY_SOURCE=2 protections.

    I’ll still recommend everyone use poll instead of select, but now I won’t be so worried when I see requests to raise the open descriptor limit above 1024.

    © 2014, Kees Cook. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License.
    Creative Commons License

    June 13, 2014 07:21 PM

    May 28, 2014

    Ryan Lerch

    Máirín Duffy has done 2 iterations of branding ideas, so here is another one from me covering a slightly different initial pass. This time, simple lines and a lot less curves on everything but the cloud.

    Sources here



    May 28, 2014 09:11 PM

    Bouncing back on Mo’s post on fedora.next logo / branding ideas, here are a few tweaks and new ideas for the cloud logo. I know the cloud one is the easiest one to do, but here are a few ideas:


    May 28, 2014 06:57 PM

    May 22, 2014

    Inkscape Tutorials

    EPS import works out-of-the-box for most inkscape users on Linux, however, on Windows EPS support does not work by default. It is possible with manually installing software called ghostscript, and tweaking a few settings. This tutorial explains in detail how to get EPS import working for Inkscape for windows.

    May 22, 2014 09:46 PM

    May 19, 2014

    Inkscape Tutorials

    Here is great tutorial on creating simple water droplets in inkscape. It demonstrates the use of the the ellipse tool, basic node editing to create shapes and using gradients to emulate light and depth.

    May 19, 2014 03:21 PM

    May 12, 2014

    Inkscape Tutorials

    Butterscotch Shenannigans is a small (2 person) indie game developer from Saint Louis with a bunch of highly rated games available for iOS, Android and PC.


    The awesome thing about this indie shop is that they use Inkscape for the creation of all their in-game visual assets. A few of their recent games include:

    Quadropus Rampage

    A hilarious epic Endless Roguelike Brawler with awesome art made in inkscape:

    Runner 2013-05-22 19-35-05-38

    Towelfight 2 : The Monocle of Destiny

    A Twin Stick Arena Adventure with art also made in inkscape:

    Forest 1136x640


    They also have a new game in development called Crashlands, which is a massive mobile crafting/survival game.
    alltogether snipped_newtiles

    as an added bonus, Sam (one of the devs) also uploads narrated time-lapse videos of how he creates these assets in Inkscape:

    May 12, 2014 10:15 PM

    In this tutorial, you are going to learn a technique in inkscape to create a soft, feathered background.


    The beauty of this technique comes from the fact that it relies heavily on clones, and live path effects. You spend a little time rigging up the effect, and then you can fluidly change the clone originals to update the result.

    A bit confused? Just follow the steps, and hopefully everything will become clear!

    Spawn a Spectacular Spiro

    First up, we need to draw a curve with 5 points, and add the Spiro path effect to make it nice and smooth.

    Detailed Steps:

    1. Draw a Curved Path
      Using the pen tool, draw a curved path with 5 points. Make sure that all segments are curves.

  • Open Path Effects
    Open up the Path Effects dialog using Path > Path Effects

  • Add New Effect
    Making sure your path is still selects, click on the + icon at the bottom of the Path Effects dialog to add a new path effect to the path.

  • Add Spiro Effect
    In the Add Path Effect dialog that appears, choose the Spiro Spline option, then click the Add button.

  • Gaze at Spiro
    Your curve should look a lot smoother now; that is the awesomeness of the spiro.
  • Taper the spiro with pattern on path

    Next up, add a triangle “brush” to our spiro curve using the Path Effect Pattern on Path.

    Detailed Steps:

    1. Draw a Triangle
      Using the pen tool, draw a triangle

  • Copy to Clipboard
    Select the triangle, and copy it to the clipboard using Edit > Copy. After copying it to the clipboard, feel free to delete it. (or keep it if you are sentimental about your triangles)

  • Add Pattern on Path
    Like when adding the spiro path effect, open the Path Effects dialog, click on the + at the bottom to add a new path effect. This time, choose Pattern on Path from the dialog, then press the Add button

  • Paste the Triangle
    In the path effects dialog, Click the clipboard icon to paste the triangle we copied in step 2. The triangle is the pattern (“brush”) we are putting on our path (the spiro).

  • Admire Tapered Sprio
    your tapered spiro should look something like this.
  • Unset the original

    In this phase, we unset the fill and the stroke of the tapered curve that we are going to clone later

    Detailed Steps:

    1. Unset Fill
      Right click on the “None” label next to fill in the bottom right corner, and choose “Unset Fill” from the menu that appears

  • Unset stroke
    Right click on the black box next to stroke in the bottom right corner, and choose “Unset Stroke” from the menu that appears

  • Bring in the Clones

    Next, we need to clone our path, move the clone away from the original, change the colour, and duplicate it several times.

    Detailed Steps:

    1. Select Path
      Using the select tool, select the path.

  • Clone Path
    Clone the path once, using Edit > Clone > Create Clone or ALT + D

  • Move Clone
    Move the Clone away from the original to a different part of your drawing

  • Change Clone Colour
    Change the colour of the clone either with the palette or the Fill / Stroke dialog. Note that at this point only the clone should change colour. If both objects change, you are likely changing the colour of the original

  • Duplicate 30X
    Duplicate the coloured clone 30 or so times using Edit > Duplicate or CTRL + D

  •  Jitter, jitter, jitter, those clones

    In this phase, we are going to use the tweak tool to jitter the position of our 30 clones, as well as jitter some the saturation and lightness values of the clones.

    Detailed steps:

    1. Select all 30
      Using the select tool, select all 30 of your clones. (the easiest way to do this is to click and drag around the clones.)

  • Tweak Tool
    Switch to the tweak tool by clicking the tweak tool icon from the toolbox.

  • Choose Move objects Mode
    From the Tweak tool’s Tool control bar, choose the Move Objects mode:

  • Click n Drag
    Now click and drag the tweak tool over the clones and watch them bounce around. You may need to play with the Width and Force values of the tweak tool. Note also, that the selection outline of the objects is usually not shown when in the tweak tool (glance at the status bar to confirm you, indeed, have them selected). Your end result should look something like this:

  • Lower opacity
    With the 30 clones still selected, open the Fill / Stroke Dialog, and lower the opacity of the clones. In my example, I chose a value around 30%.

  • Tweak the colours
    Still, with the 30 selected, switch back to the tweak tool, and this time set the mode to Jitter Colours. Then make sure the only 2 values checked  / toggled are saturation and lightness. Note that in the below example (because the inkscape window is smaller) the channels are hidden in a dropdown. In a larger window they will show as toggle buttons in the toolbar.

  • Click n Drag (again)
    As with step 4, click and drag over the clones and watch their colours change slightly. If the change too much, consider tweaking the Force value

  • Where the magic happens

    This is the phase where we play with the original that all our clones are based off, as well as our triangle “Brush”.

    Detailed Steps:

    1. Change to Node tool
      First, select the Black original , and change to the node tool. The familiar node editing handles should appear

  • Play with the spiro
    Play with the nodes of your spiro to make a better curve. If you have done all the previous steps correctly, your blue creation should update with the changes to the black original path. Play around til you get something that you like.
    Click to view slideshow.

  • Edit pattern Source:
    Click on the Show pattern Source button in the Path Effects dialog, and somewhere on the inkscape canvas, your triangle should appear (you may need to zoom out to see where it appears. if it is far from your drawing, select all 3 nodes and move it closer.)

  • Now, using the node tool, edit the triangle shape, adding and moving nodes. Your changes should update as you go on the black original path, and the blue clones. Magic, huh?
    Click to view slideshow.
  • Finishing off

    Here we duplicate our 30 clones a bit more, rotate each group a bit, and tweak the opacity of each group

    Detailed Steps:

    1. Group your 30 Blue clones together   image8945

    2. Now duplicate the group about 2-3 times, and rotate each one a bit, and play with the opacity of the groups:

  • Now, draw a rectangle over the area, and use a clipping path to create your nice square background:
    image8989 image9000
  • Keep Playing

    Remember, that you can still play with the black original path, and your triangle brush path to tweak and change your background even more:

    Click to view slideshow.

    May 12, 2014 07:07 PM

    May 09, 2014

    Inkscape Tutorials

    Here is a great tutorial on how to create a decal / sticker with inkscape. It is a good explanation of how to use the star tool in inkscape, how to align objects, and some of the advanced techniques of the text tool, including kerning and putting text on a path (creating curved text)



    May 09, 2014 03:47 PM

    May 07, 2014

    Kees Cook

    The Linux Security Summit is happening in Chicago August 18th and 19th, just before LinuxCon. Send us some presentation and topic proposals, and join the conversation with other like-minded people. :)

    I’d love to see what people have been working on, and what they’d like to work on. Our general topics will hopefully include:

    • System hardening
    • Access control
    • Cryptography
    • Integrity control
    • Hardware security
    • Networking
    • Storage
    • Virtualization
    • Desktop
    • Tools
    • Management
    • Case studies
    • Emerging technologies, threats & techniques

    The Call For Participation closes June 6th, so you’ve got about a month, but earlier is better.

    © 2014, Kees Cook. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 License.
    Creative Commons License

    May 07, 2014 06:31 PM

    May 06, 2014

    Inkscape Tutorials

    Here is tutorial that covers some awesome text tricks with inkscape

    May 06, 2014 07:10 PM