Missing SVG graphic features - rounded corners 2

Limitations of SVG about rounded corners

In the previous post, we discussed about an interesting topic in SVG design: How to add rounded corners to rectangles and the challenges of implementing separate rounded rectangles. We learned that while adding rounded corners is a breeze in design software, there are a number of challenges when implementing this design using SVG code.

Today, we're going to delve deeper, exploring the challenges in implementing rounded corners when working with non-rectangular graphic elements and current solutions, especially for complex shapes made up of paths.

Adding rounded corners to complex shapes made of paths in SVG

Rounding complex shapes made up of paths is a technical challenge in SVG. This involves converting the vertices that make up the <path> element into rounded corners, creating curved shapes with smooth transitions rather than simple straight lines or folded corners. To better visualize the process of adding rounded corners to open path shapes in SVG. A simple example is provided below.

SVG code for an open path graphic composed:

<svg width="239" height="159" viewBox="0 0 239 159" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 123.5L51.5 30.5L92.5 153.5L146.5 1C149.833 34.5 157.5 104.5 157.5 104.5C157.5 104.5 181.167 65.5 192.5 44.5L237 108.5" stroke="#FF6600" stroke-width="3"/></svg

SVG code for rounded open path graphics:

<svg width="239" height="100" viewBox="0 0 239 100" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 88.5L40.5533 16.0665C44.6817 8.31006 56.089 9.26692 58.8676 17.6028L83.2988 90.8965C86.3082 99.9245 99.0357 100.043 102.212 91.0722L131.556 8.20392C135.122 -1.86714 150.001 -0.091437 151.132 10.5323C152.236 20.8981 153.344 31.2046 154.32 40.2328C155.346 49.7319 167.756 52.4491 172.615 44.2224C176.53 37.5947 180.725 30.4197 184.57 23.6949C188.271 17.224 197.53 16.7343 201.786 22.8545L237 73.5" stroke="#FF6600" stroke-width="3"/></svg

As we can see from the SVG code above, adding rounded corners to <path> elements in SVG is not a straightforward process. This is because the standard<path> element does not provide a property or method to add rounded corners directly. Instead, we must use SVG path commands to simulate the rounded corner effect. Specifically, this can be accomplished in the following steps:

1. Use the M command (moveto) to move to a specific point in the path.
2. Use the Q command (quadratic Bézier curve) or other Bézier curve commands (e.g., C for cubic Bézier curve) to create rounded curves that convert straight segments into smooth arcs.

With these commands, developers can precisely control the contour of the path to achieve the desired rounded corner effect.

Limitations of other SVG attributes for simulating rounded corners

The SVG 2.0 specification introduces the stroke-linecap and stroke-linejoin attributes, which provide more customization options for the styling of lines and polygons. stroke-linecap's round option simulates the effect of rounded corners at the endpoints of a line, while stroke-linejoin's round option simulates the rounded appearance of line joins. These properties visually produce rounded edges, adding a smooth transition effect to shapes.

Introduces open path graphic code implemented with the SVG stroke-linejoin attribute:

<svg width="239" height="156" viewBox="0 0 239 156" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 124.5L51.5 31.5L92.5 154.5L146.5 2C149.833 35.5 156.7 103.1 157.5 105.5C158.3 107.9 181.167 66.5 192.5 45.5L237 109.5" stroke="#FF6600" stroke-width="3" stroke-linejoin="round"/></svg

However, it is important to understand that the stroke-linejoin property does not create a true rounded corner effect directly on the geometry of the drawing. Instead, it achieves the appearance of rounded corners by changing the way the path is rendered. Specifically, when stroke-linejoin is set to round, it visually rounds corners by generating a rounded transition at the junction of adjacent line segments in the path.

Note that the stroke-linejoin property does not accept a specific radius value to define the size of the rounded corners. It is not used to specify the radius of the rounded corners, but rather to simulate the appearance of rounded corners by changing the rendering algorithm. Therefore, stroke-linejoin="round" does not directly control the exact size of rounded corners, but rather provides a way to create rounded transitions at path inflection points.

For designs that require precise and complex rounded corners, developers often need to manually manipulate SVG's <path> element. Traditional SVG has limitations when simulating rounded corners, especially in terms of visualization and design flexibility, because these rounded corners are not based on real geometric shapes, resulting in a lack of precision when scaling or displaying at high resolution. In addition, for non-linear paths, such as curves and Bezier curves, SVG's simulation properties do not apply, limiting their use. Manually editing <path> elements can be challenging for users unfamiliar with SVG path syntax, and even experienced developers may find the code lengthy and difficult to maintain. Any small numerical adjustment can result in significant changes to the path data.

To understand this more intuitively, here's a set of examples of adjusting the value of rounded corners, showing how you can precisely control the size and shape of rounded corners by manually editing the <path> element.

SVG code for open path vertices with rounded corners of value 3:

<svg width="239" height="139" viewBox="0 0 239 139" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 113.5L48.216 26.67C49.4545 24.343 52.8767 24.6301 53.7103 27.1308L89.7397 135.219C90.6425 137.927 94.4607 137.963 95.4136 135.272L142.017 3.66118C143.087 0.639866 147.527 1.16361 147.856 4.35184C150.643 31.3738 154.71 68.8971 156.542 85.7234C156.852 88.5729 160.58 89.4029 162.056 86.9457C168.837 75.6558 181.695 54.0744 190.16 38.7783C191.243 36.8216 194.009 36.6703 195.286 38.5064L237 98.5" stroke="#FF6600" stroke-width="3"/></svg

SVG code for open path vertices with rounded corner value of 7:

<svg width="239" height="117" viewBox="0 0 239 117" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 99.5L43.8373 20.8966C46.7272 15.467 54.7123 16.1368 56.6573 21.9719L86.0592 110.178C88.1657 116.497 97.075 116.58 99.2985 110.301L136.039 6.54275C138.535 -0.506986 148.932 0.73309 149.716 8.17054C151.622 26.2459 153.728 45.7905 155.269 60.0008C155.989 66.65 164.69 68.5672 168.11 62.82C173.9 53.0922 181.072 40.9087 186.984 30.4505C189.553 25.9082 196.021 25.564 199 29.8482L237 84.5" stroke="#FF6600" stroke-width="3"/></svg

SVG code for rounded corners of open path vertices with a value of 10:

<svg width="239" height="100" viewBox="0 0 239 100" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M2 88.5L40.5533 16.0665C44.6817 8.31006 56.089 9.26692 58.8676 17.6028L83.2988 90.8965C86.3082 99.9245 99.0357 100.043 102.212 91.0722L131.556 8.20392C135.122 -1.86714 150.001 -0.091437 151.132 10.5323C152.236 20.8981 153.344 31.2046 154.32 40.2328C155.346 49.7319 167.756 52.4491 172.615 44.2224C176.53 37.5947 180.725 30.4197 184.57 23.6949C188.271 17.224 197.53 16.7343 201.786 22.8545L237 73.5" stroke="#FF6600" stroke-width="3"/></svg

VGG: Simplifying Rounded Corners for Complex Graphics

VGG Specs takes a different approach to path description than SVG by defining all curve points declaratively, simplifying the path representation and reducing the difficulty for users to understand and implement. VGG Specs' approach is more intuitive and concise than the command-based path description of traditional SVG.

VGG Specs provides an efficient solution for creating and adjusting rounded corners, with flexible methods for setting them for different types of graphic elements.

For rectangular shapes, VGG Specs introduces a radius field that allows the developer to specify the radius of the rounded corners for each vertex individually via an array. This design simplifies the setting of rounded corners and increases flexibility because different sizes of rounded corners can be applied to each vertex.

For complex shapes defined by the <path> element, VGG Specs further refines the control by providing a radius field for each curve control point that accepts a floating point value to precisely define the radius of each fillet. This design allows developers to fine-tune each corner of a path shape to achieve highly accurate visual effects.

In addition, VGG Specs also works with polygonal shapes such as triangles or pentagons. Not only does it provide a radius field to set a uniform radius for rounded corners, but it also allows curve points to be used to set different radii for each vertex in the graph, thus meeting a wide variety of design needs.

With these improvements, VGG Specs significantly improves the efficiency and quality of graphic design while lowering the technical barrier, allowing developers to focus more on the realization of ideas and designs.

For example, to add rounded corners to the vertices of a <path> element, simply specify a pixel value to the radius attribute, such as radius="10". Not only does this approach greatly simplify the creation of rounded corners, but it also makes resizing them intuitive and easy - just change the value of the radius attribute.

To learn about the specific properties and usage of VGG Specs, visit VGG Docs for detailed information.

Additionally, VGG has open-sourced the underlying engine, VGG Runtime, with cross-platform rendering and execution capabilities. We will continue discussions through a series of pitfalls with SVG as a vector graphics format, and showcase the graphical capabilities of VGG as well as its advantages over SVG. Please stay tuned, and we welcome everyone to participate in building the VGG open-source community together.

https://discord.com/invite/89fFapjfgM