<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">
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>
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>
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 or drawing, selecting and moving paths 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
	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)
	Serializing items in an SVG document using printNode() -- * Serializing a simple SVG document including script from HTML GetCTM -- finding the bounding box after transformations
	passing events back and forth between SVG and HTML*
	Exploring SVG DOM*
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

---

The fancy stuff:

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

older fancy stuff*

Bunches of new examples.

SVGOpen 2007 remarks

SVGOpen 2008:

Edges of Plausibility: Outline or Paper
Filter Effects: Paper or Exercises

or Solutions:

1. Exercise A
2. Exercise B
3. Exercise C
4. Exercise D

Rotating slide show (some are still IE-only)

---

Unsolved problems (at least for me)

SVG Questions

---

* -- Working only in Internet Explorer. Firefox 2.x does not yet support SMIL nor many filters. Opera 9.5 will run most things if I find time to rewrite them properly.

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

Text following Bezier curve either as curve changes shape or as text changes its startOffset	letting text follow a bezier curve (IE only)	<text> <textPath xlink:href="#c"> Doc.getElementById("c") setAttribute ("d", B);
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
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 *
	Bezier drawing tool *