Mastering SVG's stroke-miterlimit Attribute

Understanding SVG’s stroke-miterlimit and How It Shapes Path Corners

SVG’s stroke-miterlimit is one of those presentation attributes that often appears in exported files without much thought. You might have deleted it from your markup and seen zero visual difference. That is because the attribute only matters in specific conditions—namely, when stroke-linejoin is set to its default value of miter. Understanding that relationship is the key to knowing when the attribute actually affects your graphics.

What stroke-linejoin Actually Controls

Per the SVG Working Group, stroke-linejoin “specifies the shape to be used at the corners of paths or basic shapes when they are stroked.” In short, it determines how the corner looks where two path segments meet. The spec lists five potential values, but only three have browser support; the other two are marked as at risk of being dropped.

The three usable values are:

• miter (default): The two edges meet at a sharp angle, extending the stroke into a pointed corner.
• round: Edges are connected with a rounded corner.
• bevel: The corner is flattened, looking like a cropped edge.

Since miter is the default, it is the only case where stroke-miterlimit comes into play.

What stroke-miterlimit Limits

“On really tight corners, you have to extend the stroke for quite a distance before the two edges meet. For that reason, there is a secondary property: stroke-miterlimit. It defines how far you can extend the point when creating a miter corner.” — Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey, Using SVG with CSS3 and HTML5

The attribute accepts any positive integer, with a default of 4. A higher value allows the miter point to extend further from the corner before the stroke is forced to change shape.

When a Miter Becomes a Bevel

There is a somewhat counterintuitive behavior: when stroke-linejoin="miter" but the miter limit is too low, the resulting shape may look like a bevel join instead. The SVG spec explains the rule:

“If the miter length divided by the stroke width exceeds the stroke-miterlimit, then [the miter value] is converted to a bevel.”

Mathematically, the condition is:

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

In practical terms: if the point of the miter would require extending beyond the allowed limit relative to the stroke width, the renderer falls back to a flat bevel edge. Otherwise, the miter is allowed to grow into a sharp point.

Miter Limits in Design Tools

The behavior of stroke-miterlimit varies noticeably between popular design applications, both in how the value is set and how it appears in exported SVG code.

Adobe Illustrator

Illustrator exposes the miter limit under the “Stroke” panel. Consistent with the spec, the “Limit” field is only enabled when the corner style is set to “Miter Join.”

However, there is a notable discrepancy: Illustrator defaults to a miter limit of 10, not the spec’s default of 4. If you export an SVG or copy the code directly, you will often see stroke-miterlimit="10" in the markup—even when you never touched that setting. This is especially confusing when the stroke-linejoin is set to round or bevel, because in those cases the stroke-miterlimit attribute is irrelevant yet still included.

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

To avoid this extra code, you have a couple of options:

• Manually set the “Limit” to 4, the SVG default. That is the only value that is omitted from the exported code.
• Use “Export As” or “Export for Screen” rather than “Save As” or copy-pasting the vector code directly.

A feature request on Adobe’s UserVoice asks for a configurable default miter limit; upvoting it may help bring the tool closer to spec.

Figma

Figma’s handling is different again. When you select the node of a corner on a shape and expand the Stroke section’s three-dot menu, you can set the join type. The “Miter angle” option is available only when the join is miter, and it is set in degrees rather than as a decimal miter ratio.

Figma’s defaults and export behavior introduce further quirks:

• The default angle is 7.17°, which translates to stroke-miterlimit='16' in exported SVG—differing from the spec default of 4.
• The maximum is 180°, and at that extreme the join is automatically converted to a bevel.
• If you export with a bevel join, stroke-miterlimit still appears, retaining the value from when the miter angle was last active.
• Choosing a round join leads Figma to expand the stroke into a filled path, so no stroke attribute remains at all.

There does not appear to be a way to prevent Figma from adding the unnecessary stroke-miterlimit attribute in exported code.

Inkscape

Inkscape behaves closest to the SVG spec. Selecting a miter join gives you a default limit of exactly 4, and when the value remains at default, stroke-miterlimit is excluded from the exported SVG entirely.

That said, if you modify the limit and then switch to a bevel or round join, the attribute will reappear in the export—unless you reset the value back to 4. The workaround is therefore the same as in Illustrator.

For the cleanest output, Inkscape’s Save As → Optimized SVG path gives you the most control and produces the neatest markup regarding stroke-miterlimit. Of the three tools, Illustrator falls in the middle—functionally similar to Inkscape, but with the odd 10 default. Figma, with its degree-based angles and automatic stroke expansion, drifts furthest from spec behavior.

Practical Takeaways

When optimizing SVG files, it can be tempting to strip stroke-miterlimit without a second thought. Now you know when you can safely do so: whenever stroke-linejoin is round or bevel. When the join is miter, the attribute controls how far the pointed corner may extend; a value too low will silently fall back to a beveled edge, and a value higher than necessary allows the point to stretch further out.