Demonstration of SVG vector format with animation and interactivity
This page is the placeholder for SVG. All styling and scripting is done inside of SVG files. Each SVG can be edited and used separately.
The problem: Animated GIF spinners
Notice rough edges, and scaling quality loss:
Ideal scenario (rare in the real world): white background, no need to scale, no spinning speed control, no color change:
The solution: The same tiles with the spinners in SVG format
The same SVG scaled from 34 pixels above to 500 pixels (
show):
SVG: Animation (Spinners)
Moving circles along the path
Changing color of circles
Together: Moving circles along the path while changing their colors
Rotating circle with gradient transparency
Full control over the code is easy. Direction of rotation, speed, color... List can go on.
SVG: Interactivity - Mouse and Keyboard Events
Mouseover (achieved by CSS inside of SVG file)
Mouse Click. For keyboard events click on the button first, then press Space. (CSS and scripting inside of SVG file)
SVG: Filters
Blur
Dropshadow
