SVG Essentials Examples

This repository contains interactive examples and other files created for SVG Essentials, 2nd Edition by J. David Eisenberg and Amelia Bellamy-Royds (O'Reilly, 2014). The repository also includes the examples used in a related post on the O'Reilly Radar blog.

If you're reading the online version of the book, you'll see these examples embedded in your browser (they are hosted as Github pages). If you're reading the print book or PDF/ePUB/Kindle formats, these are the examples given as links.

Many examples display the code as well as the final SVG, and the code can usually be live edited; type within the code blocks that have a green border, or use the drop-down lists to switch between options, then select “Refresh” to see the results, or “Reset” to undo.

To save on typing long URLs, here's an index of all the interactive examples:

• Chapter 1. Getting Started
  • Basic shapes—circle
  • Basic shapes—filled circles
  • Basic shapes—lines
  • Transforming the coordinate system
  • Basic shapes—polylines
  • Using the <path> element
  • Adding a label
• Chapter 2. Using SVG in Web Pages
  • (No live examples—although, really, all the live examples are examples of using SVG in web pages!)
• Chapter 3. Coordinates
  • Using default coordinates
  • Explicit use of units
  • Units on the svg element
  • Using a viewBox
  • Using preserveAspectRatio
• Chapter 4. Basic Shapes
  • Basic lines
  • Demonstration of stroke-width
  • Demonstration of stroke color
  • Demonstration of stroke-opacity
  • Demonstration of stroke-dasharray
  • Demonstration of the rectangle element
  • Demonstration of rounded rectangles
  • Demonstration of circles and ellipses
  • Demonstration of the polygon element
  • Effect of different fill-rules
  • The polyline element
  • Values of the stroke-linecap property
  • Values of the stroke-linejoin attribute
• Chapter 5. Document Structure
  • Use of internal stylesheet
  • The defs element
  • Symbols versus groups
• Chapter 6. Transforming the Coordinate System
  • Moving the coordinate system with translation
  • Uniformly scaling a graphic
  • Sequence of transformations
  • Rotation around the origin
  • Rotation around a center point
  • skewX and skewY
• Chapter 7. Paths
  • Using moveto and lineto
  • Elliptical arcs
  • Quadratic Bézier curves
  • Smooth quadratic Bézier curves
  • Cubic Bézier curves
• Chapter 8. Patterns and Gradients
  • Simple two-color gradient
  • Three-color gradient
  • Three-opacity gradient
  • Defining vectors for a linear gradient
  • Effects of spreadMethod values on a linear gradient
  • Radial gradient with three stops
  • Setting limits for a radial gradient
  • Setting focal point for a radial gradient
  • Effects of spreadMethod values on a radial gradient
  • Transforming patterns and gradients
• Chapter 9. Text
  • Use of text-anchor
  • Use of textLength and lengthAdjust
  • Examples of textPath
  • Text length and startOffset
• Chapter 10. Clipping and Masking
  • Clipping to a rectangular path
  • Complex clip paths
  • Mask alpha using opacity only
• Chapter 11. Filters
  • feColorMatrix hueRotate
  • feColorMatrix saturate
  • Changing brightness with feComponentTransfer
  • Gamma adjustment with feComponentTransfer
  • Thickening and thinning with feMorphology
  • feConvolveMatrix playground
  • feTurbulence playground
• Chapter 12. Animating SVG
  • The incredible shrinking rectangle
  • Multiple animations on a single object
  • Simple animation of multiple objects
  • Synchronization of animations with offsets
  • Example of repeated animation
  • Synchronizing an animation with a repetition
  • Example of animating color
  • Example of animating path and polygon
  • Animating color by specific values
  • Example of set element
  • Example of animateTransform
  • Animation along a linear path
  • Animation along a complex path
  • Animation along a complex path with auto-rotation
  • Variable speed motion along a path using keyPoints and keyTimes
  • Key frame specification in CSS
  • CSS animation playground
• Chapter 13. Adding Interactivity
  • Links in SVG
  • Links in SVG highlighted with CSS
  • Animating a link with :hover
  • Interactive Animation
  • Accessing SVG with the DOM
  • Adding mouse movement listeners
  • Changing multiple objects in a script
  • Dragging objects
  • Interacting with HTML
  • Creating new elements
• Chapter 14. Using the SVG DOM
  • Using the baseVal and animVal properties
  • Animating a clock with JavaScript
  • Drawing and animating a clock with Snap.svg
  • Click and drag events in Snap
• Chapter 15. Generating SVG
  • XSLT-generated SVG weather forecast (Uses the XSLT 1.0 processor in your browser; may not be supported in all mobile browsers.)

If you've stumbled upon this page and don't yet have your copy of SVG Essentials, be aware that the above outline only includes the interactive examples; there are some topics which were easier to describe with good old-fashioned code snippets and figures.

---

The examples are covered by the standard example permissions policy for O'Reilly books, reproduced below for your convenience:

Using Code Examples

Our books are here to help you get your job done. In general, you may use the code in our books in your programs and documentation. You do not need to contact us for permission unless you're reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from our books does not require permission. Answering a question by citing our books and quoting example code does not require permission. On the other hand, selling or distributing a CD-ROM of examples from O'Reilly books does require permission. Incorporating a significant amount of example code from our books into your product's documentation does require permission.

We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN.

If you think your use of code examples falls outside fair use or the permission given here, feel free to contact us at permissions@oreilly.com.