"Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation." ~Wikipedia definition

Because of their structure, SVG images can not only be made with drawing software (such as Inkscape), but also with any text editor. Image elements and animations can be dynamically created or removed with Javascript, which makes the SVG format very suited for incorporation into websites.

Below are some examples of what you can do with (dynamic) SVGs. With the exception of the final scribble example, all these images were created in a plain text editor and some Javascript!

NOTE: At this moment, Internet Explorer does not support SVG animations. This page is therefore viewed best in Chrome or Firefox!

Beside the examples below, perhaps the best way to see what you can do with SVGs on a website is by visiting my map of Heiankyō. This interactive page provides an accurate representation of the old capital of Japan in SVG format and uses Javascript manipulation to load/change content, color elements and show/hide elements.

Hover!

The first example of SVG manipulation is shown in my minigame Hover!.

A neat animation of animated squares (click the right button to see the math involved):

To create the right size and orientation of squares, some math is needed. We define two parameters for this: magnification (\(M\)) and rotation (\(\alpha\)). To create a smaller and rotated square that fits exactly in its bigger parent square, we have to find the right ratio between these parameters.

In the picture below, two squares are drawn that sketch the ideal configuration of magnification and rotation. Relevant parameters that will be used later are denoted as well.

From this picture we can derive the following equations (using simple geometry and Pythagoras' theorem):
$$\begin{align}
l + s & = a & \qquad (1)\\
a' & = Ma & \qquad (2)\\
l^2 + s^2 & = (a')^2 & \qquad (3)\\
\tan{\alpha} & = \frac{s}{l} & \qquad (4)\\
\end{align}$$

We start out by substituting equations \((1)\) and \((2)\) into equation \((3)\), which we can then rewrite as a quadratic equation:
$$\begin{align}
l^2 + (a-l)^2 & = (Ma)^2\\
l^2 + a^2-2al+l^2 & = (Ma)^2\\
2l^2 + a^2-2al & = M^2a^2\\
2l^2 - 2al + (1-M^2)a^2 & = 0
\end{align}$$

Considering that \(M\) and \(a\) are fixed parameters, we actually have a simple quadratic equation now of the form \(ax^2+bx+c=0\), where \(a=2,\;b=-2a,\;c=(1-M^2)a^2\), which is easily solved using the ABC formula (\(x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}\)), or in our case:
$$\begin{align}
l & = \frac{-(-2a) \pm \sqrt{(-2a)^2 - 4 \cdot 2 \cdot (1-M^2)a^2}}{2 \cdot 2}\\
l & = \frac{2a \pm \sqrt{4a^2 - 8a^2 + 8M^2a^2}}{4}\\
l & = \frac{a}{2} \pm \frac{\sqrt{(8M^2 - 4)a^2}}{\sqrt{16}}\\
l & = \frac{a}{2} \pm \sqrt{\frac{8M^2 - 4}{16}a^2}\\
l & = \frac{a}{2} \pm \sqrt{\frac{1}{2}M^2 - \frac{1}{4}}\;a\\
l & = \frac{a}{2}\left(1 \pm 2 \sqrt{\frac{1}{2}M^2 - \frac{1}{4}}\right)\\
l & = \frac{a}{2}\left(1 \pm \sqrt{2M^2 - 1}\right)
\end{align}$$

Now we see that \(l\) has one, two or no solutions, depending on the chosen magnification (\(M\)):
$$l(M) =
\begin{cases}
\frac{a}{2}\left(1 \pm \sqrt{2M^2 - 1}\right) & \text{if } M \gt \frac{1}{\sqrt{2}} \\
\frac{a}{2} & \text{if } M = \frac{1}{\sqrt{2}} \\
\text{undefined} & \text{if } M \lt \frac{1}{\sqrt{2}}
\end{cases}$$

Finally, we can now use equation \((4)\) to calculate the rotation that is needed to fit the smaller square into its parent:
$$\begin{align}
\alpha & = \tan^{-1} \left( \frac{\frac{a}{2}\left(1 - \sqrt{2M^2 - 1}\right)}{\frac{a}{2}\left(1 + \sqrt{2M^2 - 1}\right)} \right)\\
\alpha & = \tan^{-1} \left(\frac{1 - \sqrt{2M^2 - 1}}{1 + \sqrt{2M^2 - 1}}\right)
\end{align}$$

Simple shapes

With very simple straight and arced line elements I created some shapes and even the alphabet!

Animated scribbles

It is also possible to create any shape you want and make an animated scribble out of it.