SVG Examples from Lectures
Several of these examples are copied or lightly adapted from
the text of "SVG Essentials" by J. David Eisenberg (O'Reilly,
2002). They are reproduced without permission, for purposes of
this class only.
-
Demo page at the Adobe SVG site
including the visual building search described in the lectures.
-
The cat's face example from "SVG Essentials" as
source text, as
linked XML, and as an embedded object:
-
A simple line as
source text, as
linked XML, and as an embedded object:
-
Effects of various
stroke:
source text for stroke-width,
stroke-dasharray,
stroke-opacity, and
stroke;
linked XML for
stroke-width,
stroke-dasharray,
stroke-opacity, and
stroke;
or all as embedded objects:
-
A rectangle as
source text, as
linked XML, and as an embedded object:
-
Circles and ellipses as
source text, as
linked XML, and as an embedded object:
-
A polyline as
source text, as
linked XML, and as an embedded object:
-
A
path element with a curve as
source text, as
linked XML, and as an embedded object:
-
Construction of the whole of that curve by divide and conquer:
-
Analogous construction of two cubic Bezier curves:
-
Example cubic Bezier curves:
-
Cubic curve in
path element, as
source text, as
linked XML, and as an embedded object:
-
Path with
S-connnected curves, as
source text, as
linked XML, and as an embedded object:
-
The
text element, as
source text, as
linked XML, and as an embedded object:
-
Style parameters for text, as
source text, as
linked XML, and as an embedded object:
-
The
use element, as
source text, as
linked XML, and as an embedded object:
-
Transforming text, as
source text, as
linked XML, and as an embedded object:
-
Creating a shadow, as
source text, as
linked XML, and as an embedded object:
-
Chaining filters, as
source text, as
linked XML, and as an embedded object:
-
Merging filter results, as
source text, as
linked XML, and as an embedded object:
-
Applying
feSpecularLighting
(in a complex filter, copyright Adobe Systems), as
source text, as
linked XML, and as an embedded object:
-
A shrinking rectangle, as
source text, as
linked XML, and as an embedded object:
-
Animating more propergies, as
source text, as
linked XML, and as an embedded object:
-
Animating multiple objects, as
source text, as
linked XML, and as an embedded object:
-
Time and synchronization, as
source text, as
linked XML, and as an embedded object:
-
Discontinuous change, as
source text, as
linked XML, and as an embedded object:
-
Animating color, as
source text, as
linked XML, and as an embedded object:
-
Animating transforms, as
source text, as
linked XML, and as an embedded object:
-
Animating along a path, as
source text, as
linked XML, and as an embedded object:
