Vector Addition - using SVG Graphs
We are adding 2 vectors A (in dark green) and B (in blue). The resulting vector R is shown in magenta. We can also see the parallelogram of forces.
Click the button below the graph to see another (random) example. (Sometimes the vector labels overlap. Sorry about that!)
The above illustration is an example of a scalable vector graphics file - images that are made using vectors.
More Information
An image on a computer screen is usually one of the following:
- A raster image (usually a .GIF or .PNG) that is a collection of different colored pixels (256 colors in the case of GIF, and millions of colors for PNG)
- A photograph (usually a .JPG file) that is also a collection of fixed pixels.
Problems with the above image file types are:
- You can't increase the image size without also increasing the file size, or, if you keep the file size the same, the quality of the image suffers (it becomes pixelated, or blocky).
- If you need to change the image for some reason, you need to open it in image editing software, edit it, then upload it to the server. This can be tedious when you have thousands of images, as is the case on IntMath for example.
A solution: SVG images
An SVG image is created using computer code (which looks quite similar to HTML code) and it's built on mathematical principles.
For example, in a SVG image an open blue circle of radius 50 px, with center 40 px from the left and 20 px from the top of the image is coded simply as follows:
<svg height="60" width="80">
<circle cx="40" cy="30" r="20" stroke="blue" fill="none" stroke-width="2"></circle>
</svg>
Here's the result:
Similarly, a line from the top left of the image to a point 100 px from the left and 100 px from the top would be coded as:
<line x1="0" y1="0" x2="100" y2="100" stroke="#165a71" stroke-width="2"></line>
Here's the result:
We can easily draw Bezier Curves, using the following code:
<path d="M10,10 C100,100 200,100 150,50" stroke="#f5f" fill="none" stroke-width="2"></path>
A Bezier Curve involves one or more control points that affect its curvature. They are used extensively in graphics programs, computer-aided design and manufacturing, and animated movies.
Here's the resulting Bezier Curve:
Animations and interactivity
Using SVG, we can easily produce an infinite number of different curves, without having to use image editing software.
For example, the Vector Addition interactive at the top of this page produces a new combination of vectors when you click the button using some quite straightforward javascript.
Most of the Interactive Applets here in IntMath involve animation or some interactivity, and most of them are done using SVG graphs.
More SVG Resources
- Math graphs on the Web without images
- Graphs using SVG, where you can plot whatever graph you like.
- Vector Art, an important new field of art based on vectors.
- Mathematics of Vector Art, which explains the interesting math background to SVG images.