Mastering SVG's stroke-miterlimit Attribute

SVG's stroke-miterlimit property, you may have seen it when exporting SVG in the graphics editor, or found that the visual effect did not change in any way after deleting it. This article explores this SVG property in depth and reveals its association with stroke-linejoin property.

Brief description

stroke-miterlimit depends on stroke-linejoin : if round or bevel is used at the connection, there is no need to declare stroke-miterlimit . But if you use miter , the default value may be sufficient even if you delete it. It should be noted that many graphics software add this property even when it is not needed.

Detailed explanation of stroke-linejoin

stroke-linejoin property defines the shape of the path or the outline of the basic shape at the corner. It determines the corner appearance of the two lines at the intersection . This property accepts five possible values, but two of them are not implemented by the browser and are identified by the specification as possible to be deleted. Here are three supported values:

• miter (default): Two lines intersect at acute angles.
• round : The corner is rounded.
• bevel : The corner is flat, similar to the cut corner.

stroke-miterlimit detailed explanation

stroke-miterlimit property defines the distance the edge of the outline extends when creating miter corner. This property is only valid when stroke-linejoin is set to miter .

stroke-miterlimit value can be any positive integer, with the default value of 4. The larger the value, the further the corner shape allows to extend.

Attribute synergy

stroke-linejoin and stroke-miterlimit work together. When stroke-linejoin is set to miter and miter length is divided by the stroke width exceeds stroke-miterlimit , miter will be converted to bevel .

in other words:

 <code>[斜接长度] / [笔划宽度] > [stroke-miterlimit] = bevel [斜接长度] / [笔划宽度] </code>

If miter cannot exceed the stroke width, it should be a flat angle; otherwise, miter can grow and form a point.

miter restriction settings in design applications

Many design applications provide ways to set miter connections and restrictions. Here are some examples:

Adobe Illustrator

Illustrator allows modifying the miter value when configuring the strokes of the path. It can be found in the Stroke settings of the path. It should be noted that the "Limit" value can only be set when the "Nether" of the path is set to "Mirror Connection".

The default miter limit for Illustrator is 10, not 4 in the specification. When exporting SVG files or copy-pasting SVG code directly, Illustrator will add stroke-miterlimit="10" even if miter limit value is not changed. Illustrator adds this property even if stroke-linejoin is set to round . Solution:

• Set the Limit value to 4.
• Use the Export As or Export As screen options instead of Save As or Copy and Paste vectors directly.

Figma

In Figma, click on the node of the shape angle, and under the three points in the "Stroke" section, you can find the place where the corners are connected. By default, the Miter Angle option appears, but only appears if the connection is set to miter .

Figma allows setting the miter angle in degrees units instead of decimal values. Some subtle points to note:

• The default angle is 7.17°, and a lower value cannot be set. When exporting SVG, the value becomes stroke-miterlimit='16' in the tag.
• The maximum value is 180°. When drawing, the connection will automatically switch to bevel .
• When exporting using bevel connection, stroke-miterlimit retains the value set when the last miter angle is activated.
• When exporting using round connections, the path expands, no longer has strokes, but a path that fills the color.

Inkscape

Inkscape works in a consistent way as expected. When selecting miter connection, the default value is 4. When the value is the default value, stroke-miterlimit is excluded from the exported SVG code. However, if any paths with bevel or round are exported after modifying the limit, stroke-miterlimit will return to the code unless the value in the "Limit" box is kept at the default value of 4.

Summarize

stroke-miterlimit property is easily overlooked, especially when optimizing SVG files. Understanding how it works, how it works in conjunction with stroke-linejoin and why bevel connections may occur when setting miter limit values ​​will help to use this property better.

The above is the detailed content of Mastering SVG's stroke-miterlimit Attribute. For more information, please follow other related articles on the PHP Chinese website!