SVG Unleashed

SVG Unleashed

by Chris Lilley, Andrew H. Watt
Released September 2002
Publisher(s): Sams
ISBN: 9780672324291

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Targeted to the experienced Web programmer, SVG Unleashed equips the reader with the practical knowledge to create and manipulate Scalable Vector Graphics (SVG) programmatically, both on the client and the server side. Part I of the book provides a thorough reference of SVG syntax, elements, coordinate systems and animations, with coverage of the XML Document Object Model (DOM) and the SVG DOM application to programming with particular emphasis on the use of ECMAScript/JavaScript. In Part II, readers learn to use several server-side languages to create SVG documents. Part IV demonstrates SVG programming through several case studies.

Table of contents

  1. Copyright
    1. Dedications
  2. Foreword
  3. About the Authors
  4. Acknowledgments
  5. We Want to Hear from You!
  6. Reader Services
  7. Introduction
    1. Who This Book's Intended Audience Is
    2. What You Will Learn from Reading This Book
    3. What Software You Will Need to Complete the Examples Provided with This Book
    4. How This Book Is Organized
      1. Part I: SVG Fundamentals
      2. Part II: Programming SVG Client-Side
      3. Part III: Producing SVG Server-Side
      4. Part IV: Case Studies
      5. Part V: Looking Ahead
    5. What's on the Sams Web Site for This Book
    6. Conventions Used in This Book
  8. I. SVG Fundamentals
    1. 1. SVG Overview
      1. Understanding SVG
      2. Advantages of SVG
        1. File Size
        2. Zooming Images
        3. Panning Images
        4. Selective Display of Elements
        5. Open Source Code
        6. Internationalization of Content
        7. Accessible to Search Engines
        8. Data-Driven Graphics
        9. Resolution Independent
        10. Display on Mobile Devices
        11. Declarative Rollovers
      3. Limitations of SVG
        1. Size of Download for Viewer
        2. Open Source Code
        3. CPU Intensive
        4. Limited Tools
      4. Basic Tools
        1. Tools to Create SVG
        2. Text Editor
        3. SVG Drawing Tools
          1. Jasc WebDraw
          2. Adobe Illustrator 10
        4. Tools to View SVG
          1. Adobe SVG Viewer
          2. Batik
          3. X-Smiles
          4. Native Browser Support for SVG
      5. SVG Painter's Model
      6. Some SVG Examples
        1. Documenting an Image
        2. Simple Text Example
      7. Introducing the XML DOM
        1. The DOM at the W3C
        2. XML DOM Basics
        3. XML DOM Node Types
          1. Document Node
          2. DocumentType Node
          3. Element Node
          4. Attr Node
          5. EntityReference Node
          6. ProcessingInstruction Node
          7. Comment Node
          8. Text Node
          9. CDATASection Node
          10. Entity Node
        4. Requirements for SVG Rendering Engines
      8. Introducing the SVG DOM
      9. Summary
    2. 2. Document Structure in SVG
      1. SVG Is XML
        1. Optional XML Declaration
        2. Document Type Declaration
        3. Element Names Are Case Sensitive
        4. Matching Start and End Tags
        5. Quotation Marks with Attributes
        6. Comments
        7. Processing Instructions
        8. Entities and Entity References
        9. Namespace Declarations
        10. CDATA Sections
      2. The svg Element
        1. The version Attribute
        2. Nesting svg Elements
          1. Establishing a New Viewport
        3. The x and y Attributes
        4. The viewBox Attribute
      3. The g Element
      4. The title and defs Elements
        1. The title Element
        2. The defs Element
      5. The symbol Element
      6. The use Element
      7. The script Element
      8. Zoom and Pan
        1. Zooming
        2. Panning
      9. Linking in SVG
        1. XLink: The XML Linking Language
        2. The SVG a Element
        3. Linking Using XPointer
        4. Linking by Specifying an SVG View
          1. The view Element
      10. SVG DOM Interfaces
        1. A Sample Document
        2. The DOM Representation of the Document
        3. The svg Element
          1. The SVGElement Object
          2. The SVGSVGElement Object
        4. The SVGLength Object
      11. Miscellaneous SVG DOM Objects
        1. The GetSVGDocument Object
        2. The SVGAElement Object
        3. The SVGAngle Object
        4. The SVGCursorElement Object
        5. The SVGDefsElement Object
        6. The SVGDescElement Object
        7. The SVGDocument Object
        8. The SVGElementInstance Object
        9. The SVGElementInstanceList Object
        10. The SVGEvent Object
        11. The SVGExternalResourcesRequired Object
        12. The SVGGElement Object
        13. The SVGLangSpace Object
        14. The SVGLengthList Object
        15. The SVGLocatable Object
        16. The SVGMetadataElement Object
        17. The SVGNumber Object
        18. The SVGNumberList Object
        19. The SVGRect Object
        20. The SVGScriptElement Object
        21. The SVGStringList Object
        22. The SVGSymbolElement Object
        23. The SVGTests Object
        24. The SVGTitleElement Object
        25. The SVGURIReference Object
        26. The SVGUseElement Object
        27. The SVGViewElement Object
        28. The SVGViewSpec Object
        29. The SVGZoomAndPan Object
        30. The SVGZoomEvent Object
      12. Summary
    3. 3. Basic SVG Elements and Shapes
      1. The line Element
      2. The rect Element
      3. The circle Element
      4. The ellipse Element
      5. The polyline Element
      6. The polygon Element
      7. Color in SVG
      8. Gradients in SVG
        1. Linear Gradients
        2. Radial Gradients
      9. SVG Patterns
      10. SVG DOM Interfaces for the SVG Basic Shapes
        1. The SVGLineElement Object
        2. The SVGRectElement Object
        3. The SVGCircleElement Object
        4. The SVGEllipseElement Object
        5. The SVGPolylineElement Object
        6. The SVGPolygonElement Object
      11. Other SVG DOM Interfaces
        1. The SVGGradientElement Object
        2. The SVGLinearGradientElement Object
        3. The SVGPaint Object
        4. The SVGPatternElement Object
        5. The SVGRadialGradientElement Object
        6. The SVGStopElement Object
        7. The SVGSwitchElement Object
        8. Creating a Line Using the SVG DOM
      12. Summary
    4. 4. Using CSS with SVG
      1. What Is Styling in SVG?
        1. Why Do We Need Styles?
        2. How Is SVG Styling Information Expressed?
      2. Specifying a Style
      3. Individual Presentation Attributes
        1. When to Use Individual Presentation Attributes
        2. Properties Defined in CSS2
        3. Properties Not Defined in CSS2
          1. The stroke and fill Properties
          2. The stroke-width and stroke-dasharray Properties
          3. The visibility Property
          4. The pointer-events Property
      4. The SVG style Attribute
        1. The contentStyleType Attribute
        2. Opacity and Transparency
      5. Internal CSS Style Sheets
        1. The class Attribute
        2. When to Use Internal Style Sheets
      6. External CSS Style Sheets
        1. Associating a Style Sheet with an SVG Document
      7. Using Entities When Styling
      8. Style SVG DOM Interface
        1. The SVGColor Object
        2. The SVGColorProfileElement Object
        3. The SVGColorProfileRule Object
        4. The SVGCSSRule Object
        5. The SVGICCColor Object
        6. The SVGStylable Object
        7. The SVGStyleElement Object
      9. Examples of Styling Using the DOMs
        1. Changing Fill Color Using the DOM
        2. Changing Opacity Using the DOM
        3. Changing Inherited Styling Properties
        4. Changing a Style Property from HTML
      10. Summary
    5. 5. Coordinate Systems in SVG
      1. The SVG Canvas
        1. The Initial Viewport
          1. Initial Viewport for Standalone SVG
          2. Initial Viewport for Embedded SVG
        2. Adding a Nested svg Element
      2. Preserving Aspect Ratio
        1. The preserveAspectRatio Attribute with meet
        2. The preserveAspectRatio Attribute with slice
        3. The preserveAspectRatio Attribute with the Value none
      3. Transformations and Coordinates
        1. translate() Transformations and the Coordinate System
          1. rotate() Transformations and the Coordinate System
          2. scale() Transformations and the Coordinate System
          3. skewX() Transformations and the Coordinate System
          4. skewY() Transformations and the Coordinate System
      4. Other Elements That Affect Coordinates
        1. The view Element
        2. The image Element
        3. The foreignObject Element
        4. The symbol Element
        5. The use Element
        6. The pattern Element
      5. SVG DOM Interfaces
        1. The SVGFitToViewBox Object
        2. The SVGForeignObjectElement Object
        3. The SVGImageElement Object
        4. The SVGMarkerElement Object
        5. The SVGPreserveAspectRatio Object
      6. Manipulating Coordinates Using the DOM
        1. Panning Under Scripting Control
        2. Scaling an Image
        3. Marker Example
      7. Summary
    6. 6. Paths in SVG
      1. Using the path Element
        1. The d Attribute
        2. Absolute Path Coordinates
          1. Syntax Options
          2. Horizontal and Vertical lineto Instructions
          3. Subpaths
        3. Filling Paths
        4. Relative Path Coordinates
      2. Creating Curves Using the path Element
        1. Cubic Bezier Curves
          1. The Shorthand Cubic Bezier Syntax
        2. Quadratic Bezier Curves
          1. The Shorthand Quadratic Bezier Syntax
        3. Arc Curves
      3. Applying Text to a Path
        1. The textPath Element
      4. The SVG DOM Interfaces
        1. The SVGPathElement Object
        2. The SVGMPath Object
        3. The SVGPathSeg Object
        4. The SVGPathSegArcAbs Object
        5. The SVGPathSegArcRel Object
        6. The SVGPathSegClosePath Object
        7. The SVGPathSegCurvetoCubicAbs Object
        8. The SVGPathSegCurvetoCubicRel Object
        9. The SVGPathSegCurvetoCubicSmoothAbs Object
        10. The SVGPathSegCurvetoCubicSmoothRel Object
        11. The SVGPathSegCurvetoQuadraticAbs Object
        12. The SVGPathSegCurvetoQuadraticRel Object
        13. The SVGPathSegCurvetoQuadraticSmoothAbs Object
        14. The SVGPathSegCurvetoQuadraticSmoothRel Object
        15. The SVGPathSegLinetoAbs Object
        16. The SVGPathSegLinetoRel Object
        17. The SVGPathSegLinetoHorizontalAbs Object
        18. The SVGPathSegLinetoHorizontalRel Object
        19. The SVGPathSegLinetoVerticalAbs Object
        20. The SVGPathSegLinetoVerticalRel Object
        21. The SVGPathSegList Object
        22. The SVGPathSegMovetoAbs Object
        23. The SVGPathSegMovetoRel Object
        24. The SVGTextPathElement Object
      5. Manipulating Paths Using the DOM
        1. Altering the Shape of a Path
        2. Manipulating the Start Offset of Text on a Path
      6. Summary
    7. 7. Transformations in SVG
      1. Introduction to Transformations
        1. The transform Attribute
        2. The g Element
        3. The use Element
      2. Translation Transformations
      3. Rotation Transformations
      4. Scale Transformations
      5. Skew Transformations
        1. The skewX() Transformation
        2. The skewY() Transformation
        3. The Transformation Matrix
        4. Combining Transformations
      6. Transformation SVG DOM Interfaces
        1. The SVGMatrix Object
        2. The SVGPoint Object
        3. The SVGPointList Object
        4. The SVGTransform Object
        5. The SVGTransformable Object
        6. The SVGTransformList Object
      7. Scripting Transformation Examples
        1. A skewX() Transformation Example
        2. Scaling Under User Control
      8. Summary
    8. 8. Laying Out Text in SVG
      1. Overview of Text in SVG
        1. Some Text Terms
          1. What Is a Character?
          2. What Is a Glyph?
          3. What Is a Font?
        2. Some Glyph Terminology
      2. The SVG Text Layout Elements
        1. The text Element
        2. The tspan Element
        3. The tref Element
      3. Text Layout Tasks in SVG
        1. Indenting and Outdenting Text
        2. The text-rendering Property
        3. Aligning Text Using the text-anchor Property
        4. Vertical Text
        5. Bidirectional Text
        6. Rotating Text
        7. Kerning
        8. Letter Spacing
        9. Word Spacing
        10. Subscript and Superscript
      4. The textPath Element
        1. The startOffset Attribute
      5. The switch Element
        1. The Test Attributes
          1. The requiredFeatures Attribute
          2. The requiredExtensions Attribute
      6. Comparison of Text Layout in SVG and HTML
        1. Layout Options in SVG
      7. Text-Related SVG DOM Interfaces
        1. The SVGTextElement Object
        2. The SVGTSpanElement Object
        3. The SVGTRefElement Object
      8. Other SVG DOM Text and Font Objects
        1. The SVGAltGlyphDefElement Object
        2. The SVGAltGlyphElement Object
        3. The SVGAltGlyphItemElement Object
        4. The SVGAltGlyphRefElement Object
        5. The SVGDefinitionsSrcElement Object
        6. The SVGFontElement Object
        7. The SVGFontFaceElement Object
        8. The SVGFontFaceFormatElement Object
        9. The SVGFontFaceNameElement Object
        10. The SVGFontFaceSrcElement Object
        11. The SVGFontFaceUriElement Object
        12. The SVGGlyphElement Object
        13. The SVGHKernElement Object
        14. The SVGMissingGlyphElement Object
        15. The SVGTextContentElement Object
        16. The SVGTextPositioningElement Object
        17. The SVGVKernElement Object
      9. Examples of Accessing and Manipulating the DOM
        1. Accessing Text Content
        2. Leaning Text
      10. Summary
    9. 9. Clipping, Masking, Compositing
      1. A Terminology Review
        1. What Is Clipping?
        2. What Is a Mask?
        3. What Is Compositing?
      2. Clipping in SVG
        1. The clipPath Element
        2. The clip-path Property
        3. The clip and overflow Properties
        4. Using Text in Clipping
        5. Creating a Binocular-Shaped Clip Path
      3. Masking
        1. The mask Element
        2. The mask Property
        3. Some Masking Examples
        4. An Animated Spotlight Example
        5. Expanding Window on Text
        6. Animated Gradients on Masked Text
      4. Compositing
        1. The color-interpolation Property
        2. The color-rendering Property
      5. The SVG DOM Interfaces
        1. The SVGClipPathElement Object
        2. The SVGMaskElement Object
        3. Example Using a Clipping Path
      6. Summary
    10. 10. SVG Filters
      1. SVG Filters
      2. The filter Element
        1. The filter Property
      3. The SVG Filter Primitives
        1. Common Attributes for the SVG Filter Primitives
          1. The x, y, width, and height Attributes
          2. The in Attribute
          3. The enable-background Attribute
          4. The result Attribute
        2. The feBlend Filter Primitive
        3. The feColorMatrix Filter Primitive
        4. The feComponentTransfer Filter Primitive
        5. The feComposite Filter Primitive
        6. The feConvolveMatrix Filter Primitive
        7. The feDistantLight Filter Primitive
        8. The feDiffuseLighting Filter Primitive
        9. The feDisplacementMap Filter Primitive
        10. The feFlood Filter Primitive
        11. The feGaussianBlur Filter Primitive
        12. The feImage Filter Primitive
        13. The feMerge Filter Primitive
        14. The feMorphology Filter Primitive
        15. The feOffset Filter Primitive
        16. The fePointLight Filter Primitive
        17. The feSpecularLighting Filter Primitive
        18. The feSpotLight Filter Primitive
        19. The feTile Filter Primitive
        20. The feTurbulence Filter Primitive
      4. The SVG DOM Filter Interfaces
        1. The SVGFilterElement Object
        2. The SVGFilterPrimitiveStandardAttributes Object
      5. The SVG DOM Objects for Filter Primitives
        1. The SVGFEBlendElement Object
        2. The SVGFEColorMatrixElement Object
        3. The SVGFEComponentTransferElement Object
          1. The SVGFEComponentTransferFunctionElement Object
          2. The SVGFEFuncAElement Object
          3. The SVGFEFuncBElement Object
          4. The SVGFEFuncGElement Object
          5. The SVGFEFuncRElement Object
        4. The SVGFECompositeElement Object
        5. The SVGFEConvolveMatrixElement Object
        6. The SVGFEDiffuseLightingElement Object
        7. The SVGFEDisplacementMapElement Object
        8. The SVGFEDistantLightElement Object
        9. The SVGFEFloodElement Object
        10. The SVGFEGaussianBlurElement Object
        11. The SVGFEImageElement Object
        12. The SVGFEMergeElement Object
        13. The SVGFEMergeNodeElement Object
        14. The SVGFEMorphologyElement Object
        15. The SVGFEOffsetElement Object
        16. The SVGFEPointLightElement Object
        17. The SVGFESpecularLightingElement Object
        18. The SVGFESpotLightElement Object
        19. The SVGFETileElement Object
        20. The SVGFETurbulenceElement Object
        21. Interactive Turbulence Example
      6. Summary
    11. 11. SVG Animation Elements
      1. SVG Animation in Context
        1. SVG Animation and SMIL 2.0
        2. Specifying the Target Element for Animation
        3. Identifying the Target Attribute for Animation
        4. Timing-Related Attributes
          1. The begin Attribute
          2. The dur Attribute
          3. The restart Attribute
          4. The repeatCount Attribute
          5. The fill Attribute
        5. Animation Attributes
          1. The from Attribute
          2. The to Attribute
          3. The by Attribute
          4. The calcMode Attribute
          5. The values Attribute
          6. The keyTimes Attribute
        6. Attributes Controlling Additive Animation
      2. The set Element
        1. A Simple Rollover Effect
        2. Time-Controlled Animation of Visibility
        3. Event-Related Animation of Another Element
      3. The animate Element
        1. A Color Fade Example
        2. Example Using additive and accumulate Attributes
        3. Chaining Animations
          1. Syntax to Chain Animations
        4. Scrolling Text Output
          1. Horizontal Scrolling Text
          2. Vertical Scrolling Text
        5. Controlling Animation Restarting
        6. Using the values Attribute
      4. The animateColor Element
      5. The animateMotion Element
        1. The keyPoints Attribute
        2. The rotate Attribute
        3. The mpath Element
      6. The animateTransform Element
        1. Animations of the translate Transformation
        2. Animations of the scale Transformation
        3. Animations of the rotate Transformation
        4. Animations of the skewX and skewY Transformations
      7. Animation Element-Related SVG DOM Interfaces
        1. The SVGAnimationElement Object
        2. The SVGSetElement Object
        3. The SVGAnimateElement Object
        4. The SVGAnimateColorElement Object
        5. The SVGAnimateMotionElement Object
        6. The SVGAnimateTransformElement Object
      8. Miscellaneous Animation-Related Objects
        1. The SVGAnimatedAngle Object
        2. The SVGAnimatedBoolean Object
        3. The SVGAnimatedEnumeration Object
        4. The SVGAnimatedInteger Object
        5. The SVGAnimatedLength Object
        6. The SVGAnimatedLengthList Object
        7. The SVGAnimatedNumber Object
        8. The SVGAnimatedNumberList Object
        9. The SVGAnimatedPathData Object
        10. The SVGAnimatedPoints Object
        11. The SVGAnimatedPreserveAspectRatio Object
        12. The SVGAnimatedRect Object
        13. The SVGAnimatedString Object
        14. The SVGAnimatedTransformList Object
      9. Summary
    12. 12. SVG for Web Authoring
      1. Using SVG with HTML/XHTML
        1. The object Element
        2. The embed Element
        3. Zooming and Panning in Embedded SVG
        4. Server Settings
        5. DOCTYPE Declarations
      2. Laying Out Web Pages in SVG
        1. Laying Out Text in SVG Web Pages
        2. Using CSS to Separate Content and Presentation
          1. Internal Versus External CSS Style Sheets
        3. Controlling Cursor Appearance
        4. Creating SVG Mini-Pages
        5. Reusing Visual Components
        6. Creating SVG Web Pages with Scrollbars
          1. Adding Scrollbars by Embedding
          2. Creating Scrollbars Using JavaScript
        7. Adding mailto Links
        8. Using the image Element
      3. Using the foreignObject Element
        1. Using SVG with Bitmap Images
      4. Summary
    13. 13. Accessibility, Internationalization, and Metadata
      1. Improving Code
      2. General Accessibility Features of SVG
        1. No Viewer, No Comment?
        2. Styling for Accessibility
          1. Styling the Document
        3. Device Independence
          1. Accessible Navigation
          2. Performance Issues
      3. Internationalization
        1. Alternate Languages
          1. Using a <switch>
        2. Switching on Features
        3. Unicode Support
        4. Using Glyphs
        5. Text Direction and Orientation
      4. Metadata
        1. Resource Description Framework
        2. Model, Syntax, and Schemas
      5. Summary
  9. II. Programming SVG Client-Side
    1. 14. The SVG DOM
      1. DOM Background
      2. DOM Level 2
        1. DOM2 Core
        2. Methods
        3. Different Node Types
        4. Accessing Nodes
      3. DOM2 CSS
      4. DOM 2 Events
        1. The DOM 2 Event Model
          1. Types of Events
          2. Where Do Events Go?
          3. Bubbling Events
          4. Capturing Events
          5. Canceling Events
        2. Supported Events
          1. UI Events
          2. Mouse Events
          3. Mutation Events
          4. SVG-Specific Events
          5. Key Events
        3. Event Listeners
          1. Adding an Event Listener
          2. Removing an Event Listener
          3. Dispatching Events
        4. Getting Information About Events
          1. Event Interface
          2. Other Interfaces
          3. A Working Example
      5. SVG DOM-Specific Interfaces
      6. Summary
    2. 15. Scripting SVG
      1. Introduction to Scripting SVG
        1. Which Language?
      2. Specifying the Scripting Language
        1. The script Element
      3. Manipulating the DOM
        1. Getting to the Top
        2. Finding Elements
        3. Accessing Attributes
          1. Reading Attributes
          2. Writing Attributes
          3. Using Interfaces
      4. Changing style Attributes
        1. Styles in Attributes
          1. The style Attribute
          2. Inline Styles
      5. Changing the Tree
        1. Overview of DOM Methods
        2. Cloning and Inserting
          1. Changing Text
          2. Creating New Elements
          3. Removing Nodes
      6. SVG Events
        1. Event Listeners
          1. Adding an Event Listener
          2. Removing an Event Listener
          3. Bubbling Up
          4. Capturing Events
        2. Keyboard Events
        3. Mouse Events
      7. Summary
    3. 16. Animating SVG with Scripting
      1. HTML and SVG Interaction
        1. From SVG to HTML
          1. Setting Timeouts
          2. Setting the Status Bar
        2. From HTML to SVG
      2. Animating with ECMAScript
        1. Animated Clock
          1. Digital Clock
          2. Analog Clock
        2. Pull-Down Menus
        3. Animating the Sky
          1. Animation Using ECMAScript
          2. Random Animations
        4. Scripted Versus Declarative Animation
          1. Scripting Advantages
          2. Scripting Disadvantages
          3. Animation Advantages
      3. Summary
    4. 17. Using SVG in Java Applications
      1. Applications in Java
      2. Apache Batik
        1. Applications
          1. SVG Browser
          2. SVG Rasterizer
          3. SVG Pretty-Printer
          4. SVG Font Converter
        2. Core Modules
        3. Low-Level Modules
        4. Scripting Support
      3. Displaying SVG in a Java Application
        1. Display Process
        2. Viewer Source Code
          1. Compiling and Running the Example
      4. Generating SVG with a Java Application
        1. Using the SVG Generator
        2. Do-It-Yourself Objects
          1. Interactive Graphic Java
          2. Application Classes
          3. Containing the Objects
          4. Render Unto SVG…
          5. Running the Application
          6. Generated SVG
      5. Summary
  10. III. Producing SVG Server-Side
    1. 18. Server-Side Basics
      1. MIME Types
        1. Browsers and MIME Types
        2. MIME Types on the Server
      2. SVG with the Most Important Scripting Languages
        1. PHP
        2. ASP/ASP.NET
        3. Perl
        4. JSP and Java Servlets
      3. Summary
    2. 19. JSP, Servlets, and SVG
      1. JSP for Scripting
        1. SVG Fractals
          1. JSP and JavaBeans
          2. What Is a JavaBean?
          3. A Moderately Useful Bean
          4. Beans in JSP
      2. Java SVG DOM
      3. A Simple Example
      4. SVG DOM Specifics
        1. Squirrel: A DOM-Based Server Application
          1. Application Package
          2. Rebuilding the Application
          3. Running the Application
          4. Application Architecture
          5. Model Classes
          6. View
          7. Data Source
          8. Controller
      5. Summary
    3. 20. SVG and XSLT
      1. XSLT Overview
        1. Declarative Languages
          1. XPath
        2. XSLT Processors
      2. Three Steps to SVG
        1. Outputting Text
        2. Outputting XML
        3. Outputting SVG
      3. Server-Side Transformations
        1. Preprocessing
          1. Form Data
          2. Arbitrary Data Sources
          3. HTML
        2. Slide Maker
          1. Going Further
      4. Summary
    4. 21. SVG and Perl
      1. Generating SVG with Perl
      2. Viewing the Quote of the Day
        1. SVG Header
        2. Style Sheet
        3. Patterns and Tilings
      3. Generalizing Our Sample File
        1. Common Code
      4. Generating SVG Using print Statements
        1. Pros and Cons of Using the print Statement
      5. Generating SVG Using the W3C DOM API
        1. Pros and Cons of Using the DOM API
      6. Generating SVG Using the SVG.pm Module
        1. Pros and Cons of SVG.pm
      7. Summary
    5. 22. SVG and PHP: Building an Online Survey
      1. Database Structure
        1. Survey
        2. Survey Questions
        3. Survey Answers
        4. Persons
      2. Survey Administration Tool
        1. Listing Surveys
        2. Creating Surveys
        3. Listing Questions
        4. Creating Questions
        5. Listing Alternatives
        6. Creating Alternatives
      3. Online Survey Tool
        1. Registering Users and Listing Surveys
        2. Taking the Survey
        3. Ending the Survey
      4. Survey Statistics
        1. Creating Pie Charts
        2. Dynamically Creating a Graphic
        3. Serving the Survey Statistics
      5. Summary
    6. 23. SVG .NET: Creating an Online Poll
      1. Database Structure
        1. Poll
        2. Alternatives
        3. Persons
      2. Survey Administration Tool
        1. Listing Polls
        2. Binding Data to the Datagrid
        3. Coding Datagrid Functionality for the Polls
        4. Creating New Polls
        5. Listing Alternatives
        6. Coding Datagrid Functionality for the Alternatives
        7. Creating New Alternatives
        8. Making Small Additions
      3. The Poll
        1. SVG Representation of the Poll
        2. SVG Representation of the Results
        3. Voting
      4. Summary
  11. IV. Case Studies
    1. 24. Case Study: SVG for Blueprints
      1. Some Blueprint Basics
      2. From CAD to SVG
        1. DXF to SVG Using Java
        2. Commercial Translation Tools
        3. Translating an AEC Design to SVG
          1. Translating DWG to SVG
          2. Adding ECMAScript Functions
          3. Modifying the SVG Files
          4. Adding a script Element and Namespace Declarations
          5. Extracting Active Entities
          6. Adding Layer Control with an HTML Sidebar
      3. Uploading to the Server
      4. Summary
    2. 25. Case Study: SVG Web Map for Population Demographics
      1. Some Map Basics
      2. Obtaining Map Data
      3. Web Map Project Overview
      4. Massachusetts Key Map: Level One
      5. Plymouth County Map: Level Two
      6. Server-Side Processing
        1. Servlet 1: Database Access—Query Database and Return HTML Table
        2. Servlet 2: Database query2—Return SVG Bar Chart or HTML Table
        3. Servlet 3: Database query3—Return SVG Bar Chart Using a SAX Parser ContentHandler
        4. Servlet 4: Database query4—Return SVG Bar Chart Using DOM Parser
        5. Servlet 5: Database query5—Return SVG Bar Chart Using JDOM
      7. Summary
    3. 26. Case Study: FMS—Monitor and Control
      1. Project Overview
      2. Elevation Photo
      3. Plan View and Temperature Zones
      4. Remote Monitoring
      5. Remote Control
      6. Summary
  12. V. Looking Ahead
    1. 27. SVG 1.1, 1.2, and 2.0
      1. Mobile SVG
        1. Need for Mobile Profiles
        2. Constraints of Mobile Devices
        3. Advantages of Mobile Devices
      2. Beyond SVG 1.1
        1. DOM Level 3 TextEvents
        2. Simple Text Wrapping
        3. Background Colors
        4. Z-ordering
        5. Load and Save
        6. Vector Effects
      3. SVG and Multiple Namespaces
        1. Linking and Synchronization for Audio
        2. Full Text Layout with Flow
        3. SVG and XForms
      4. Summary
  13. VI. Appendix
    1. A. Glossary

Product information

  • Title: SVG Unleashed
  • Author(s): Chris Lilley, Andrew H. Watt
  • Release date: September 2002
  • Publisher(s): Sams
  • ISBN: 9780672324291