book

Building Web Applications with SVG

by Jon Frost David Dailey and Domenico Strazzullo

July 2012

Intermediate to advanced

292 pages

7h 50m

English

Microsoft Press

Read now

Unlock full access

SVG TestimonialsJon FerraioloAlex DaniloCameron McCormackJeff SchillerDoug SchepersWho Should Read This BookAssumptionsWho Should Not Read This BookOrganization of This BookConventions and Features in This BookAbout the Companion ContentInstalling the Code SamplesSystem RequirementsAcknowledgmentsErrata & Book SupportWe Want to Hear from YouStay in Touch
The What, Why, and Where of SVGThe WhatThe WhyThe WhereGetting Started: A Simple OverviewViewing SVGWriting SVGThirteen Examples That Show the Capabilities of SVGExample 1: Dynamic Random Landscape Drawn with JavaScript and SVGExample 2: Equidistant Positioning Points along a Bézier CurveExample 3: Simple Animation (Just 38 Lines of Markup and No Script)Example 4: Use of Gradients and PatternsExample 5: Intersecting Clip PathsExample 6: Animated Text Crawling Along a Bézier CurveExample 7: Animated Reflected Gradients with TransparencyExample 8: Clock with Impressionist TingeExample 9: Using a Filter to Create Pond Ripples over an ImageExample 10: Using <replicate> to Simulate Digital Elevation MapsExample 11: Non-Affine CobblestonesExample 12: Triangular TilingExample 13: A Web Application for Drawing Graphs (Networks)Diving In: A Step-by-Step Approach to Building a Simple SVG DocumentA first fileA first fileA first fileIntermission and AnalysisSVG As XMLAttributesThe SVG NamespaceScreen CoordinatesModifying your code and experimentingModifying your code and experimentingAccomplishing a given effectSummary
Creating Basic Vector ShapesLinesBrief Review of SVG Presentation AttributesRectanglesCirclesEllipsesPolylines and PolygonsCreativity with Basic ShapesPaths in SVG<path> Subcommands: M and LFill Properties: nonzero and evenoddAn Example of Building Complex ShapesQuadratic Bézier Curves: The Q SubcommandBézier Curve ExampleCreating Smooth Curves: The S and T SubcommandsElliptical Arc ExampleRelative vs. Absolute Path CoordinatesAccessing and Reusing GraphicsReferencing Vector and Bitmap ImagesThe Group ElementThe <use> ElementCreating PatternsCase Study: Designing a Reusable PatternAdding Basic ShapesSummary
Adding and Positioning TextThe <text> ElementThe <tspan> ElementMaking Adjustments with dx and dyText and Shapes on a Path: <textPath> and <mpath>The <tref> ElementWorking with Colors in SVGNamed Color ValuesHSLRGBCreating Gradients in SVGApplying Gradients to a PathThe stop-opacity AttributeClipping and Masking with SVGDetails of TransformsThe translate CommandThe scale CommandSkewing: The skewX and skewY CommandsThe rotate CommandSVG transformations by example: Step by stepSVG transformations by example: Step by stepThe matrix CommandAdding Style Using CSSUsing Media Queries to Enhance UsabilityAdditional Capabilities of CSS3Vector Graphics, Symbol, and Button LibrariesAccessibilitySemantic Elements and FeaturesCase Study: A Simple SVG Web InterfaceSummary
Declarative Animation with SVGGetting StartedMotion Along a PathMultivalued InterpolationInteracting with AnimationScripting SVGGetting Started with JavaScript and SVGUsing Script to Find an Object and Change Its AttributesExample 1Example 2Example 3Example 4Example 5Example 6Adding New Content to an SVG DocumentCloning NodesEvaluating Nodes (getAttribute)SVG DOMRemoving ContentMeasurementsPoints on a CurveviewBoxMessages Between SMIL and ScriptFrom SMIL to ScriptFrom Script to SMILPassing Messages Between HTML and SVGWays of Putting SVG in HTMLThe Other Way Around: Putting HTML in SVGUsing <object> to Embed SVG in HTMLgetSVGDocument()SVG Inline in HTML5Summary
The Basic <filter> ElementThe Basic Primitives<feGaussianBlur><feColorMatrix>Filter Chaining with <feColorMatrix><feComponentTransfer><feMorphology><feConvolveMatrix>Utility FiltersSimple Utility Filters<feFlood> and <feOffset><feImage> and <feTile><feTurbulence>baseFrequencynumOctavestypeseedLighting EffectsWays of Combining Filters<feMergeNode><feBlend><feComposite><feDisplacementMap>Warping with a Simple GradientWarping with TurbulenceSpherical WarpingSummary
LibrariesSVG Native JavaScript LibrariesD3: Data-Driven DocumentsQuantitative ScalesOrdinal ScalesColorsPergolaRaphaëlPolymapscarto:netLegacy HTML LibrariesjQueryDojoSenchaDrawing Tools and UtilitiesAdobe IllustratorInkscapeScourSVG-EditOther Useful ToolsMugedaPilatSVG EditorSVG Drawing ToolGrapherSCIONExtension ToolsBatikSmilScript and FakeSmileSmilScriptFakeSmile<replicate>Integrated Development EnvironmentsOxygenAdobe DreamweaverHTML-KitOther Useful InformationOther Tools That Support SVGMiscellaneousWikimedia and WikipediaThe Open Clip Art LibraryThe OpenStreetMap ProjectSummary
About PergolaD3 ReviewPolymapsInteractive Multiple Documents ApplicationEncapsulating the Stream ExampleAdding Interactivity to the D3 Stream WindowThe Transitions MenuThe Transition Tool ButtonEncapsulating the Force ExampleImproving the Application DesignRunning in an HTML and SVG ContextMapping ApplicationThe MenusAdding Map FeaturesGeoJSONAdding ToolsThe Complete CodeSummary

Overview

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