3.3 Scalable Vector Graphics (SVG)

3.3.1 Background

• SVG is a 2D graphic language
• Vector graphics relates to geometric objects (e.g., lines and circles)
• Raster graphics describes pixels (e.g., png and jpeg).
• Viewers: Adobe (ms windows/mac), Batik (java)
• Browsers: Amaya, Mozilla SVG, X-Smiles

3.3.2 Initialization

3.3.3 Basic Shapes

Basic Shapes

<line     x1="..." y1="..."     x2="..."     y2="..." />     <rect      x="..."  y="..."  width="..." height="..." />     <circle   cx="..." cy="..."      r="..."              />     <ellipse  cx="..." cy="..."     rx="..."     ry="..." />     <polyline points="x1,y1  ........." />     <polygon  points="x1,y1  ........." />

[example]

Paths

<path d="..." pathLength = "..." />

Paths represent the outline ‘d’ of a shape defined in terms of points and the following directives.

• M x,y: move to specified point
• L x,y: line to specified point
• C x1,y1 x2,y2 x,y: cubic Bézier curve
• A rx,ry rotation large,sweep x,y: elliptical arc.
  • starts at the current point
  • ends at point (x, y)
  • radii (rx, ry)
  • rotation relative to the current coordinate system
  • 1: large arc,
    0: short arc
  • 1: positive sweep direction,
    0: negative direction
• Z: close path

Lowercase characters request relative addresses instead of absolute ones.

[example]

Painting

Painting of shapes is determined by the colors supplied to the ‘fill’ and ‘stroke’ properties.

[example]

3.3.4 Text

• <text>: marks the content;
  attributes: x, y
• <textPath>: layout for the text on a path;
  attributes: xlink:href, startOffset (distance along the path)
• <tspan>: positioning and rendering of text fragments;
  attributes: x, y, dx, dy

[example]

3.3.5 Code Sharing

Cross Referencing

<....  id="..." ...> ... </...>   <use x="..." y="..." width="..." height="..." xlink:href="..." />

[example]

Grouping

<g ...>...</g>

[example]

Inhibited Rendering

<defs>...</defs>

Elements that are descendants of a ’defs’ are not rendered in place.

[example]

Templates

<symbol ...>...</symbol>

The symbols are defined within an independent canvas. The overflow parameters ask for the whole symbol, not only a quarter of it around the origin (0,0).

[example]

3.3.6 Coordinate Systems

Transformations on Coordinate System

transform="..."

• scale(sx), scale(sx sy)
• translate(x), translate(x y)
• rotate(d), rotate(d cx cy)
• skewX(d), skewY(d)
• matrix(a,b,c,d,e,f)

  (a c e) (x)   (b d f) (y)   (0 0 1) (1)

  
  [1 0 0 1 tx ty]: translation
  [sx 0 0 sy 0 0]: scaling
  [cos(a) sin(a) -sin(a) cos(a) 0 0]: rotation
  [1 0 tan(a) 1 0 0]: x skew
  [1 tan(a) 0 1 0 0]: y skew

[example]

3.3.7 Special Effects

Clipping

<clipPath id="...">...</clipPath>   <... clip-path="url(#...)" >

[example]

Filtering

Create blurs, shadows, lighting effects, etc.

[example]

Animation

[example]

Interactivity

[example]