You are previewing Building Web Applications with SVG.

Building Web Applications with SVG

Cover of Building Web Applications with SVG by Jon Frost David Dailey and Domenico Strazzullo Published by Microsoft Press
  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
      2. Intermission and Analysis
      3. Screen Coordinates
    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
    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
      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
      3. Adding New Content to an SVG Document
      4. Cloning Nodes
      5. Evaluating Nodes (getAttribute)
      6. SVG DOM
      7. Measurements
      8. Messages Between SMIL and Script
      9. Passing Messages Between HTML and SVG
    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>
    4. Lighting Effects
    5. Ways of Combining Filters
      1. <feMergeNode>
      2. <feBlend>
      3. <feComposite>
      4. <feDisplacementMap>
    6. Summary
  10. 6. SVG Tools and Resources
    1. Libraries
    2. SVG Native JavaScript Libraries
      1. D3: Data-Driven Documents
      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
      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
O'Reilly logo

Chapter 2. Creating and Editing SVG Graphics

Order becomes beauty beyond infinite planes and the undeciphered dense text a mosaic flower, fiery, chaos tamed in fullness, spring.

Orides Fontela

By the end of this chapter, you will have explored the core concepts and practiced the basic skills to begin tapping into your visual creativity. One great thing about programming graphics is that you can usually visualize your work almost immediately. To demonstrate this, you’ll walk through a process that uses all of the basic shape elements of SVG. As a teaser, here’s a look ...

The best content for your career. Discover unlimited learning on demand for around $1/day.