Stroke-Alignment: A Powerful Design Tool For Beginners

Stroke-alignment is a feature in some design tools that allows users to adjust the position of a stroke or line within an object. The three main types of stroke alignment are centre, inside, and outside. Each type has its own advantages and disadvantages, and the choice depends on the specific design requirements. While some tools like Adobe Illustrator only offer centre alignment for certain objects, others like Sketch provide more flexibility by allowing users to choose from different stroke alignment options. This feature is particularly useful for designers who want to make text stand out on a busy background or achieve specific visual effects with their designs.

Stroke-alignment in Adobe Illustrator

It's important to note that stroke alignment only works on closed paths. For open paths, you can use the Stroke Width tool to create asymmetrical width profiles and achieve a similar effect. Alternatively, you can create an art or pattern brush with an invisible rectangle behind it, ensuring that the visible art is on one side of the rectangle.

When applying a stroke, you can select the stroke colour from the Color panel or the Swatches panel. You can also double-click the Stroke box to choose a colour using the Color Picker. The current colour in the Stroke box can be applied by dragging it onto the object.

The Stroke panel also allows you to adjust the stroke weight, dash sequence and adjustments, miter limit, arrowheads, width profiles, and line joins and caps. These options give you greater control over the appearance and behaviour of your strokes in Illustrator.

Stroke-alignment in CSS

The same issue exists with SVG, which also defaults to center-aligned strokes. While there is a working draft for stroke-alignment in the SVG spec, it has not been implemented. This can be problematic when changing the stroke width after exporting, as the points of shapes may not align as desired.

Some workarounds have been suggested to simulate stroke alignment in SVG. One approach involves creating a duplicate SVG object using the element and scaling it up or down to achieve the desired stroke alignment. However, this method can become complicated and may not produce accurate results in certain cases.

Another approach utilizes a combination of and elements to achieve inner and outer stroke alignments. By doubling the stroke weight and masking the stroke by the fill, inner-aligned strokes can be prevented from drawing outside the fill, and outer-aligned strokes can be contained within the fill.

While these workarounds exist, it is important to note that they may not always provide a complete solution and can require additional steps or workarounds to achieve the desired result.

Stroke-alignment in SVG

While SVG does not natively support stroke alignment, there are several workarounds and techniques to achieve similar results. One common method is to use the element to create a duplicate SVG object and adjust its position and scale to simulate inner or outer stroke alignment. This approach involves translating and scaling the duplicate object to create the desired stroke effect.

Another technique involves using clipping and masking. Clipping allows you to define an outline or path, and only the area inside the outline is visible. On the other hand, masking provides more flexibility by allowing you to control the opacity of the underlying image. By using a combination of clipping and masking, you can achieve inner and outer stroke effects by manipulating the visibility and opacity of the stroke in relation to the path.

Additionally, there have been proposals to include stroke alignment as part of the SVG specification, such as the "stroke-alignment" attribute. However, these proposals have not yet been accepted or implemented in mainstream browsers.

It is worth noting that while these workarounds can be effective, they may require additional complexity and manual adjustments. The behaviour of stroke alignment in SVG is still an active area of discussion and development, with ongoing efforts to improve its functionality and compatibility across different browsers and tools.

Stroke-alignment in a Clipping Mask

A clipping mask is an object that masks other artwork so that only areas within the shape are visible, effectively clipping the artwork to the shape of the mask. The clipping mask and the objects that are masked are called a clipping set.

When creating a clipping mask, you can set the stroke colour and size for the clipping mask path object, but you cannot set the stroke alignment to inside or outside. This is because, regardless of its previous attributes, a clipping mask changes to an object with no fill or stroke.

To achieve the desired appearance, you can reduce the size of the clipping path by the stroke weight. This will make the outer part of the stroke cover the outermost part of the underlying object, filling the desired area. Alternatively, you can use an additional path, with one for the stroke thickness and another copy on top of all paths used for the clipping mask.

Stroke-alignment in text

There are other options for stroke-alignment, such as outside-aligned and inside-aligned. These can be achieved through various methods, depending on the software being used. In Adobe Illustrator, for example, the 'Offset Path' effect can be used to move the stroke inside or outside. Another method is to use the 'Pathfinder' tool to enable the align stroke options.

In SVG, there have been proposals to include stroke-alignment as part of the SVG spec, with attributes such as stroke-alignment="inner" to position strokes within the text. However, these proposals have not yet been accepted.

The text-align property in CSS can be used to set the horizontal alignment of text, with options for left, right, centre, and justify alignments. This property affects the text within the stroke or border.

Frequently asked questions