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.