Index_Z

---

Chapter 1: SVG Coordinate System, Simple Shapes, and Colors

Figure 1.1: The SVG coordinate system.

Figure 1.2: A red rectangle.

Figure 1.3: Rectangles with different opacity.

Figure 1.4: A rectangle with a shadow effect.

Figure 1.5: A triangular wedge.

Figure 1.6: A rectangle with the first viewBox.

Chapter 2: Color Gradients and Style

Figure 2.1: A linear gradient rectangle.

Figure 2.2: A radial gradient rectangle.

Figure 2.3: A parallelogram.

Figure 2.4: A gradient arrow.

Figure 2.5: Dotted and dashed lines.

Figure 2.6: A pair of nested rectangles.

Figure 2.7: Rendering nested rectangles with an external stylesheet.

Figure 2.8: Inheriting style attributes.

Figure 2.9: Inheriting attributes in multiple SVG g elements.

Chapter 3: Circles, Ellipses, and path Elements

Figure 3.1: A circle.

Figure 3.2: An ellipse.

Figure 3.3: An ellipse with a linear gradient.

Figure 3.4: An ellipse with a radial gradient.

Figure 3.5: An ellipse and a rectangle with radial gradient shading.

Figure 3.6: Lumination effects with radial gradient shading.

Figure 3.7: A set of circular arcs.

Figure 3.8: Colored elliptic arcs.

Figure 3.9: Elliptic petals.

Figure 3.10: An elliptic diamond.

Figure 3.11: A set of asymmetric elliptic arcs.

Figure 3.12: A circle with a 3D effect.

Figure 3.13: A cone with linear gradient shading.

Figure 3.14: A cylinder with linear gradient shading.

Chapter 4: SVG pattern, Grid Patterns, and clipPath

Figure 4.1: A rectangular grid pattern.

Figure 4.2: A checkerboard pattern.

Figure 4.3: A 3D checkerboard pattern.

Figure 4.4: A gradient checkerboard pattern.

Figure 4.5: A multi-gradient checkerboard pattern.

Figure 4.6: A clipped cherkboard pattern.

Figure 4.7: A clipped gradient checkerboard pattern.

Figure 4.8: A slanted Venetian gradient pattern.

Chapter 5: Quadratic and Cubic Bezier Curves

Figure 5.1: A quadratic Bezier curve.

Figure 5.2: A multi-quadratic Bezier-bound gradient checkerboard pattern.

Figure 5.3: A Venetian quadratic Bezier-bound gradient checkerboard pattern.

Figure 5.4: A pair of cubic Bezier curves.

Figure 5.5: Linear gradient shading and cubic Bezier curves.

Figure 5.6: A double cubic Bezier curve.

Figure 5.7: A double cubic Bezier curve.

Figure 5.8: A cubic quadratic Bezier curve.

Chapter 6: SVG Transformations

Figure 6.1: Drawing rectangles with the SVG translate function.

Figure 6.2: Rotated checkerboard with the SVG rotate function.

Figure 6.3: A scaled checkerboard with the SVG scale function.

Figure 6.4: Rendering multiple scaled checkerboards.

Figure 6.5: A set of scaled cubic Bezier curves.

Figure 6.6: Drawing rectangles with the SVG skew function.

Figure 6.7: Drawing rectangles with the SVG matrix function.

Figure 6.8: DRAWING SCALED CYLINDERS WITH THE SVG SCALE FUNCTION.

Figure 6.9: Drawing scaled skewed hourglass figures.

Chapter 7: SVG Filters

Figure 7.1: An feGaussianBlur filter primitive.

Figure 7.2: An feGaussianBlur with a shadow effect.

Figure 7.3: An feGaussianBlur filter pattern.

Figure 7.4: An feFlood filter primitive.

Figure 7.5: An feImage filter primitive.

Figure 7.6: An feMerge filter primitive.

Figure 7.7: An feTurbulence filter primitive.

Figure 7.8: An feTurbulence filter primitive and an SVG pattern.

Figure 7.9: A quadratic Bezier curve and a feTurbulence filter.

Figure 7.10: A blur filter triangle pattern with a quadratic Bezier curve.

Figure 7.11: feGaussianBlur filter triangles and a checkerboard Pattern.

Chapter 8: Displaying Text

Figure 8.1: A string of text.

Figure 8.2: A string of text with a colored bordered.

Figure 8.3: Text strings with text decoration.

Figure 8.4: Text strings with the tspan element.

Figure 8.5: A string of shadowed text.

Figure 8.6: A string of shadowed blur text.

Figure 8.7: A rotated string of text.

Figure 8.8: A text string with a linear gradient.

Figure 8.9: Text strings with different opacity values.

Figure 8.10: A text string with a blur filter.

Figure 8.11: Text following a specified path.

Chapter 9: Simple SVG Animation

Figure 9.1: A snapshot of a rotating line segment.

Figure 9.2: Another snapshot of a rotating line segment.

Figure 9.3: A snapshot of rotating rectangles.

Figure 9.4: Another snapshot of rotating rectangles.

Figure 9.5: A snapshot of rotating ellipses.

Figure 9.6: Another snap-shot of rotating ellipses.

Figure 9.7: A snapshot of a rectangle with multiple animation effects.

Figure 9.8: Another snapshot of a rectangle with multiple animation effects.

Figure 9.9: A snapshot of multiple rectangles and chained animation effects.

Figure 9.10: Another snapshot of multiple rectangles and chained animation effects.

Figure 9.11: A snapshot of a rotating string of text.

Figure 9.12: Another snapshot of a rotating string of text.

Figure 9.13: A snapshot of a text string undergoing multiple animation effects.

Figure 9.14: Another snapshot of a text string undergoing multiple animation effects.

Chapter 10: SVG for Bar Charts and Line Graphs

Figure 10.1:   A bar set.

Figure 10.2:   A variable bar set.

Figure 10.3:   A labeled grid.

Figure 10.4:   A bar graph.

Figure 10.5:   A bar graph with a three-dimensional effect.

Figure 10.6:   A simple line graph.

Figure 10.7:   Multiple line graphs.

Chapter 11: HTML, ECMAScript, and SVG DOM

Figure 11.1: An SVG document to display an SVG rectangle.

Figure 11.2: An HTML page with a scaled image in an SVG document.

Figure 11.3: URL-enabled ellipses.

Figure 11.4: A mouse-aware rectangle.

Figure 11.5: A mouse-aware rectangle.

Figure 11.6: A circle whose color changes after a mouse click.

Figure 11.7: Displaying attribute values of SVG elements.

Figure 11.8: A circle whose radius changes after a mouse click.

Figure 11.9: A mouse-aware scaling ellipse.

Chapter 12: Interactive SVG and ECMAScript

Figure 12.1: A modifiable path-based rectangle.

Figure 12.2: A mouse-aware pair of circles.

Figure 12.3: Removing a rectangle.

Figure 12.4: Adding a circle.

Figure 12.5: Dynamically updating multiple SVG elements.

Figure 12.6: Adding circles to a grid of rectangles.

Figure 12.7: Overlaying a rectangle with dynamic rectangles.

Chapter 13: ECMAScript and SVG Animation

Figure 13.1: A toggling quadrilateral.

Figure 13.2: Dynamically adding a grid of circles.

Figure 13.3: A dynamically modified quadratic Bezier curve.

Chapter 14: ECMAScript and Polar Equations

Figure 14.1: A set of sine-based petals.

Figure 14.2: A sine-based wire frame effect.

Figure 14.3: Multi-fixed point mesh pattern and Archimedean spirals.

Chapter 15: SVG and Pie Charts

Figure 15.1: A circular pie chart.

Figure 15.2: An elliptic pie chart.

Figure 15.3: A rotating circular pie chart.

Figure 15.4: A mouse-based rotating circular pie chart.

Chapter 16: ECMAScript, Recursion, and SVG

Figure 16.1: A set of nested triangles.

Figure 16.2: A Sierpinski curve.

Figure 16.3: A set of recursion-based ellipses.

Chapter 17: Generating SVG Documents

Figure 17.1: A red rectangle.

Figure 17.2: A bar set.

Figure 17.3: A bar set.

Chapter 18: Supplemental Patterns

Figure 18.1: A Cochleoid-based set of rectangles and arcs.

Figure 18.2: An Archimedean checkerboard pattern.

Figure 18.3: A cardioid-based set of double Bezier curves.

Figure 18.4: A cissoid-based set of ellipses with a blur filter.

Figure 18.5: An Archimedean curve with an elliptic coil.

Figure 18.6: A conchoid curve with a frosted effect.

Figure 18.7: An Archimedean curve with a frosted shadow effect.

Figure 18.8: A cosine-based loop with elliptic arcs.

Figure 18.9: A cochleoid-based curve with rotated circular arcs.

Figure 18.10: An Archimedean curve with variable-sized ellipses.

Figure 18.11: A cochleoid curve with diamond-based boxes.

Figure 18.12: A sine-based wireframe with diamond-based boxes.

Figure 18.13: An Archimedean curve with a perforated effect.

Figure 18.14: An Archimedean curve with a twisting dotted polygon.

Figure 18.15: A Lissajous curve with semi-ellipses.

Figure 18.16: An Archimedean curve with multiple semi-ellipses.

Figure 18.17: A cochleoid curve with multiple semi-ellipses.

Figure 18.18: A cochleoid curve with layered twisting elliptic arcs.

Figure 18.19: A Lituus curve with elliptic lunes.

Figure 18.20: An Archimedean curve with partial polygons.

Figure 18.21: A cochleoid with rotated partial polygons.

Figure 18.22: An Archimedean curve with rotated triangles.

Figure 18.23: An Archimedean curve with line segment to a sine curve

Figure 18.24: A twisting cosine loop with triangular pyramids.

Figure 18.25: A sine/cosine loop with trapezoids.

Figure 18.26: A cochleoid curve with layered triangles.

Color Section

Plate 1: Archimedean Spiral.

Plate 2: Modulus-based Archimedean reflected ellipses.

Plate 3: Tubular set of Archimedean ellipses.

Plate 4: Triangle-enhanced Archimedean ellipses.

Plate 5: Archimedean radial gradient spiral.

Plate 6: Cardioid set of partial-view elliptic arcs.

Plate 7: Blue circle grid with frost-like shading effect.

Plate 8: Black and white circle grid with frost-like shading effect.

Plate 9: Set of rotated triangles.

Plate 10: Cochleoid set of arcs and rectangles with shading.

Plate 11: Cochleoid set of elliptic arcs and Venetian shading.

Plate 12: Cochleoid set of double elliptic arcs.

Plate 13: Cosine-based Loop of dotted ellipses.

Plate 14: Rectangles with extreme radial gradient shading.

Plate 15: Cochleoid with rectangles, diamonds, and line segments.

Plate 16: Double cubic bezier curve.

Plate 17: Overlapping striped elliptic arcs.

Plate 18: Overlapping Venetian striped elliptic arcs.

Plate 19: Triangle with simple linear gradient shading.

Plate 20: Metallic-colored color effect.

Plate 21: Lissajous pattern of ellipses with Venetian shading.

Plate 22: Multiple Bezier curves with a common start point.

Plate 23: Metallic-colored color effect from radial gradient.

Plate 24: Grid-like overlay of a circle with 3D shading.

Plate 25: Cut-out section of a circle with 3D shading.

Plate 26: "Extreme" radial gradient shading.

Plate 27: Scaled grid-like overlay of a circle with 3D shading.

Plate 28: Double-coiled ellipses with radial gradient shading.

Plate 29: Sine-based ellipses with perturbation-style pattern.

Plate 30: Sine-based mesh with tetrahedra and Venetian shading.

Plate 31: Cone with venetians-shaded sections.

Plate 32: Lituus curve with ellipses, triangles, and Venetian Shading.

---