An SVG rounded rect function

SVG has the <rect> tag. Which is lovely. Wonderfully lovely in fact. A true workhorse. And that tag also has attributes that allow you to control the radius of the corners - namely the rx and ry attributes. But these don't allow you to control the radius of each corner individually - which is often necessary or desired.

So that's what this function does. It allows you to add a rectangle with rounded corners to the SVG and control the radius of the corners individuallly. Technically, it creates a <path> element instead of a <rect> and uses that to create the relevant shape. Here's an example of an SVG element with a <rect> element using the rx and ry attributes:

<svg width="100" height="100" style="border: 1px solid black">
    <rect fill="red" stroke="black" x="10" y="10" width="80" height="80" rx="15" ry="15" stroke-width="3"></rect>
</svg>

But as stated, the rx and ry attributes of the <rect> tag don't allow you to control the corners individually. They only allow you to specify the extent of the rounding in the horizontal and vertical directions.

So that's what this function does. It's a JavaScript function that adds a <path> element to your SVG that draws a rectangle for you with rounded corners. You can turn the rounding off or increase it for one, some or all of the corners as you wish:

The SVG tag:

<svg id="mySVG" width="800" height="100" style="border: 1px solid black"></svg>

These are the calls to the roundedRect function that produces the rectangles.

svg = document.getElementById('mySVG');

roundedRect(svg,10,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},25,25,25,25);
roundedRect(svg,110,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},5,25,25,25);
roundedRect(svg,210,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},5,5,25,25);
roundedRect(svg,310,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},5,5,5,25);
roundedRect(svg,410,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},5,5,5,5);
roundedRect(svg,510,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},25,5,25,5);
roundedRect(svg,610,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},25,5,5,25);
roundedRect(svg,710,10,80,80,{fill: '#f00',stroke:'black','stroke-width': 3},{},5,25,25,5);

And this is the roundedRect function that creates the shape. There's the roundedRect function and also a function that creates the SVG <path> element.

//
// Produces a rounded rectangle.
//
// Example usage:
//
// el = roundedRect(
//    svg,               // The SVG object
//    50,50,100,100,     // The X/Y/W/H of the rect
//    {                  // SVG attributes
//     fill: '#f00',
//     stroke:'black',
//     'stroke-width': 2
//    },
//    {},                // Any styles to apply
//    10,10,10,10        // The radii of the corners. All are
//                       // optional and default to 3
// );
//
//
// @param svg   object The SVG tag
// @param x     number The X cordinate
// @param y     number The Y cordinate
// @param w     number The width
// @param h     number The height
// @param attr  object An optional object of attributes for the path
//                     tag. Default is an empty object.
// @param style object An optional object of style properties and
//                     values  for the path tag. Default is an
//                     empty object.
// @param number tl    The amount of rounding for the top left
//                     corner. Default is 3.
// @param number tr    The amount of rounding for the top right
//                     corner. Default is 3.
// @param number bl    The amount of rounding for the bottom left
//                     corner. Default is 3.
// @param number br    The amount of rounding for the bottom right
//                     corner. Default is 3.
// @return             The SVG <path> object
//
function roundedRect (svg, x, y, w, h, attr = {}, style = {}, tl = 3,  tr = 3, bl = 3, br = 3)
{
    // Perform some "bounds checking" on the corner radii - they can
    // be no more than have the width/height.
    var smallestDimension = Math.min(w, h) / 2;

    tl = Math.min(tl, smallestDimension);
    tr = Math.min(tr, smallestDimension);
    bl = Math.min(bl, smallestDimension);
    br = Math.min(br, smallestDimension);

    // Add the transform to the X and Y coordinates
    attr.transform = 'translate('+x+', '+y+')'

    //
    // This function builds the path for the rounded
    // rectangle.
    //
    var getPath = function (w,h,tl,tr,bl,br) {
        return 'M 0 ' + tl + ' A ' + tl + ' ' + tl + ' 0 0 1 ' + tl + ' 0 L ' + (w - tr) + ' 0 A ' + tr + ' ' + tr + ' 0 0 1 ' + w + ' ' + tr + ' L ' + w + ' ' + (h-br) + ' A ' + br + ' ' + br + ' 0 0 1 ' + (w - br) + ' ' + h + '  L ' + bl + ' ' + h + '  A ' + bl + ' ' + bl + ' 0 0 1 0 ' + (h-bl) + ' Z';
    };

    var path = getPath(w,h,tl,tr,bl,br);

    var el = createTag({
        svg: svg,
        type: 'path',
        attr: {
            ...attr,
            d: path
        },
        style: {
            ...style
        }
    });
    
    return el;
}




//
// A "support" function that's used to create SVG elements.
//
function createTag (opt)
{
    var ns  = "http://www.w3.org/2000/svg";
    var tag = document.createElementNS(ns, opt.type);

    // Add the attributes
    for (var o in opt.attr) {
        if (typeof o === 'string') {
        
            var name = o;

            if (o === 'className') {
                name = 'class';
            }
            if ( (opt.type === 'a' || opt.type === 'image') && o === 'xlink:href') {
                tag.setAttributeNS('http://www.w3.org/1999/xlink', o, String(opt.attr[o]));
            } else {
                if (!opt.attr[o]) {
                    opt.attr[o] = '';
                }
                tag.setAttribute(name, String(opt.attr[o]));
            }
        }
    }
    
    // Add the style
    for (var o in opt.style) {
        if (typeof o === 'string') {
            tag.style[o] = String(opt.style[o]);
        }
    }

    if (opt.parent) {
        opt.parent.appendChild(tag);
    } else {
        opt.svg.appendChild(tag);
    }

    return tag;
}

Follow the TL;DR link at the top of the page to see a very basic page that just has the code in it to create the SVG rounded rectangles.