PDC10: Introducing HTML5 Vector Graphics

  • Article

Presenter: Patrick Dengler, Senior Program Manager, IE team

Presentation

 

  • Agenda
    • intro to Vector Graphics
    • Differences in 2 vector graphics models (Immediate vs. Retained)
      • overview of <canvas>
      • intro to SVG
    • Direction on when to use each
  • What are Vector Graphics?
    • Geometrical primitives
      • shapes, pionts, lines, polygons
    • Simple
      • callout in a document or illustration
    • Moderate
      • charts, diagrams, maps
    • Complex
      • engineering document
  • Vector Graphic Scenarios on the web
    • map sites like Bing
    • interactive charts like stock sites
    • election
    • gaming
  • HTML5 SVG
    • is “retained mode” graphics which persist in an in-memory model that provides for a scene graph
    • declarative in nature
    • can be manipulated in code
    • Stylable through CSS
    • Can be output from several tools today, like Visio
    • scalable (a key differentiating factor)
  • HTML5 Canvas element
    • “immediate mode” graphics, fire and forget model, paints and then has no handle to what was painted
    • Programmatic in nature
    • Has only one element <canvas> and is otherwise changed only through code
    • ofter faster as the model is not retained in DOM
  • Demo - SVG and Canvas (04:30)
    • A square 3 ways – div, svg, canvas
    • Interaction and styling in various ways
    • complex shapes – shows SVG vs. Canvas. Easier to do hittest in SVG, as canvas would require calculating position
    • All canvas example: Simple Interactions. Runs faster because graphics are not in-memory.
  • SVG Basics (08:30)
    • SVG has a declarative model.
    • can put events on individual elements.
    • Can use styling and other attributes to shape it.
    • supports CSS
  • Canvas Basics
    • single element
    • through code, you draw or erase to build the asset
  • SVG and Canvas comparison (in one slide)
  • Performance Characteristics
    • 2 charts showing performance issues
    • bigger the screen, canvas is slower
    • bigger the # of objects, then canvas is better
    • this is a changing area, and the difference gap is expected to close somewhat
  • Vector Graphic Scenario Spectrum Analysis (11:26)
    • very interesting slide that mentions which technology to use for certain scenarios
  • Demo: Real World Examples (13:00)
  • Summary – The Presenter’s Learning to Date
    • A handful of scenarios are tethered to <canvas> or <svg>
    • Scenarios that are cross over scenarios will tend towards SVG, but some may continue to be tied to performanc
    • Combination scenarios provide a nice balance for developers to leverage technologies within an experience
    • There is more learning to be done!