You are previewing Building Web Applications with SVG.
O'Reilly logo
Building Web Applications with SVG

Book Description

Create rich interactivity with Scalable Vector Graphics (SVG)

Dive into SVG—and build striking, interactive visuals for your web applications. Led by three SVG experts, you’ll learn step-by-step how to use SVG techniques for animation, overlays, and dynamic charts and graphs. Then you’ll put it all together by building two graphic-rich applications. Get started creating dynamic visual content using web technologies you’re familiar with—such as JavaScript, CSS, DOM, and AJAX.

Discover how to:

  • Build client-side graphics with little impact on your web server

  • Create simple user interfaces for mobile and desktop web browsers

  • Work with complex shapes and design reusable patterns

  • Position, scale, and rotate text elements using SVG transforms

  • Create animations using the Synchronized Multimedia Integration Language (SMIL)

  • Build more powerful animations by manipulating SVG with JavaScript

  • Apply filters to sharpen, blur, warp, reconfigure colors, and more

  • Make use of programming libraries such as Pergola, D3, and Polymaps

  • Table of Contents

    1. Building Web Applications with SVG
    2. Dedication
    3. A Note Regarding Supplemental Files
    4. Introduction
      1. SVG Testimonials
        1. Jon Ferraiolo
        2. Alex Danilo
        3. Cameron McCormack
        4. Jeff Schiller
        5. Doug Schepers
      2. Who Should Read This Book
        1. Assumptions
      3. Who Should Not Read This Book
      4. Organization of This Book
      5. Conventions and Features in This Book
      6. About the Companion Content
        1. Installing the Code Samples
      7. System Requirements
      8. Acknowledgments
      9. Errata & Book Support
      10. We Want to Hear from You
      11. Stay in Touch
    5. 1. SVG Basics
      1. The What, Why, and Where of SVG
        1. The What
        2. The Why
        3. The Where
      2. Getting Started: A Simple Overview
        1. Viewing SVG
        2. Writing SVG
      3. Thirteen Examples That Show the Capabilities of SVG
        1. Example 1: Dynamic Random Landscape Drawn with JavaScript and SVG
        2. Example 2: Equidistant Positioning Points along a Bézier Curve
        3. Example 3: Simple Animation (Just 38 Lines of Markup and No Script)
        4. Example 4: Use of Gradients and Patterns
        5. Example 5: Intersecting Clip Paths
        6. Example 6: Animated Text Crawling Along a Bézier Curve
        7. Example 7: Animated Reflected Gradients with Transparency
        8. Example 8: Clock with Impressionist Tinge
        9. Example 9: Using a Filter to Create Pond Ripples over an Image
        10. Example 10: Using <replicate> to Simulate Digital Elevation Maps
        11. Example 11: Non-Affine Cobblestones
        12. Example 12: Triangular Tiling
        13. Example 13: A Web Application for Drawing Graphs (Networks)
      4. Diving In: A Step-by-Step Approach to Building a Simple SVG Document
        1. A first file
          1. A first file
            1. A first file
        2. Intermission and Analysis
          1. SVG As XML
          2. Attributes
          3. The SVG Namespace
        3. Screen Coordinates
          1. Modifying your code and experimenting
            1. Modifying your code and experimenting
            2. Accomplishing a given effect
      5. Summary
    6. 2. Creating and Editing SVG Graphics
      1. Creating Basic Vector Shapes
        1. Lines
        2. Brief Review of SVG Presentation Attributes
        3. Rectangles
        4. Circles
        5. Ellipses
        6. Polylines and Polygons
        7. Creativity with Basic Shapes
      2. Paths in SVG
        1. <path> Subcommands: M and L
        2. Fill Properties: nonzero and evenodd
      3. An Example of Building Complex Shapes
        1. Quadratic Bézier Curves: The Q Subcommand
        2. Bézier Curve Example
        3. Creating Smooth Curves: The S and T Subcommands
        4. Elliptical Arc Example
        5. Relative vs. Absolute Path Coordinates
      4. Accessing and Reusing Graphics
        1. Referencing Vector and Bitmap Images
        2. The Group Element
        3. The <use> Element
      5. Creating Patterns
      6. Case Study: Designing a Reusable Pattern
        1. Adding Basic Shapes
      7. Summary
    7. 3. Adding Text, Style, and Transforms
      1. Adding and Positioning Text
        1. The <text> Element
        2. The <tspan> Element
        3. Making Adjustments with dx and dy
        4. Text and Shapes on a Path: <textPath> and <mpath>
        5. The <tref> Element
      2. Working with Colors in SVG
        1. Named Color Values
        2. HSL
        3. RGB
      3. Creating Gradients in SVG
        1. Applying Gradients to a Path
          1. The stop-opacity Attribute
      4. Clipping and Masking with SVG
      5. Details of Transforms
        1. The translate Command
        2. The scale Command
        3. Skewing: The skewX and skewY Commands
        4. The rotate Command
          1. SVG transformations by example: Step by step
            1. SVG transformations by example: Step by step
        5. The matrix Command
        6. Adding Style Using CSS
        7. Using Media Queries to Enhance Usability
        8. Additional Capabilities of CSS3
      6. Vector Graphics, Symbol, and Button Libraries
      7. Accessibility
        1. Semantic Elements and Features
      8. Case Study: A Simple SVG Web Interface
      9. Summary
    8. 4. Motion and Interactivity
      1. Declarative Animation with SVG
        1. Getting Started
        2. Motion Along a Path
        3. Multivalued Interpolation
        4. Interacting with Animation
      2. Scripting SVG
        1. Getting Started with JavaScript and SVG
        2. Using Script to Find an Object and Change Its Attributes
          1. Example 1
          2. Example 2
          3. Example 3
          4. Example 4
          5. Example 5
          6. Example 6
        3. Adding New Content to an SVG Document
        4. Cloning Nodes
        5. Evaluating Nodes (getAttribute)
        6. SVG DOM
          1. Removing Content
        7. Measurements
          1. Points on a Curve
          2. viewBox
        8. Messages Between SMIL and Script
          1. From SMIL to Script
          2. From Script to SMIL
        9. Passing Messages Between HTML and SVG
          1. Ways of Putting SVG in HTML
          2. The Other Way Around: Putting HTML in SVG
          3. Using <object> to Embed SVG in HTML
          4. getSVGDocument()
          5. SVG Inline in HTML5
      3. Summary
    9. 5. SVG Filters
      1. The Basic <filter> Element
      2. The Basic Primitives
        1. <feGaussianBlur>
        2. <feColorMatrix>
        3. Filter Chaining with <feColorMatrix>
        4. <feComponentTransfer>
        5. <feMorphology>
        6. <feConvolveMatrix>
      3. Utility Filters
        1. Simple Utility Filters
        2. <feFlood> and <feOffset>
        3. <feImage> and <feTile>
        4. <feTurbulence>
          1. baseFrequency
          2. numOctaves
          3. type
          4. seed
      4. Lighting Effects
      5. Ways of Combining Filters
        1. <feMergeNode>
        2. <feBlend>
        3. <feComposite>
        4. <feDisplacementMap>
          1. Warping with a Simple Gradient
          2. Warping with Turbulence
          3. Spherical Warping
      6. Summary
    10. 6. SVG Tools and Resources
      1. Libraries
      2. SVG Native JavaScript Libraries
        1. D3: Data-Driven Documents
          1. Quantitative Scales
          2. Ordinal Scales
          3. Colors
        2. Pergola
        3. Raphaël
        4. Polymaps
        5. carto:net
      3. Legacy HTML Libraries
        1. jQuery
        2. Dojo
        3. Sencha
      4. Drawing Tools and Utilities
        1. Adobe Illustrator
        2. Inkscape
        3. Scour
        4. SVG-Edit
      5. Other Useful Tools
        1. Mugeda
        2. Pilat
        3. SVG Editor
        4. SVG Drawing Tool
        5. Grapher
        6. SCION
      6. Extension Tools
        1. Batik
        2. SmilScript and FakeSmile
          1. SmilScript
          2. FakeSmile
        3. <replicate>
      7. Integrated Development Environments
        1. Oxygen
        2. Adobe Dreamweaver
        3. HTML-Kit
        4. Other Useful Information
        5. Other Tools That Support SVG
      8. Miscellaneous
        1. Wikimedia and Wikipedia
        2. The Open Clip Art Library
        3. The OpenStreetMap Project
      9. Summary
    11. 7. Building a Web Application: Case Studies
      1. About Pergola
      2. D3 Review
      3. Polymaps
      4. Interactive Multiple Documents Application
        1. Encapsulating the Stream Example
        2. Adding Interactivity to the D3 Stream Window
        3. The Transitions Menu
        4. The Transition Tool Button
        5. Encapsulating the Force Example
        6. Improving the Application Design
        7. Running in an HTML and SVG Context
      5. Mapping Application
        1. The Menus
        2. Adding Map Features
        3. GeoJSON
        4. Adding Tools
        5. The Complete Code
      6. Summary
    12. Index
    13. About the Authors
    14. Copyright