SVG animation with JavaScript and SMIL |
Why is SVG important? See SVG Overview for lots of good reasons that you should use SVG. |
SVG in the browser Despite SVG's status as a W3C recommendation, you'll need to make sure your browser can see it. |
W3C and SVG I've been involved in the SVG Interest Group, and have engaged in some babble about extending the spec to include new and wilder things. Here is another view of some of said babble. |
A link to the W3C's An SVG Primer for Today's Browsers and several links to other informative SVG sites |
Site contents |
|
SVG with JavaScript animations (no SMIL, so working in all modern browsers) | ||
Effects | Using HTML or JavaScript to change SVG | SVG tags used |
Reusing SVG objects to simplify code. | using "use" for symmetry | <use> |
flipping an image like a coin | transform=matrix |
transform="matrix(a b c d e f)" evt.target.setAttribute("onclick",code) |
animated oscillation and distortion of user-defined JPEG image | warping an image | <clipPath> |
Transparent gradient mask shrinks and expands over image | transparency mask applied to image |
<radialGradient> |
A collection of bezier curves are all changed in similar ways | lots of bezier curves floating |
same as above |
changing gradient is applied to objects replicated across a pattern. | moving beziers
embedded in a pattern over eyeballs to create moire effect (best in IE and Opera) |
same as above |
User inserts new points at some proportion of the distance along a Bezier curve. | new objects along Bezier |
createElementNS, setAttribute, getPointAtLength(), getTotalLength |
adjusting the position of a stop, of cx and of the radius of the gradient. | Adjusting a radial gradient | <radialGradient > <stop> evt.target.ownerDocument .getElementById( ); |
adjusting the center and focal point of a radial gradient (cx,fx,fy) | grouping, rotation, and dynamic gradient | <radialGradient > <stop> .setAttributeNS( ) |
adjusting the offset, rotate and scale of a gradient | rotating a linear
gradient another and kaleidoscopic decahedra | <radialGradient > <stop> .setAttributeNS( ) |
Effects | Using HTML or JavaScript to change SVG | SVG tags used |
Examples: SVG with SMIL (no JavaScript) (Working in IE/ASV and Opera. Dec. 2008: Firefox has SMIL on the way [reference]) | ||
Effects | Standalone SVG w/SMIL | SVG tags used |
spirals of color | moving ovals only 38 lines of markup -- no script |
<ellipse> |
Reusing SVG objects to simplify code. | using and reusing |
<use> |
pattern / dynamic gradient |
grid with
rotating gradient 1 grid with rotating gradient 2 |
<pattern> |
Transparent gradient mask shrinks and expands over image | mask and gradient opacity |
<radialGradient> |
Clippaths for warping | clipPaths for warping (IE and Opera) | <clipPath> |
Intersecting clipPaths | playing with clipPaths |
<clipPath> |
Text animated along a Bezier curve as text changes its startOffset | Animating the startOffset of text on a curve using a negative value for startOffset (IE only) |
<text> |
radial gradient with spread method | bullseye patterns with SMIL | <radialGradient spreadMethod="reflect"> |
Effects | Standalone SVG w/SMIL (IE and Opera) | SVG tags used |
Examples using both SMIL and JavaScript. (Working in IE/ASV and Opera. Dec. 2008: Firefox has SMIL on the way [reference]) | ||
Effects | Standalone SVG w/SMIL | SVG tags used |
Rotating an image and its clipping path (clipPath or feComposite) | Clip or
composite? SMIL or JavaScript? | <feImage > |
User determines rows and columns and nature of juxtaposition. | Dynamic slices and juxtaposition of images (Notes: It works well in Opera 9.5, but seems to run out of memory in IE. Of course the SMIL doesn't work in FF, Chrome.or Safari yet) | createElementNS(xmlns,"clipPath"); |
pattern / dynamic gradient |
grid with
rotating gradient 1 grid with rotating gradient 2 |
<pattern> |
Transparent gradient mask shrinks and expands over image | mask and gradient opacity |
<radialGradient> |
Intersecting clipPaths | playing with clipPaths |
<clipPath> |
Text following Bezier curve either as curve changes shape or as text changes its startOffset | Text crawling along a Bezier curve. |
<text> |
Clock shows current time. | Clock with impressionist tinge | cloneNode |
pattern / dynamic gradient | pattern with rippling gradient |
<pattern> |
Growing a triangular polygon nondeterministically | Crawling triangles | cloneNode gradientTransform removeChild |
Effects | Standalone SVG w/SMIL (IE and Opera) | SVG tags used |
SVG and Filters. Filters provide ways of combining and transforming not just vector graphics but bitmapped graphics (such as JPEG images) as well. Most of these do not work (yet) in Firefox, but Opera 9.0 now supports many of these effects.
Textures and scenes- based primarily on feTurbulence, these compound filters are meant to convey some familiar things. an older version
Filter effects (Opera, IE/ASV and Firefox) Effects Using HTML or JavaScript to change SVG SVG tags used Transparent gradient mask shrinks and expands over image transparency mask applied to image <radialGradient>
<stop>
<mask>
<rect>
<image
style="mask:url(#i)">A series of offsets are constructed in JavaScript and embedded into a gradient. The gradient's red channel is then used to displace the picture above it. Other pictures may be substituted by user. building custom gradients to ripple under an image <filter>
<feImage>
<feDisplacementMap>
.setAttribute( )
removeChild( )
.createElementNS( )
user actions animate blurring of path, text, and JPEG image. Compare SMIL w/Javascript. <feGaussianBlur>
<animate attributeName>path filled with gradient is subjected to user-selected turbulence in a JavaScript animation turbulence1 <feTurbulence>
<feDisplacementMap>
<radialGradient>
<stop>
<path>Arithmetic operator of feComposite Combining original image with desaturated version <feColorMatrix type="hueRotate">
<feComposite in="SourceGraphic" operator="arithmetic">Matrix convolutions convolve and composite <feBlend>
<feComponentTransfer>
<feConvolveMatrix>Subtracting images Image=(A-B) and
Image=(B-A)<feComponentTransfer>
<feFuncR type="table">
<feComposite>Tiling with svg content feTile with two
merged feFlood's<feFlood>
<feMerge><feMergeNode>
<feTile/>
(and probably an <animate> or two
for good measure)Slicing an image -- the slow way using feOffset's and feTile's to slice an image (wait 10-20 seconds for it to render) <feImage>
<feMerge><feMergeNode>
<feTile/>
<feOffset>Slicing images using dynamically built checkerboards with feDisplacement -- fast but unpredictable? attempt1
attempt2
attempt3<feImage>
<feDisplacementMap>Quick slices but not easily separated. Using a filter, every other cell of a dynamic grid is filled with a different image. flicker.svg <feImage>
<feComposite>
<g/><!--consisting of checkerboard squares-->A cloudy day filterTurbulence <feImage>
<feTurbulence>
<feMorphology>
<feComponentTransfer>
<feColorMatrix>Complex textures (compound filters often begun with feTurbulence) Textures and scenes <tags variety="many"> Using feImage and feComposite to do something like a clipPath, only different. star-clips <feImage>
<feComposite>
<animateTransform>Barber pole: Simulating cylindrical rotation by dragging a rectangle through a clipPath barberpole Effects Using HTML or JavaScript to change SVG SVG tags used
Tiling
(tessellations with JavaScript or <pattern>)Effects Using HTML or JavaScript to change SVG SVG tags used Toroidal tilings with random four-regular pseudo-graphs of genus one -- change the crossing density to eliminate loops and multilines.
tiling the plane with subgraphs <tags>See also some links that explain how triangular knot-tiles are generated. tiling the plane with triangular subgraphs
the same thing in HTML -- the rescale button is working on this one in IE -- HTML widgets come in handy sometimes
<tags> Speaking of knots. They can be used for highway-construction. Traveling over and under parts of a knot. Measure the screen and then tile away. Lots of animation. filling the browser window with clickable hexagons <tags> behind triangular tessellation Animated rotating gradient
More rotating gradients<gradientTransform>
<animateTransform>Triangular tiling with animated gradients, using <pattern> Sunrise in Tokyo Rotating squares and triangles using <pattern> Recombinant Scrambled Egg: Using <pattern> to do non-rectilinear (but rational) things. pentagonal tile Effects Using HTML or JavaScript to change SVG SVG tags used
SVG with DOM and JavaScript
(toward building applications in SVG)Description Links SVG tags used Drawing programs are natural for SVG -- Inkscape is very good, but how about one that is web-based? Here we do some very simple things.
creating and dragging (simplified code)
creating and dragging (manually or automatically)
<tags>dragging objects around <tags> drawing and moving rectangles around <tags> Experiment with textarea (working in IE, FF, and Safari so far) <tags> Dr. Whitfield and I recently published a paper on how to do this in a way that is computationally efficient. drawing random polygons (why it's hard)
drawing random polygons (an O(N^3) heuristic, that often works)I think this is the current version of this program. (there are several laying around) See also this project (built in VML and running only in IE) -- it was my inspiration for getting started with SVG) SVG graph drawing package and something similar with lexical, declarative or Euclidean proximity
Non-affine transformations of bricks (using multiple gradients) An SVG HSB picker with conserved real estate Serializing a simple SVG document including script from HTML
GetCTM -- finding the bounding box after transformations
Fancier random walk (see below for a simple one) Smiling random walk Effects Using HTML or JavaScript to change SVG SVG tags used
Simple templates
A standard template involving namespaces, script, tags, and DOM calls.
The simplest SVG document (working across browsers)
Artsy stuff -- Art from my recent exhibit: some SVG, some HTML, some both; most require MSIE.
Bunches of examples developed for the SVG Primer
Some newer examples (waiting to be categorized)
link to SVGOpen 2007 remarks
SVGOpen 2008:
SVGOpen 2010:
<replicate> -- in preparation
Filter Effects Workshop
SVGOpen 2011
SVG & SVG Open: a retrospective
Flavoring metric spaces with gravity
Declarative randomness: a proposal to bring power to the people
The future of The Graphical Web
Rotating slide show (some are still IE-only)
Unsolved problems (at least for me)
* -- Working only in Internet Explorer. Firefox (4 or higher and Opera 9 or higher) will support most of these if I ever find the time to rewrite them.
See copyright notice.
See also:
Send comments to david.dailey@sru.edu .
Leftovers needing work (things that might only work in IE at present):
User-provided image with user-provided text key scrambles image based on permutation determined by key. dynamically built animations and clip-paths with image scrambling
*(Have only got animation working in IE) createElementNS("image");
createElement("animate");
<clipPath>
<use xlink:href="#R"/>
</clipPath>something similar with mouse activity drawing, selecting and moving paths around * using linear gradients along textpaths Nonlinear gradients* <font><glyph>
<gradientTransform>
<animateTransform>Older work with filters - There are more than 30 examples here, since there are dozens of interesting filter effects that can be applied and scads (or is it zillions?) of ways of combining these effects. Work with filters * passing events back and forth between SVG and HTML* Serializing items in an SVG document *
using printNode() --Bezier drawing tool *