Creating basic shapes with SVG

SVG contains the following elements to create basic shapes: RECT, CIRCLE, ELLIPSE, LINE, POLYLINE, POLYGON. We also have the PATH element with which we could create any shape including the previous ones already named. We will see how to create the different basic shapes with SVG and JavaScript. We have to take into account that, to create the shapes in JavaScript, we must use DOM ‘namespace-aware’ methods.

Rectangle

SVG

JavaScript

Rounded rectangle

The rx and rv attributes are the radius of the ellipses’ axes, used to round the corners of the rectangle.

SVG

JavaScript

Circle

Based on the center of the circle which defines its position, depending on the cx and cy attributes, and on the radius of the circle defined by the r attribute.

SVG

JavaScript

Ellipse

It is similar to the circle but with two radius, rx and ry.

SVG

JavaScript

Line

Segment with a starting point and a final one.

SVG

JavaScript

Polyline

It is a group of connected straight lines, which generally define open shapes.

SVG

JavaScript

Polygon

It is a group of connected straight lines, which define a close shape.

SVG

JavaScript

We can also create shapes with programs as Illustrator or Inkscape. If we create these basic shapes from these programs, we will see that Illustrator  uses the SVG basic shapes meanwhile Inkscape only uses RECT, but it convert the rest of shapes into PATH.