Usually to put graphics on a webpage you use a compressed bitmaped image file such as .jpg or .png.
These files create an image by defining the color of each pixel on the display. However, a more
sophisticated way to put graphics on a webpage is to code that defines how to draw the image.
For example, code could define to draw a line from one screen coordinate location to another
screen coordinate location. That code would be called a "vector".
One nice thing about vectors is that you can manipulate them mathematically, for example you could
scale a vector by dividing the length of its x and y coordinates by a scaling factor. That's why
the code used is called Scalable Vector Graphics (SVG). One nice thing about SVG is that it is
compatible with most modern browsers. In this article I'll show you how to use SVG to create
animated glistening gold text.
The first thing you have to do to use SVG is to use the opening and closing svg tags to
define your drawing area and enclose your code, as shown below.
<svg height="40" width="340">
Next, within the SVG tags you need to place opening and closing defs tags, which will
enclose definitions that will be used by graphic elements. This example uses a linearGradient,
so we put the linearGradient tags inside the defs tags, as shown below.
To define a linear gradient, you set a starting point and a stopping point, here defined in
percentages. Then you can define color stops within the gradient area. Color stops define a
color at points in the gradient, and the color will transition smoothly from one stop to another.
In this example we define a beginning stop, a middle stop, and an ending stop, as shown below.
The animate tag specifies that the attribute we're going to animate is the offset.
We then provide a list of offest values to use in the animation. We should be able to use percentages
for these values as we did in the rest of the code, but Chrome will not render the animation unless
numbers are used. For example .20 represents 20%.
The dur attribute specifies the length of the animation, which can be expressed in hours (h),
minutes (m), seconds (s) or milliseconds (ms). Then the repeatCount attribute specifies how
many times the animation should repeat, in this case it should repeat indefinite.
Now we need to define a graphic element to which to apply the linear gradient. The text
element shown below defines the location, font-family, font-size, and font-weight of the text,
and specifies to use the linear gradient we defined to fill the text. Then we provide the text.