Search code examples
mathsvgpathrounded-corners

SVG - Maths behind rounded corners with A/a or C/c

As I delve into SVG, I find myself trying to round corners in <path>s.

Contemplating web examples and looking at the answers to similar but more specific questions, I see that the most common ways to do so are using curves or arcs of some sort.

The idea behind arcs (A/a) seems pretty straight forward, but a blog post on how to figure out the maths was nowhere to be easily found or in not well-organized websites.

After seeing examples that use C/c I was pretty lost, and I couldn't find a well formatted and united blog post.

The world would be greatful if there was an SO answer with a few resources on nice posts for rounding edges or explaining the maths and implementation directly

The answer should assume:

  • no libraries (maybe as extra references, but not library-only answers)
  • paths with corners at non-orthogonal angles (non-90deg)
  • how it would be easier at certain specific angles/lengths
  • differences in efficiency between using arcs and curves (which one is best size-wise to use for what purpose and in what case)
  • generic examples (specific but not-hard-to-visualize values, out of 100 for example, are fine)

The answer can just list well-presented and introduced resources, and need to explain what is expected to find in the link along with a short description and summary

Solution

  • What maths are you trying to figure out?

    Assuming you want "round" corners, meaning circular, then in most cases arcs will be what you want to use. And it has the advantage that there is normally no maths to figure out. You will have the start point of the arc (where the incoming path segment stopped). Then to add an arc, you just need to provide it with:

    1. the radius of the curve you want
    2. the rotation of the arc relative to the X axis. This will be 0 for circular arcs, and therefore for your case also.
    3. the large arc flag. For every arc there will be two potential arcs: the shortest arc between the two points, or the "long way" around the circle
    4. the sweep flag. This is the direction: clockwise or anti-clockwise

    5. the end point of the arc

      enter image description here

    All pretty straightforward really. You may need some maths to work out where the end of the arc will be, but that's pretty much it.

    The full explanation for all these parameters to the A command can be found in the Paths section of the SVG spec.

    https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands