Building Web Applications With SVG by Dailey, David -- Read -- Imperial Library of Trantor

Index

Building Web Applications with SVG Dedication Introduction

SVG Testimonials

Jon Ferraiolo Alex Danilo Cameron McCormack Jeff Schiller Doug Schepers

Who Should Read This Book

Assumptions

Who Should Not Read This Book Organization of This Book Conventions and Features in This Book About the Companion Content

Installing the Code Samples

System Requirements Acknowledgments Errata & Book Support We Want to Hear from You Stay in Touch

1. SVG Basics

The What, Why, and Where of SVG

The What The Why The Where

Getting Started: A Simple Overview

Viewing SVG Writing SVG

Thirteen Examples That Show the Capabilities of SVG

Example 1: Dynamic Random Landscape Drawn with JavaScript and SVG Example 2: Equidistant Positioning Points along a Bézier Curve Example 3: Simple Animation (Just 38 Lines of Markup and No Script) Example 4: Use of Gradients and Patterns Example 5: Intersecting Clip Paths Example 6: Animated Text Crawling Along a Bézier Curve Example 7: Animated Reflected Gradients with Transparency Example 8: Clock with Impressionist Tinge Example 9: Using a Filter to Create Pond Ripples over an Image Example 10: Using <replicate> to Simulate Digital Elevation Maps Example 11: Non-Affine Cobblestones Example 12: Triangular Tiling Example 13: A Web Application for Drawing Graphs (Networks)

Diving In: A Step-by-Step Approach to Building a Simple SVG Document

A first file

Intermission and Analysis

SVG As XML Attributes The SVG Namespace

Screen Coordinates

Modifying your code and experimenting

Modifying your code and experimenting Accomplishing a given effect

Summary

2. Creating and Editing SVG Graphics

Creating Basic Vector Shapes

Lines Brief Review of SVG Presentation Attributes Rectangles Circles Ellipses Polylines and Polygons Creativity with Basic Shapes

Paths in SVG

<path> Subcommands: M and L Fill Properties: nonzero and evenodd

An Example of Building Complex Shapes

Quadratic Bézier Curves: The Q Subcommand Bézier Curve Example Creating Smooth Curves: The S and T Subcommands Elliptical Arc Example Relative vs. Absolute Path Coordinates

Accessing and Reusing Graphics

Referencing Vector and Bitmap Images The Group Element The <use> Element

Creating Patterns Case Study: Designing a Reusable Pattern

Adding Basic Shapes

Summary

3. Adding Text, Style, and Transforms

Adding and Positioning Text

The <text> Element The <tspan> Element Making Adjustments with dx and dy Text and Shapes on a Path: <textPath> and <mpath> The <tref> Element

Working with Colors in SVG

Named Color Values HSL RGB

Creating Gradients in SVG

Applying Gradients to a Path

The stop-opacity Attribute

Clipping and Masking with SVG Details of Transforms

The translate Command The scale Command Skewing: The skewX and skewY Commands The rotate Command

SVG transformations by example: Step by step

The matrix Command Adding Style Using CSS Using Media Queries to Enhance Usability Additional Capabilities of CSS3

Vector Graphics, Symbol, and Button Libraries Accessibility

Semantic Elements and Features

Case Study: A Simple SVG Web Interface Summary

4. Motion and Interactivity

Declarative Animation with SVG

Getting Started Motion Along a Path Multivalued Interpolation Interacting with Animation

Scripting SVG

Getting Started with JavaScript and SVG Using Script to Find an Object and Change Its Attributes

Example 1 Example 2 Example 3 Example 4 Example 5 Example 6

Adding New Content to an SVG Document Cloning Nodes Evaluating Nodes (getAttribute) SVG DOM

Removing Content

Measurements

Points on a Curve viewBox

Messages Between SMIL and Script

From SMIL to Script From Script to SMIL

Passing Messages Between HTML and SVG

Ways of Putting SVG in HTML The Other Way Around: Putting HTML in SVG Using <object> to Embed SVG in HTML getSVGDocument() SVG Inline in HTML5

Summary

5. SVG Filters

The Basic <filter> Element The Basic Primitives

<feGaussianBlur> <feColorMatrix> Filter Chaining with <feColorMatrix> <feComponentTransfer> <feMorphology> <feConvolveMatrix>

Utility Filters

Simple Utility Filters <feFlood> and <feOffset> <feImage> and <feTile> <feTurbulence>

baseFrequency numOctaves type seed

Lighting Effects Ways of Combining Filters

Warping with a Simple Gradient Warping with Turbulence Spherical Warping

Summary

6. SVG Tools and Resources

Libraries SVG Native JavaScript Libraries

D3: Data-Driven Documents

Quantitative Scales Ordinal Scales Colors

Pergola Raphaël Polymaps carto:net

Legacy HTML Libraries

jQuery Dojo Sencha

Drawing Tools and Utilities

Adobe Illustrator Inkscape Scour SVG-Edit

Other Useful Tools

Mugeda Pilat SVG Editor SVG Drawing Tool Grapher SCION

Extension Tools

Batik SmilScript and FakeSmile

SmilScript FakeSmile

Integrated Development Environments

Oxygen Adobe Dreamweaver HTML-Kit Other Useful Information Other Tools That Support SVG

Miscellaneous

Wikimedia and Wikipedia The Open Clip Art Library The OpenStreetMap Project

Summary

7. Building a Web Application: Case Studies

About Pergola D3 Review Polymaps Interactive Multiple Documents Application

Encapsulating the Stream Example Adding Interactivity to the D3 Stream Window The Transitions Menu The Transition Tool Button Encapsulating the Force Example Improving the Application Design Running in an HTML and SVG Context

Mapping Application

The Menus Adding Map Features GeoJSON Adding Tools The Complete Code

Summary

Index About the Authors Copyright

← Prev
Back
Next →

← Prev
Back
Next →