SVG and Canvas

SVG and Canvas

• Scalable Vector Graphics
  • based on XML, PostScript, and MS VML
  • developed at W3C (Adobe, Canon, Opera, BitFlash, Ikivo, RIM)
• Canvas (also called <canvas> or html:canvas)
  • based on Apple's Quartz drawing API
  • created by Apple, developed by WHATWG (Apple, Mozilla, Opera, and Google), brought to W3C
• both vector-based
  • Canvas uses vectors instructions to create rasters

Raster vs. Vector

• rasters: series of unconnected dots ("pixels")
• vectors: instructions on how to draw a line as an object

Resizing to Fit

Easy to change size of images by either attributes or CSS.

          <object type="image/svg+xml" data="svgLogo.svg" 
                     style="width: 150px; height: 150px;"> </object>
        
          <object type="image/svg+xml" data="svgLogo.svg" 
                     width="150px" height="150px"> </object> 
       

          <svg xmlns="http://www.w3.org/2000/svg"
             width="100%" height="100%" viewBox="0 0 50 50">
             <circle cx="25" cy="25" r="25" fill="orange">
          </svg>
       

SVG

• "retained-mode"
  • element stored in DOM (memory model)
• picture made up of collections of elements
  • each element can be the target of events (i.e., mouse-click)
  • can be changed, removed, duplicated
  • animation and interactivity, both declarative and scripted
• set of element-specific APIs

Canvas

• "immediate-mode"
  • instructions can be stored or discarded
• picture made of set of script instructions
  • only whole canvas can be the target of events
  • scripted animation and interactivity

Simple example: rounded corners

Markup:

   <svg xmlns="http://www.w3.org/2000/svg">
     <rect x="20" y="20" width="400" height="300" 
           rx="35" ry="35" 
           fill="none" stroke="black" />
   </svg>
 

Script:

Common Features

• Complex shapes
• Gradients
• Patterns
• Clipping
• Text

How do you create SVG and Canvas?

Authoring Tools

• SVG
  • Inkscape, Adobe Illustrator, CorelDraw, XaraX
  • Ikivo Animator, BeatWare Mobile Designer
• Canvas
  • mostly JS editing, text-based
  • experimental online editors

Libraries

• SVG
  • dojo
  • Lively Kernal
• Canvas
  • Processing.js, Algorithm Ink

Fun!

• Star Maker
• Maze
• Cubes
• Maps
• Blob Sallad

Browser Support

Both mostly supported by Firefox, Opera, and WebKit (Safari, Google Chrome)

• SVG
  • Firefox and WebKit do not yet support declarative animation (probably next version)
  • No native support in Internet Explorer, plugins available (with new projects on the way)
• Canvas
  • No native support in Internet Explorer, script library for IE
  • Simpler to implement, so may be supported earlier than SVG

Both supported by iPhone, SVG supported on many keitai

SVG vs. Canvas: Fight!

• SVG
  • structured document
  • better for accessibility and localization
  • more hooks for WebApps
    • APIs
    • video/audio
• Canvas
  • pixel-based operations (selecting color at point)
  • script-heavy

Passing Values to Embedded SVG

To pass parameters to an SVG, use the <object> element with child <param> elements. Each <param> element should have name/value pairs with the 'name' and 'value' attributes; these will be exposed to the embedded SVG document.

    <object type="image/svg+xml" data="light.svg">
       <param name="color" value="red" />
       <param name="label" value="stop" />
    </object>

SVG in CSS

• Experimental features to use filters, clipping, and other features in HTML
• Mozilla and Opera
• New shared features
  • animations/transitions
  • 2.5D (psuedo-3D)
  • non-affine transformations ("Star Wars"" text)

SVG in text/html and XHTML

• Embedding in HTML with <object>, <iframe>, <img>, and <embed>
• Inline in HTML5
• Inline in XHTML
• HTML in SVG's <foreignObject>

Common Open Graphics

• Common API for SVG and Canvas
• Close integration of features for CSS, SVG, Canvas
• Just work together