Scalable Vector Graphics Zvi Topol and Yossi Cohn

1
Scalable VectorGraphicsZvi Topol and Yossi
Cohn
2
Outline

• Introduction
• Vector Graphics vs Bitmap Graphics
• Graphic formats and motivation for SVG.
• Data types and structural elements.
• Text and Basic Shapes
• Transformations and Paths
• Animation
• Other SVG Features
• Demos

3
Introduction

• Graphics on the Web has many different uses
• The WWW contains milliards of pages of data.
• Graphics is an important tool to visualize that
  data (diagrams, illustrations, images, etc)
• Graphics is also a good means to convey messages
  art, advertisements, campaigns
• It also can be used to create virtual
  environments and worlds - virtual shops, games,
  simulators.

4
Introduction(contd)

• There are two main ways to represent graphics
  on the Web
• Bitmapped Graphics - storing the RGB values of
  each pixel in the image.
• Vector Graphics - storing the coordinates of each
  vectors and the colors in which they are rendered.

5
Bitmapped Graphics

• Bitmapped images are widely used over the
  Internet attached to HTML documents using ltimggt
  tag.
• Main formats GIF, JPEG, BMP.
• Represented in Binary format.
• Image processing is done on server side and image
  is transferred as is to client.

6
Vector Graphics

• Uses of the power of transformations, coordinate
  systems, units and vector-based shapes.
• Rendering is done on the client side - using
  local processing power.
• Can be represented in both binary and text
  formats.
• Can include Bitmap images

7
Vectors vs Bitmaps(1)

• Size Vectors cost much less to represent than
  bitmaps.
• Example a diagonal blue line on 640X480 window
  costs 3000 bytes with a Bitmap. Same line using
  Vector Graphics 20 bytes.
• Bitmaps have problems with resolution and colors
  when viewed and printed on different kinds of
  screens and printers at different sizes.
• Transformations can be applied on vectors to
  solve this problem.

8
Vectors vs Bitmaps(2)

• Format representation - Bitmaps are binary files,
  vector based graphics can be represented as text
  files.
• Drawing instruction include text, and so are
  selectable and searchable. Links can be created
  to any part of a vector based image.
• Flexibility - Vectors are much more flexibly to
  changes (transformations and different text
  styles).

9
Vectors vs Bitmaps(3)

• Animation is much simpler using vectors.
• Accessibility to editing - easier to edit quickly
  a textual file than a binary file.
• Interactivity the ease of using scripts allows
  very good interactivity.

10
Vectors vs Bitmaps(4)

• SVG

• PNG

11
Vector Graphics Formats

• SVF - Simple Vector Format. Plug-in for CAD
  drawing representation - 1996. No more
  development after 1997. Limited, no animation.
  http//www.softsource.com/svf
• DWF - Drawing Web Format. Plug-in can be used
  with Javascript - but with no animation enabled.
  http//www.autodesk.com/whip/
• Flash - Marcomedias Vector Graphics Format.
  The most up to date. Supports full multimedia
  features. Occupies about 70 of the market.
  
  http//www.macromedia.com/software/flash
  

12
Vector Graphics Formats(2)

• VML - Vector Markup Language - based 2D vector
  format by Microsoft - not developed after 1998.
  Limited to one single platform - Microsoft.
  http//www.w3.org/TR/NOTE-VML
• WebCGM - computer graphics metafile for the Web -
  binary format. Primarily designed to visualize
  technical and scientific drawings.
  http//www.w3.org/Graphics/WebCGM
• VRML - Virtual Reality Modeling Language -
  devoted to 3D, supports 2D as well - complicated
  for simple presentations.
  Http//www.web3d.org

13
Other Vector Graphics Tools

• 2D APIs combined with ActiveX - limited to
  Microsoft platforms.
• Java2D - binary program with graphical 2D output
  - inserted in web pages as applet - platform
  independent, but requires more than basic
  scripting programming skills.

14
Motivation for SVG

• Text based language.
• Simple to program.
• Takes advantage of existing tools - XML, CSS,
  XSL.
• Powerful graphics capabilities - high performace,
  full animation support.
• Open standard.
• Extendable - MathML for instance.
• Searchable.

15
SVG(1)

• SVG is a language for describing 2D vector and
  mixed vector/raster graphics in XML.
• Developed by W3C organization.
• Supported by Sun, Adobe and IBM.
• Plug-in is required.

16
SVG(2)

• SVG specification is available in
  http//www.w3.org/TR/2000/CR-SVG-20001
  102/
• First draft released 11/2/1999.
• Current status Candidate Recommendation -
  meaning that the specification is maturing and is
  now ready for more widespread implementation
  testing.

17
SVG Concepts(1)

• SVG stands for Scalable Vector Graphics
• In terms of graphics, scalable means not being
  limited to single, fixed units.
• In terms of Web scalable means that a particular
  technology can grow to a large number of files, a
  large number of users, a wide variety of
  applications.
• SVG, being a graphics technology for the Web, is
  scalable in both senses of the word

18
SVG Concepts(2)

• SVG graphics is scalable to different display
  resolutions and color spaces.
• The same SVG graphic can be placed at different
  sizes on the same Web page, and re-used at
  different sizes on different pages.
• SVG graphics can be magnified to see fine
  detail, or to aid those with low vision.

19
SVG Code example(1)

• Valid SVG document
  
  
• lt?xml version"1.0 standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-2
  0001102/DTD/svg-20001102.dtd"gt
  ltsvg width300px"
  height200px"gt
  
  ltdescgtlt!-- put a description
  here --gt lt/descgt
  
  ltggtlt!-- your graphic here --gt
  lt/ggt lt/svggt

20
SVG Code example(2)

• Well formed SVG document
  
  
• lt?xml version"1.0 standalone"no"?gt
  
  ltsvg width300px" height200px xmlns
  'http//www.w3.org/2000/svg gt
  
  ltdescgtlt!-- put a
  description here --gt
  lt/descgt
  ltggtlt!-- your graphic here --gt
  lt/ggt lt/svggt

21
Basic Data Types(1)

• Main Data types for SVG attributes
• ltintegergt - signed integer numbers of 32 bits.
• ltnumbergt - decimal numbers.
• ltlengthgt - ltnumbergt followed by a unit
  identifier 1.5mm - in the user coordinate system
  - a pure number.
• Unit identifiers as defined in CSS
  em, ex, px, pt, pc, cm, mm, in and
  percentages.

22
Basic Data Types(2)

• ltcoordinategt - represents a ltlengthgt in the user
  coordinate system - distance from the origin for
  a specific axis.
• ltanglegt - ltnumbergt optionally followed by deg -
  degrees, grad - gradians or rad - radians.
  Default is degrees. (as defined in CSS2).
• ltcolorgt - for representing colors from sRGB color
  space. Either by keywords recognized by SVG or by
  hex numbers.

23
Basic Data Types(3)

• ltpaintgt - possible values fill - filling the
  shape or stroke - rendering the contour of a
  shape.
• lttransform-listgt - a list of transformations.
• lturigt - Uniform Resource Identifiers
• lttimegt - ltnumbergt followed by a time identifier
  ms - milliseconds or s - seconds. May not be
  negative.

24
SVG document fragment

• SVG code is found inside ltsvggt element tag.
• An SVG document fragment consists of any number
  of SVG elements contained within an svg element.
• ltsvggt element can be empty, contain basic shapes,
  or more complex graphic elements.

25
Example

• lt?xml version"1.0" standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-
  20001102/DTD/svg-20001102.dtd"gt
  ltsvg width"5cm"
  height"4cm"gt
  ltdescgtFour separate
  rectangles lt/descgt
  ltrect
  x"0.5cm" y"0.5cm" width"2cm" height"1cm"/gt
  ltrect x"0.5cm" y"2cm" width"1cm"
  height"1.5cm"/gt ltrect x"3cm" y"0.5cm"
  width"1.5cm" height"2cm"/gt ltrect x"3.5cm"
  y"3cm" width"1cm" height"0.5cm"/gt lt/svggt

26
Grouping Element(1)

• The 'g' element is the element for grouping and
  naming collections of drawing elements.
• Enables to execute same operation on all items in
  the group.
• Can be used in conjunction with ltdescgt and
  lttitlegt elements to provide description and
  semantics about the group

27
Grouping Element(2)

• Each group can be given the id attribute for
  purposes of animation and re-usabilty.
• Any g element can contain other g elements
  nested within it to an arbitrary depth.
• Drawing element that is not contained in a g
  element can be considered as a group of its own.

28
Another Example

• lt?xml version"1.0" standalone"no"?gt
  lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-
  20001102/DTD/svg-20001102.dtd"gt
  ltsvg width"5cm"
  height"5cm"gt
  ltdescgtTwo groups, each of two rectangles
  lt/descgt ltg id"group1" style"fillred"gt
  ltrect x"1cm" y"1cm"
  width"1cm" height"1cm" /gt ltrect
  x"3cm" y"1cm" width"1cm" height"1cm" /gt
  lt/ggt ltg id"group2"
  style"fillblue"gt
  ltrect x"1cm" y"3cm" width"1cm" height"1cm" /gt
  ltrect x"3cm" y"3cm" width"1cm"
  height"1cm" /gt lt/ggt
  lt/svggt

29
The defs element(1)

• The defs element is a container element for
  referenced elements.
• When SVG elements are drawn into a visual media,
  the ltdefsgt is not drawn with them.

30
The defs element(2)

• ltsvg width"8cm" height"3cm"gt
  
  ltdescgtLocal URI references within ancestor's
  defs element lt/descgt
  
  ltdefsgt
  
  ltlinearGradient id"Gradient01"gt
  ltstop offset"20"
  style"stop-color39F"/gt
  ltstop offset"90" style"stop-colorF3F
  "/gt lt/linearGradientgt
  
  lt/defsgt
  
  ltrect x"1cm" y"1cm" width"6cm" height"1cm"
  style"fillurl(Gradient01)" /gt
  lt/svggt

31
References in SVG

• SVG supports two types of references
• Local URI reference the referenced object is
  found in the same document.
  
• Non-Local URI reference the referenced object
  is found in another document.
• The support of references in SVG makes use of
  Xlink, Xpointer and XML references.

32
The use element(1)

• The ltusegts purpose is to reuse defined container
  elements like ltsvggt and ltggt
• The 'use' element references another element and
  indicates that the graphical contents of that
  element is included/drawn at that given point in
  the document.
• The use element cannot reference entire files.

33
The use element(2)

• The 'use' element has the attributes x, y, width
  and height which are used to map the graphical
  contents of the referenced element onto a
  rectangular region within the current coordinate
  system.
• The effect of a 'use' element is as if the
  contents of the referenced element were deeply
  cloned into a separate non-exposed DOM tree which
  had the 'use' element as its parent and all of
  the 'use' element's ancestors as its higher-level
  ancestors.

34
The use element(3)

• ltsvg width"10cm" height"3cm" viewBox"0 0 100
  30"gt ltdescgtExample Use01 - Simple case of 'use'
  on a 'rect'lt/descgt ltdefsgt
  
  ltrect id"MyRect"
  width5cm" height"1cm"/gt
  lt/defsgt
  
  ltuse x1cm"
  y"1cm" xlinkhref"MyRect" /gt
  lt/svggt

35
The use element(4)

• The ltusegt element has an important advantage over
  a simple reference to an element
• It can apply transformations and style sheets
  over the used element by using the matching
  attributes of the use element.

36
The image element(1)

• The ltimagegt indicates that the contents of a
  complete file are to be rendered into a given
  rectangle within the current user coordinate
  system
• The ltimagegt can refer to raster image files such
  as PNG or JPEG or to an SVG file.
• Main attributes x, y, width, height and
  xlinkhref

37
The image element(2)

• If ltimagegt references a raster image, then the
  raster image is fitted into the region specified
  by the x, y, width and height attributes such
  that the top/left corner of the raster image
  exactly aligns with coordinate (x,y), and the
  bottom/right corner of the raster image exactly
  aligns with coordinate (xwidth,yheight).
• When ltimagegt references an SVG file, then the
  'image' element establishes a new viewport -
  specified by x,y,width,height.

38
The image element(3)

• Unlike ltusegt, ltimagegt cannot reference elements
  inside the SVG document.
• One can apply transformations and styles to the
  ltimagegt element through the matching attributes.

39
The text element

• lttextgt is used to specify text that is rendered
  with other graphical elements.
• This means that we can apply transformation,
  clipping, masking, and so to text.
• Fonts are as specified in CSS2.

40
lttextgt example

• lt?xml version"1.0" standalone"no"?gt
• lt!DOCTYPE svg PUBLIC "-//W3C//DTD SVG
  20001102//EN" "http//www.w3.org/TR/2000/CR-SVG-20
  001102/DTD/svg-20001102.dtd"gt
• ltsvg width"10cm" height"3cm"gt
• ltdescgtExample text01 - 'Hello, out
  there' in bluelt/descgt
• lttext x"2.5cm" y"1.5cm"
  style"font-familyVerdana font-size16pt
  fillblue"gt Hello, out there lt/textgt
• lt/svggt

41
Basic Shapes supported

• All basic shapes in SVG are represented as
  elements, with attributes corresponding to the
  shape.
• ltrectgt , ltcirclegt, ltellipsegt, ltlinegt.
• ltpolylinegt - defines a set of connected straight
  lines.
• ltpolygongt - defines a closed shape consisting of
  a set of connected straight line segments.
• Each shape can be stroked, filled and transformed.

42
Rendering Model(1)

• SVG content is painted on to a canvas 2D
  infinite plain.
• Rendering occurs relative to a finite rectangular
  region of the canvas.
• This Region is called SVG Viewport.
• The size of the Viewport (its height and width)
  is defined as attributes inside the ltsvggt
  element.

43
Rendering Model(2)

• Examples of viewports
  300x200 view port
  150x200 viewport

44
Rendering Model(3)

• SVG uses a "painters model" of rendering
  Paint is applied in successive operations to the
  output device - when the area overlaps a
  previously painted area the new paint partially
  or completely obscures the old.
• Rendering order First Comes First Painted
• Support for 3 types of graphical elements
  Shapes, Text, Raster images.

45
Coordinate Systems

• There are two coordinate systems in SVG
• Viewport coordinate system positive integer
  numbers representing pixels.
• User coordinate system real numbers, this is
  the coordinate system as the user sees it.
• Usually the origin of both coordinate systems are
  identical and each pixel in the viewport is
  mapped to one unit in user coordinate system.
• The viewbox attribute can be used to change this
  mapping.

46
Transformations(1)

• A new user coordinate system can be established
  by specifying transformations in the form of a
  transform attribute on a group of graphical
  elements.
• The transform attribute transforms all user space
  coordinates and lengths on the given element and
  all of its ancestors.
• Transformations maybe nested and so have
  cummulative effect.

47
Transformations(2)

• 2D transformations are represented using 3X3
  matrices.
• Common transformations
• translate(x,y) - establish a new coordinate
  system whose origin is at (x,y).
• rotate(a) rotates the coordinate system by
  a degrees around the origin.
• scale(a,b) scales the coordinate system x
  axis by a and y axis by b.

48
Transformations(3)

• Translation Matrix
• Rotation Matrix
• Scaling Matrix

49
Transformations(4)
50
Transformations(5)

• SVG allows both to apply transformations as
  translate, rotate, scale or to apply a detailed
  transformation matrix.
• Transformations in SVG are applied by the
  transform element.

51
Paths(1)

• Paths represent the outline of a shape which can
  be filled, stroked, used as a clipping path, or
  any combination of the three.
• Paths are described by a set of points.
• The geometry of the path is defined in terms of
  moveto, lineto, curveto, arc, and closepath.
• Path is represented in SVG by the path element.

52
Paths(2)

• ltsvg width"4cm" height"4cm" viewBox"0 0 400
  400"gt lttitlegtExample
  triangle01- simple example of a 'path'lt/titlegt
  ltdescgtA path that draws a rectanglelt/descgt
  
  ltrect x"1" y"1" width"398" height"398"
  style"fillnone strokeblue"/gt
  
  ltpath d"M 100
  100 L 300 100 L 200 300 z" style"fillred
  strokeblue stroke-width3"/gt
  
  lt/svggt

53
Animation(1)

• SVG supports the ability to change vector
  graphics over time.
• There are 2 main ways for animating SVG content
• Through SVG animation elements.
• By access to the SVG DOM.

54
Animation(2)

• SVG is a host language in terms of SMIL Animation
  and therefore introduces additional constraints
  and features as permitted by that specification.
• It also introduces new extensions compatible with
  SMIL.

55
Animation Elements

• Main animation elements in SVG
• animate , set, animateMotion,
  animateColor, animateTransform.
• Animation introduces the time dimension to the
  document.
• Time notion in SVG document begin, document
  end.(When ltsvggts onload event was triggered,
  when ltsvggts resources have been released).

56
More SVG Features

• Gradients
• Scripting (using scripting languages to handle
  various events).
• Filter effects (Lighting, Color spaces, etc..).
• Clipping and masking (alpha values).

57
Examples(1)

• Linear Gradient
• Radial Gradient

58
Examples(2)

• Filter effects

59
Demos

• Map Example
• Moscow Map Example
• Animated Filter Effect

60
Tools for SVG authoring

• CSIRO SVG Toolkit
• http//sis.cmis.csiro.au/svg/index.html
• Corel Draw 10
• http//www.corel.com/
• PhotoShop
• http//www.adobe.com/
• Various Converters from Other graphical formats
  to SVG.

61
Other related W3C groups

• SMIL Synchronized Multimedia Integration
  Language.
• WIA Web Accessibility Initiative.