Active SVG

SVG with embedded JavaScript

(If the gears do not turn, reload the page.)

Objective: Showcase SVG / JavaScript projects such as a working clock, a slideshow, and turning gears.

Problems and solutions:

[1] JavaScript may not be properly detected within an SVG file. Use the CDATA directive.

[2] SVG images that include script code will not work inside the <img> tag. Use the <object> tag to include the moving images.

[3] The gears do not turn the same speed on all browsers. Detect the browser and change the gear speed accordingly.