Mastering SVG’s stroke-miterlimit Attribute | CSS-Tips

So, SVG has this stroke-miterlimit presentation attribute. You’ve in all probability seen it when exporting an SVG from a graphic editor program, or maybe you discover out you would take away it with out noticing any change to the visible look.

After quantity of analysis, one of many first issues I found is that the attribute works alongside stroke-linejoin, and I’ll present you ways in addition to a bunch of different issues I realized about this fascinating (and presumably neglected) SVG attribute.

TLDR;

stroke-miterlimit is dependent upon stroke-linejoin: if we use spherical or bevel for joins, then there’s no must declare stroke-miterlimit. But when we use miter as an alternative, we will nonetheless delete it and possibly the default worth might be sufficient. Beware that many graphic software program editors will add this attribute even when is just not mandatory.

What’s stroke-linejoin?

I do know, we’re truly right here to speak about stroke-miterlimit, however I wish to begin with stroke-linejoin due to how tightly they work collectively. That is the definition for stroke-linejoin pulled straight from the SVG Working Group (SVGWG):

stroke-linejoin specifies the form for use on the corners of paths or primary shapes when they’re stroked.

This implies we will outline how the nook seems to be when two traces meet at some extent. And this attribute accepts 5 attainable values, although two of them have no browser implementation and are recognized by the spec as vulnerable to being dropped. So, I’ll briefly current the three supported values the attribute accepts.

miter is the default worth and it simply so occurs to be a very powerful one of many three we’re taking a look at. If we don’t explicitly declare stroke-linejoin within the SVG code, then miter is used to form the nook of a path. We all know a be a part of is ready to miter when each edges meet at a pointy angle.

However we will additionally select spherical which softens the sides with — you guessed it — rounded corners.

The bevel worth, in the meantime, produces a flat edge that form of seems to be like a cropped nook.

What’s stroke-miterlimit?

OK, now that we all know what stroke-linejoin is, let’s get again to the subject at hand and decide aside the definition of stroke-miterlimit from the e book Utilizing SVG with CSS3 and HTML5:

[…] on actually tight corners, it’s important to lengthen the stroke for fairly a distance, earlier than the 2 edges meet. For that motive, there’s a secondary property: stroke-miterlimit. It defines how far you possibly can lengthen the purpose when making a miter nook.

In different phrases, stroke-miterlimit units how far the stroke of the sides goes earlier than they’ll meet at some extent. And solely when the stroke-linejoin is miter.

So, the stroke-miterlimit worth will be any optimistic integer, the place 4 is the default worth. The upper the worth, the additional the nook form is allowed to go.

How they work collectively

You in all probability have conceptual understanding now of how stroke-linejoin and stroke-miterlimit work collectively. However relying on the stroke-miterlimit worth, you would possibly get some seemingly quirky outcomes.

Working example: if stroke-linejoin is ready to miter, it may possibly truly wind up wanting just like the bevel worth as an alternative when the miter restrict is simply too low. Right here’s the spec once more to assist us perceive why:

If the miter size divided by the stroke width exceeds the stroke-miterlimit then [the miter value] is transformed to a bevel.

So, mathematically lets say that this:

[miter length] / [stroke width] > [stroke-miterlimit] = miter
[miter length] / [stroke width] < [stroke-miterlimit] = bevel

That is smart, proper? If the miter is unable to exceed the width of the stroke, then it should be a flat edge. In any other case, the miter can develop and kind some extent.

Typically seeing is believing, so right here’s Ana Tudor with a beautiful demo displaying how the stroke-miterlimit worth impacts an SVG’s stroke-linejoin:

Setting miter limits in design apps

Do you know that miter joins and limits can be found in most of the design apps we use in our on a regular basis work? Right here’s the place to search out them in Illustrator, Figma, and Inkscape.

Setting miter limits in Adobe Illustrator

Illustrator has a technique to modify the miter worth when configuring a path’s stroke. You’ll find it within the “Stroke” settings on a path. Discover how — true to the spec — we’re solely in a position to set a worth for the “Restrict” when the trail’s “Nook” is ready to “Miter Be part of”.

One nuance is that Illustrator has a default miter restrict of 10 quite than the default 4. I’ve observed this each time I export the SVG file or copy and paste the ensuing SVG code. That could possibly be complicated once you open up the code as a result of even when you don’t change the miter restrict worth, Illustrator provides stroke-miterlimit="10" the place you would possibly count on 4 or maybe no stroke-miterlimit in any respect.

And that’s true even when we select a special stroke-linejoin worth aside from “Miter Be part of”. Right here is the code I bought when exporting an SVG with stroke-linejoin="spherical".

<svg viewBox="0 0 16 10"><path stroke-width="2" stroke-linejoin="spherical" stroke-miterlimit="10" d="M0 1h15.8S4.8 5.5 2 9.5" fill="none" stroke="#000"/></svg>

The stroke-miterlimit shouldn’t be there because it solely works with stroke-linejoin="miter". Listed below are a few workarounds for that:

• Set the “Restrict” worth to 4, as it’s the default in SVG and is the one worth that doesn’t seem within the code.
• Use the “Export As” or “Export for Display” choices as an alternative of “Save As” or copy-pasting the vectors instantly.

Should you’d prefer to see that fastened, be a part of me and upvote the request to make it occur.

Setting miter limits in Figma

Miter joins and limits are barely completely different in Figma. After we click on the node of an angle on a form, below the three dots of the Stroke part, we will discover a place to set the be a part of of a nook. The choice “Miter angle” seems by default, however solely when the be a part of is ready to miter:

This half works is much like Illustrator besides for the way Figma permits us to set the miter angle in diploma items as an alternative of decimal values. There are another particular nuances to level out:

• The angle is 7.17° by default and there’s no technique to set a decrease worth. When exporting the SVG, that worth is turns into stroke-miterlimit="16‘ within the markup, which is completely different from each the SVG spec and the Illustrator default.
• The max worth is 180°, and when drawing with this feature, the be a part of is mechanically switched to bevel.
• When exporting with bevel be a part of, the stroke-miterlimit is there within the code, nevertheless it retains the worth that was set when the miter angle was final lively (Illustrator does the identical factor).
• When exporting the SVG with a spherical be a part of, the trail is expanded and we not have a stroke, however a path with a fill coloration.

I used to be unable to discover a technique to keep away from the additional code that leads to the exported SVG when stroke-miterlimit is unneeded.

Setting miter limits in Inkscape

Inkscape works precisely the way in which I’d count on a design app to handle miter joins and limits. When choosing a a miter be a part of, the default worth is 4, precisely what it’s within the spec. Higher but, stroke-miterlimit is excluded from the exported SVG code when it’s the default worth!

Nonetheless, if we export any path with bevel or spherical after the restrict was modified, the stroke-miterlimit might be again within the code, until we maintain the 4 items of the default within the Restrict field. Similar trick as Illustrator.

These examples will work properly if we select the Save As → Optimized SVG possibility. Inkscape is free and open supply and, on the finish of the day, has the smartest code so far as stroke-miterlimit goes and the various choices to optimize the code for exporting.

However in case you are extra aware of Illustrator (like I’m), there’s a workaround to bear in mind. Figma, due to the diploma items and the enlargement of the strokes, feels just like the extra distant from the specs and anticipated habits.

Wrapping up

And that’s what I realized about SVG’s stroke-miterlimit attribute. It’s one other a kind of easy-to-overlook issues we would discover ourselves blindly chopping out, significantly when optimizing an SVG file. So, now when you end up setting stroke-miterlimit you’ll know what it does, the way it works alongside stroke-linejoin, and why the heck you would possibly get a beveled be a part of when setting a miter restrict worth.