Missing SVG graphic features - rounded corners 1

Background

What is SVG: Simply put, SVG is a kind of vector graphics format. Unlike those vector-based design files that are large in file size, SVG is in pure text form and is light enough to be used along with code.

However, in practice, the exported SVG cannot accurately reproduce the rendering effects that the designer draws in the design tool. In this article, we will discuss the missing feature of rounded corners in SVG.

Rectangles of all kinds

In SVG, the rounded corners of a rectangle can be defined using the rx (horizontal radius) and ry (vertical radius) attributes of the <rect> element. When all corner radius are the same, it is called a unified rounded rectangle. The right figure in the following image is a unified rounded rectangle.

Below is an SVG example code for creating a unified rounded rectangle:

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"<rect width="300" height="300" rx="60" fill="#0286FF" fill-opacity="0.75"/></svg

But there is a special case where it is difficult to realize using the SVG rx and ry properties. Let's take a look at the example below:

Notice anything different? Each corner of the rectangle on the right has been assigned a different radius. When it's necessary to set different radius for each corner to create an individual corner rounded rectangle, SVG's rx and ry properties fall short. This design can be realized uniquely with rectangles among all shapes.

In the following example, in order to implement a design effect similar to Figma's in SVG, we typically need to use the <path> element to create a rectangle with independent rounded corners.

You may notice that the rx and ry attributes used to define corner radius in the <rect> element are not present. Instead, a series of complex path commands are used. This is because the <rect> element in SVG does not support setting different radius values for each corner of the rectangle; instead, SVG path commands must be used to draw this effect.

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V222C300 265.078 265.078 300 222 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg

As we can see, while creating rectangles with independent rounded corners is straightforward in design software, implementing the same effect in SVG requires writing longer and less intuitive code. This difference may lead to significantly increased development time and efforts when dealing with more complex graphics and paths.

The complexity and challenges of handling rounded corners in SVG

In design and development collaboration, a common issue is the designers' lack of understanding of the SVG specification. They often expect the vector graphics drawn in design software to be directly implemented through code. However, developers may encounter challenges when reproducing designs in code, especially for special graphics such as individual corner rounded rectangles. This challenge becomes even more daunting when the original SVG files are unavailable.

In the handoff from design to development, although theoretically the SVG images exported by designers should be directly usable by developers, the reality is often not that simple. Especially when fine-tuning the values of individual corner radius, even if developers know the specific values required, they typically still rely on designers to re-edit the original design files and to export new SVG images. This workflow not only adds significant time costs but may also involve additional communication costs, as it requires conveying and confirming requirements between designers and developers.

Furthermore, attempting to bypass design and directly modify the <path> elements in SVG images through code is also challenging. For example, suppose we need to reduce the radius of the rounded corner at the bottom-right of a rectangle from 78 pixels to 28 pixels.

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V222C300 265.078 265.078 300 222 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg

SVG code example with a rounded corner radius of 78 pixels (left in the image)

<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg"<path d="M0 96C0 42.9807 42.9807 0 96 0H254C279.405 0 300 20.5949 300 46V272C300 287.464 287.464 300 272 300H122C54.6213 300 0 245.379 0 178V96Z" fill="#0286FF" fill-opacity="0.75"/></svg

SVG code example with a rounded corner radius of 28 pixels (right in the image)

As shown in the example, fine-tuning the values of individual corner radius in SVG is an extremely challenging task. Developers need to have a deep understanding of SVG path data to correctly parse and adjust complex path commands, which is technically very difficult and almost impractical.

So, is there any other method that developers can use to create rectangles with independent rounded corners?

Other Solutions

You may consider using HTML and CSS to simplify such issues, but this requires developers to not only be familiar with SVG's limitations but also to master other web standards and find suitable solutions from them. While this approach is feasible, it significantly increases difficulty and does not thoroughly solve the problem.

What we want is SVG to effortlessly and efficiently implement any design created in design tools. If there are other convenient methods to implement individual corner rounded rectangles in SVG, feel free to share your experience.

A Better Solution

VGG Specs provides a simplified approach to create rounded rectangles. Through the radius property, developers can define the radius of each corner in a concise manner. Learn more about the specific properties at Radius | VGG Docs.

For example, to set different corner radius for a rectangle, simply specify the pixel values: 96 pixels for the top-left corner, 46 pixels for the top-right corner, 78 pixels for the bottom-right corner, and 122 pixels for the bottom-left corner.

The VGG specification enables the quick and easy implementation of rounded rectangles with independent corner radius through simple attribute declarations.

So, what is VGG？

What’s VGG

Just as SVG stands for Scalable Vector Graphics, VGG stands for Very Good Graphics.

VGG is the next-generation vector graphics standard based on JSON.

It includes multiple specifications such as design, layout, animation, and interaction, aiming to significantly improve usability and ease of use. VGG aims to drive the future of vector graphics and serves as an open standard for industry use.

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.