Scalable Vector Graphics, or SVG, is a language for creating vector graphics. Vector graphics are awesome because they have excellent browser support and can be used to show illustrations and data visualizations.

There are a number of elements that SVG provides to display shapes on a screen. Some of these include

Circles

Rectangles

Lines

Paths

and many more

Keep reading to get a better understanding of how these elements work.

### <circle>

The simplest `<circle>`

includes three attributes:

cx — The position of the center of the circle along the X axis

cy — The position of the center of the circle along the Y axis

r — The radius of the circle

Run the pen below to visualize a `<circle>`

. You can adjust the range input sliders to change the values of the attributes described above.

### <rect>

The simplest `<rect>`

includes four attributes:

x — The position of the upper-left corner of the rectangle along the X axis

y — The position of the upper-left corner of the rectangle along the Y axis

width — The width of the rectangle

height — The height of the rectangle

Run the pen below to visualize a `<rect>`

. You can adjust the range input sliders to change the values of the attributes described above.

### <path>

Paths are like lines that you direct around the SVG canvas.

The simplest `<path>`

includes one attribute:

- d — Defines a path to follow

Within the `d`

attribute, you can direct the path to…

move (M)— “Jump” to a point without drawing a line

line (L)— Draw a line to the point described

curve (C or Q)— Draw a curved line to the point described

arc (A)— Another method of drawing a curved line to the point described

close (Z) — Draw a line from the current point to the first point

Run the pen below to visualize a `<path>`

. You can adjust the range input sliders to change the `d`

attribute.

### Bezier curves in <path>

You can describe a curve in a path using the bezier method. Inside the `d`

attribute, after giving the `C`

command, you write numbers describing the curve:

The X value of the first control point

The Y value of the first control point

The X value of the second control point

The Y value of the second control point

The X value of the curve destination

The Y value of the curve destination

Run the pen below to visualize a `<path>`

with a bezier curve. You can adjust the range input sliders to change the values of the curve described above.

### Quadratic curves in <path>

Another way you can describe a bezier curve in a path is by using the quadratic method. Inside the `d`

attribute, after giving the `Q`

command, you write numbers describing the curve:

The X value of the control point

The Y value of the control point

The X value of the curve destination

The Y value of the curve destination

Run the pen below to visualize a `<path>`

with a quadratic curve. You can adjust the range input sliders to change the values of the curve described above.

You can combine all of these elements to create an illustration or data visualization on the web. Additionally, there are many more elements and features SVG provides to facilitate drawings like this. You can learn more in MDN’s SVG Tutorial.