Rectángulo redondeado en SVG

Este ejemplo muestra cómo redondear los bordes de un rectángulo con el lenguaje SVG. La tarea es sencilla, ya que en la etiqueta básica RECT, que nos sirve para el dibujo de rectángulos, tenemos dos propiedades: rx y ry.

Ambas propiedades permiten redondear los bordes de la coordenadas X y las coordenadas Y.

Así podríamos tener el siguiente código:

<rect width="200" height="100" rx="20" ry="20" />

Todos los bordes se redonderarian 20 pixels.

Ahora que tendríamos un efecto muy curioso si redondeásemos tanto los bordes cómo el ancho y alto del rectángulo. Consiguiendo círculos y elipses…

Circulo

<rect x="50" y="50" rx="100" ry="100" width="100" height="100" />

Elipse

<rect x="50" y="50" rx="100" ry="200" width="200" height="100" />