<clipPath>
<image>
<use>
.cloneNode
setAttribute("transform",Matrix)

<radialGradient>
<stop>
<mask>
<rect>
<image 
style="mask:url(#i)">

same as above

same as above
and <radialGradient>
<pattern>
<circle>
<use>

<ellipse>
<animateTransform>
<animateColor>
<use>
<radialGradient>

<use>
<ellipse>

<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>

<radialGradient>
<stop>
<mask>
<rect>
<image 
style="mask:url(#i)">

<clipPath>

<image>

<animate>

<clipPath>
<image>
<use>
<animate AttributeName>

<text>
<textPath
xlink:href="#c">

<radialGradient spreadMethod="reflect">
O.setAttributeNS(null, attr, x) 

<feImage >
<feComposite>
<animateTransform>
<clipPath>
<image>
.setAttribute ( )
.getElementById( )

createElementNS(xmlns,"clipPath");
<clipPath>
setAttributeNS()

<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>

<radialGradient>
<stop>
<mask>
<rect>
<image style="mask:url(#i)">

<clipPath>
<image>
<use>
<animate AttributeName>

<text>
<textPath
xlink:href="#c">
Doc.getElementById("c")
setAttribute ("d", B);

cloneNode
stroke-dasharray
animateTransform

<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>

 

---

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)
	Calculating angles (SVG & HTML)
I think this is the current version of this program. (there are several laying around)	SVG drawing package
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 SVG graph drawing for mobile networks
	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)

Using <object> in a way that works in IE

A simple grid

A simple random walk

---

The fancy stuff:

Artsy stuff -- Art from my recent exhibit: some SVG, some HTML, some both; most require MSIE.

older fancy stuff*

Bunches of examples developed for the SVG Primer

Some newer examples (waiting to be categorized)

link to SVGOpen 2007 remarks

SVGOpen 2008:

Edges of Plausibility: Outline or Paper

SVGOpen 2009 :

SVGOpen 2010:

polygons

<replicate> -- in preparation

Filter Effects Workshop

Paper

Exercises

Solutions:

SVGOpen 2011

Accessibility & Text

Omni-Opticon

SMIL workshop

SVG extensions for online mapping

SVGOpen 2012

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)

SVG Questions

font play and problems

---

* -- 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: 

Dailey / Javascript Tasks

Dailey/JavaScript Fun and Games

Dailey main page

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 *	Exploring SVG DOM*