The SVG language Didier Courtaud Novembre 2001

Plan

• The SVG language
• Disclaimer
• Introduction
  • overview
  • definitions and concepts
  • Definitions and concepts ( continued )
  • Definitions and concepts ( continued )
• SVG document structure
  • Elements grouping
  • Referencing
  • Referencing ( continued )
  • Referencing ( continued )
  • Referencing ( continued )
  • Metadata
  • Conditional treatment
• Coordinates systems
  • transformations
  • transformations ( continued )
  • transformations ( continued )
  • transformations ( continued )
  • transformations ( continued )
  • transformation attributes
  • Viewpoint attributes
  • Viewpoint attributes ( continued )
  • New viewpoints
• Low level functionnalities
  • elementary drawing commands
  • elementary drawing commands ( continued )
  • elementary drawing commands ( continued )
  • examples
  • examples ( II )
  • elementary shapes
  • rectangles
  • circles
  • ellipses
  • lines
  • polylines
  • polygons
  • Basic shapes examples
  • Basic shapes examples ( II )
• Text
  • syntax
  • fitting elements
  • fitting elements ( continued )
  • specifications
  • relationship with paths
• Rendering
  • specifications
  • specifications ( examples )
  • specifications ( examples ) ( II )
  • markers
• Color
• Gradients and patterns
  • linear gradient
  • radial gradient
  • patterns
• Clipping and masking
  • clipping example
  • mask example
• Filtering effects
  • example
• Links
  • internal links
• Scripts
• Animations
  • elements
  • example
  • example ( continued )
• Other functionnalities
• Other functionnalities ( continued )
• Other functionnalities ( continued )
• Language definition and use
• Conclusion

The SVG language

Disclaimer

• This course is based upon the 7 th Working Draft published by the

WWW Consortium on December 3rd 1999
( http://www.w3.org/TR/1999/12/WD-SVG-19991203/index.html )
Although it was denominated  Last Call Working Draft,  a further version of this working draft has been published in 2000 with minor modifications and finally approved as a recommandation in September 2001.
 
• Samples used inside this course come from either the samples directory of the version 0.3c of the SVGView product from IBM or from the December 3rd specification
• Graphs used inside these course are those produced by the version 0.3c of the SVGView product when loading the examples quoted above or the examples given in the December 3rd specification of the W3C

Introduction

• The needs of :
• vector graphics ( to save bandwidth )

resizable graphics ( in order to easily integrate them in a Web page and to be able to zoom in )
has led the W3C to set up a Working Group in 1998
• The group members came from Microsoft, Autodesk, Adobe, IBM, Sun,

Netscape, Xerox, Apple, Corel, HP,ILOG , ...
• In October 1998, this group has published a SVG requirements document for public comment
• After discussion, this document was kept as the first draft of the specification
• First draft : February 5th 1999
• Seventh draft : December 3rd 1999

Introduction : overview

• SVG is a language to describe 2D images with an XML syntax
• It allows three types of graphical objects :
• vector shapes ( lines,curves, ..)
• images
• text
• Graphical objects can be grouped, transformed, included into other objects and be styled
• SVG graphics are interactive and dynamical. Their animation can be defined either inside the SVG files themselves or in external script file

SVG offers a DOM interface in order to be able to animate any element or attribute
• SVG has relationships with these W3C standards :
• XML
• XML-NS
• XLINK
• Xpointer
• XSL-T
• CSS
• DOM
• SMIL
• HTML
• XHTML
• ...

Introduction : definitions and concepts

• MIME type : image/svg
• XML declaration

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
• Scalable meaning
• = that can be zoomed in and out

= that allows a great number of users and a great number of uses ( by reusing fragments )
• XML
• Availability of all XML tools : parser, transformation tools, databases, ..
• The conforming to XML namespaces allows to mix XML grammars inside a single document : for instance, an HTML document can include SVG graphics, MathML equations, SMIL presentations, ...

Introduction : Definitions and concepts ( continued )

• Types of the basic data
• Angle : an integer followed by a unit : deg ( degree ), grad ( grades ), rad ( radians )

Color : an sRGB color specified like in HTML : #rrggbb or a keyword inside this list : aqua,black,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow
• Integer : between - 2147483648 and 2147483647
• Float : either in decimal notation or in scientific notation ( x.yyye(or E)±nn )

        between - 3.4e+38 et 3.4e+38
• Length : a number + a CSS unit ( mm,cm,m )
• Time : a number followed by a unit : ms (milliseconds ) or s ( seconds )
• URI : Uniform Resource Identifier

Introduction : Definitions and concepts ( continued )

• Style
• Can be specified :
• either with CSS2 ( Cascading Style Sheet Level 2 )
• or with XSL ( XML Style Language )
• or with the style attribute which is shared by many SVG tags
• Example with a text tag
• <text style="font-size: 12pt> Texte in 12 pt</text>
It is recommended not to mix CSS styles and XSL styles in the same SVG document

SVG document structure

• An SVG document is composed of several parts inside a <svg> structure
• Many <svg> structures can be present inside the same document or in dynamic documents created by inclusion of documents with different namespaces
• The <svg> tag redefines the user space
• Attributes of the tag <svg>
• x = "x0" ; x coordinate of the upper left corner ( for internal structures )
• y = "y0" ; y coordinate for the upper left corner ( for internal structures )
• width = "w0" ; width in pixels ( for external structure )
• height = "h0" ; height in pixel ( for the external structure )
• ...

SVG document structure : Elements grouping

The <g> tag is grouping and identifying elements with same attributes like color or style
• Example :
• <g style="fill:red" id="Great red rectangles">

<rect x="100" y="100" width="200" height="200 />
<rect x="300" y="400" width="100" height="100 />
</g>
<g style="fill:blue" id="Small blue rectangles">
<rect x="10" y="10" width="20" height="20 />
<rect x="30" y="40" width="10" height="10 />
</g>
• Any number of <g> structures can be overlapped
• Isolated objects ( outside any structure ) are assumed to be inside their own group ( their attributes are not propagated )

SVG document structure : Referencing

• Several referencing systems can be used
• Relative referencing
• The reference is local
• Example
• <linearGradient id="myGradient"> .... </linearGradient>

...
<rect style="fill:url(#myGradient) />
• Absolute referencing
• The reference is a general URI
• The reference is not located inside the local document
• Both referencing can use the XPointer syntax

SVG document structure : Referencing ( continued )

• The <defs> tag allows to define objects which will be referenced later on in the same file
• Example :

<defs>
<linearGradient id="Gradient01"> .... </linearGradient >
</defs>
...
<rect style="fill:url(#Gradient01) ..../>
• All the definition of objects that will be used later on should be done in the same <defs> structure
• Therefore there is only one <defs> structure in a single SVG file

SVG document structure : Referencing ( continued )

• The <symbol> tag allows to define graphical objects that can be reused in the following cases
• Multiples instances of the same object
• Basic object referenced by many others
• Definition of an element of a font
• ...
• The <use> tag should be used to reference elements defined inside a <defs> structure ( sort of inclusion )
• Example :

<defs>
<symbol id="s1" >
......
</symbol>
</defs>
<g >
<use xlink:href="#s1" />
</g>
• The use element can reference  :
• either an element of the same file whose ancestor is a <defs> element
• or an element of another file whose ancestor is a <defs> element

SVG document structure : Referencing ( continued )

• The <image> tag allows to reference whole images inside a rectangular area defined inside the user space
• The images should be in the following formats :
• PNG
• JPEG
• SVG
• Example :

<image x="200" y="300" width="100px" height="100px" xlink:href="monimage.png" />

SVG document structure: Metadata

• Two metadata structures can be defined :
• The <desc> structure allows to specify comments that will not be rendered

The <title> structure contains a title that can be rendered by the players for instance in the window title
• Example :

<g>
<title> My picture
</title>
<desc> There is only one rectangle in this picture </desc>
<rect ..... />
</g>

SVG document structure  : Conditional treatment

• Like in SMIL, display of certain elements can be submitted to constraints ( same module as SMIL )
• Attributes :
• xml:lang
• system-required = list of functions
• Defines the minimal functionnalities which should be implemented
• For instance

SVGLang : all the functionnalities described in the specification
SVGStatic : a subset
SVGDOMStatic : + DOM interfaces corresponding to SVGStatic
SVGDOMDynamic , ....
• system-language = list of languages
• same as in  SMIL

Coordinates systems

• At the beginning, the most <svg> external element sets up both a user space and a point of view which are mixed up like this :

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="300px" height="100px">   <desc>Example InitialCoords - SVG's initial coordinate system</desc>   <g style="fill:none; stroke:black; stroke-width:3">     <line x1="0" y1="1.5" x2="300" y2="1.5" />     <line x1="1.5" y1="0" x2="1.5" y2="100" />   </g>   <g style="fill:red; stroke:none">     <rect x="0" y="0" width="3" height="3" />     <rect x="297" y="0" width="3" height="3" />     <rect x="0" y="97" width="3" height="3" />   </g>   <g style="font-size:14 font-family:Verdana">     <text x="10" y="20">(0,0)</text>     <text x="240" y="20">(300,0)</text>     <text x="10" y="90">(0,100)</text>   </g> </svg>

• Every <svg> internal element redefines a new user space and an associated point of view

Coordinates systems : transformations

• A new user space can be specified by transforming the original space
• For instance, from the space :

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="400px" height="150px">   <desc>Example xform1Orig - Simple transformations: original picture</desc>   <g style="fill:none; stroke:black; stroke-width:3">     <!-- Draw the axes of the original coordinate system -->     <line x1="0" y1="1.5" x2="400" y2="1.5" />     <line x1="1.5" y1="0" x2="1.5" y2="150" />   </g>   <g>     <text x="30" y="30" style="font-size:20 font-family:Verdana">       ABC (orig coord system)     </text>   </g> </svg>

• one can create with a  translation :

?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="400px" height="150px">   <desc>Example xform1NewCoordSys - New user coordinate system</desc>   <g style="fill:none; stroke:black; stroke-width:3">     <!-- Draw the axes of the original coordinate system -->     <line x1="0" y1="1.5" x2="400" y2="1.5" />     <line x1="1.5" y1="0" x2="1.5" y2="150" />   </g>   <g>     <text x="30" y="30" style="font-size:20 font-family:Verdana">       ABC (orig coord system)     </text>   </g>   <!-- Establish a new coordinate system, which is        shifted (i.e., translated) from the initial coordinate        system by 50 user units along each axis. -->   <g transform="translate(50,50)">     <g style="fill:none; stroke:red; stroke-width:3">       <!-- Draw lines of length 50 user units along             the axes of the new coordinate system -->       <line x1="0" y1="0" x2="50" y2="0" style="stroke:red"/>       <line x1="0" y1="0" x2="0" y2="50" />     </g>     <text x="30" y="30" style="font-size:20 font-family:Verdana">       ABC (translated coord system)     </text>   </g> </svg>

Coordinates systems : transformations ( continued )

• with a rotation and a scaling :

?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="400px" height="120px">   <desc>Example RotateScale - Rotate and scale transforms</desc>   <g style="fill:none; stroke:black; stroke-width:3">     <!-- Draw the axes of the original coordinate system -->     <line x1="0" y1="1.5" x2="400" y2="1.5" />     <line x1="1.5" y1="0" x2="1.5" y2="120" />   </g>   <!-- Establish a new coordinate system whose origin is at (50,30)        in the initial coord. system and which is rotated by 30 degrees. -->   <g transform="translate(50,30)">     <g transform="rotate(30)">       <g style="fill:none; stroke:red; stroke-width:3">         <line x1="0" y1="0" x2="50" y2="0" />         <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">         ABC (rotate)       </text>     </g>   </g>   <!-- Establish a new coordinate system whose origin is at (200,40)        in the initial coord. system and which is scaled by 1.5. -->   <g transform="translate(200,40)">     <g transform="scale(1.5)">       <g style="fill:none; stroke:red; stroke-width:3">         <line x1="0" y1="0" x2="50" y2="0" />         <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">         ABC (scale)       </text>     </g>   </g> </svg>

• with skewing

?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="400px" height="120px">   <desc>Example Skew - Show effects of skewX and skewY</desc>   <g style="fill:none; stroke:black; stroke-width:3">     <!-- Draw the axes of the original coordinate system -->     <line x1="0" y1="1.5" x2="400" y2="1.5" />     <line x1="1.5" y1="0" x2="1.5" y2="120" />   </g>   <!-- Establish a new coordinate system whose origin is at (30,30)        in the initial coord. system and which is skewed in X by 30 degrees. -->   <g transform="translate(30,30)">     <g transform="skewX(30)">       <g style="fill:none; stroke:red; stroke-width:3">         <line x1="0" y1="0" x2="50" y2="0" />         <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">         ABC (skewX)       </text>     </g>   </g>   <!-- Establish a new coordinate system whose origin is at (200,30)        in the initial coord. system and which is skewed in Y by 30 degrees. -->   <g transform="translate(200,30)">     <g transform="skewY(30)">       <g style="fill:none; stroke:red; stroke-width:3">         <line x1="0" y1="0" x2="50" y2="0" />         <line x1="0" y1="0" x2="0" y2="50" />       </g>       <text x="0" y="0" style="font-size:20; font-family:Verdana; fill:blue">         ABC (skewY)       </text>     </g>   </g> </svg>

Coordinates systems : transformations ( continued )

All these transformations can be mathematically represented by a 3 x 3 square matrix

where only 6 values a,b,c,d,e,f are different from 0 or 1 ( since we are in a 2D space ). That is why we can also write it with a vector notation like  [ a b c d e f ] .
• Transformations convert coordinates and lengths from the original system to the new system with a relationship like :

Coordinates systems : transformations ( continued )

• With this notation, transformations can be calculated as follows :
• Translation

where tx and ty are the translation distances along the x and y axes
• Scaling

where sx and sy are the scaling factors along the x and y axes
• Rotation

where a is the rotation angle
• Skewing x

where a is the skewing angle towards y
• Skewing y

where a is the skewing angle towards y

Coordinates systems : transformations ( continued )

Transformations can be grouped any number of times by simply multiplying matrices :

For every element, the set of transformations applies to this element as well as to whole its ancestors ( generally the previous <svg> element ) is called the Current Transform Matrix ( CTM )
The CTM also represents the global transformation matrix between the original user space and the actual viewport coordinates

Coordinates systems : transformation attributes

• The value of the transform attribute can be a list of transformations separated  by spaces and/or commas. These individual transformations are applied one after another in the order they appear. They belong to the following list :
• matrix ( a,b,c,d,e,f) ; the e and f values can have CSS units
• translate ( tx, [ ty] ) ; tx and ty can have CSS units
• scale ( sx, [ sy ] ) ; if sy is not present, it is assumed that sy = sx

rotate ( alpha ) specifies a rotation with an angle alpha around the origin of the current user space
• skewX ( beta ) specifies the angle of skewing along x
• skewY ( beta ) specifies the angle of skewing along y
• All the numerical values are floating point values : angle values are expressed into the designated angle units
• The transform attribute is applied to the element BEFORE any coordinate or lengths calculation for this element

Coordinates systems : Viewpoint attributes

A new point of view can be set up to constraint a set of objects to stay inside a defined area
• All the elements which can establish a new point of view share the viewBox attribute
• viewBox ( minx , miny, width, heigth )
• Example :

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd" [ <!ENTITY Smile "   <rect x='.5' y='.5' width='29' height='39' style='fill:yellow; stroke:red'/>   <g transform='rotate(90)'>     <text x='10' y='10' style='font-family:Verdana;            font-weight:bold; font-size:14'>:)</text>   </g>"> <!ENTITY Viewport1 "<rect x='.5' y='.5' width='49' height='29'                           style='fill:none; stroke:blue'/>"> <!ENTITY Viewport2 "<rect x='.5' y='.5' width='29' height='59'                            style='fill:none; stroke:blue'/>"> ]> <svg width="480px" height="270px" style="font-family:Verdana; font-size:8">   <desc>Example PreserveAspectRatio - demonstrate available options</desc>   <text x="10" y="30">SVG to fit</text>   <g transform="translate(20,40)">&Smile;</g>   <text x="10" y="110">Viewport 1</text>   <g transform="translate(10,120)">&Viewport1;</g>   <text x="10" y="180">Viewport 2</text>   <g transform="translate(20,190)">&Viewport2;</g>   <text x="100" y="30">--------------- meet ---------------</text>   <g transform="translate(100,60)"><text y="-10">xMin*</text>&Viewport1;     <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(170,60)"><text y="-10">xMid*</text>&Viewport1;     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(240,60)"><text y="-10">xMax*</text>&Viewport1;     <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <text x="330" y="30">---------- meet ----------</text>   <g transform="translate(330,60)"><text y="-10">*YMin</text>&Viewport2;     <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(380,60)"><text y="-10">*YMid</text>&Viewport2;     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(430,60)"><text y="-10">*YMax</text>&Viewport2;     <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <text x="100" y="160">---------- slice ----------</text>   <g transform="translate(100,190)"><text y="-10">xMin*</text>&Viewport2;     <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(150,190)"><text y="-10">xMid*</text>&Viewport2;     <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <g transform="translate(200,190)"><text y="-10">xMax*</text>&Viewport2;     <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"           width="30" height="60">&Smile;</svg></g>   <text x="270" y="160">--------------- slice ---------------</text>   <g transform="translate(270,190)"><text y="-10">*YMin</text>&Viewport1;     <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(340,190)"><text y="-10">*YMid</text>&Viewport1;     <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g>   <g transform="translate(410,190)"><text y="-10">*YMax</text>&Viewport1;     <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40"           width="50" height="30">&Smile;</svg></g> </svg>

Coordinates systems : Viewpoint attributes ( continued )

• The scaling of the viewpoint change can be controlled by the attribute :

preserveAspectRatio = align [ meet or slice ]
• The authorized values of align are :
• nothing ( default )  ; the scaling is done such as the extreme values of x ( resp y ) are the boundaries of the viewpoint rectangle
• xMinYmin ; Uniform scaling ; min of x = x min of the viewpoint

                                            min of  y = y min of the viewpoint
• XMidYMin ; Uniform scaling ; mean of  x = x mean of the viewpoint

                                              min of  y = y min of the viewpoint
• XMaxYMin ; idem
• XMinYMid ; idem
• and all possible choices Min,Mid,Max for X and Y
• The meet or slice parameter is optional ; it has the following meaning :
• meet ( default ) scales the graphic such as :
• the aspect ratio is preserved
• the whole viewpoint rectangle is visible
• the viewpoint box is as large as possible
• slice scales the graphic such as :
• scales the graphic such as :
• the viewpoint box fits the whole space
• the viewpoint box is as small as possible
• Example

Coordinates systems : New viewpoints

• Elements which define a new viewpoint are :
• <svg>

<use> or <image> set up a temporary viewpoint to draw the instances of the referenced elements or images
• < marker> sets up a temporary viewpoint to draw arrows or markers

When a text draws a symbol along a path, it uses a temporary viewpoint to draw the symbol
• Same thing for a  pattern
• <mask> also sets up a temporary viewpoint

Low level functionnalities

• The basic graphical object is a path ( path )
• This path is the outline of a shape for which we can specify :
• the thickness
• the color
• the filling
• Syntax :

<path d="path data" nominalLenght="number" />
• path data is a set of elementary drawing commands ( detailled later on )
• nominalLenght is the total length of the path expressed in the user space

Low level functionnalities : elementary drawing commands

•  The path data obey to the following rules :
• All the drawing commands can be abbreviated on a single character
• Spaces can be suppressed
• The repetition a drawing command can be omitted
• There are always two versions of the same drawing command :
• in upper case : absolute coordinates
• in lower case : relative coordinates
These rules tend to decrease at the maximum the size required for path description

Low level functionnalities : elementary drawing commands ( continued )

• M or m  : moveto : x,y
• starts a new sub path
• Z or z : closepath :
close a sub path by drawing a straight line between the current point and the last moveto
• lineto
• L or l : lineto :  x , y
• draw a straight line between the current point and the point ( x,y )
• H or h : horizontal lineto : x
• draw a horizontal line between the current point and the point ( x,y0 )
• V or v : vertical lineto : y
• draw a vertical line between the current point and the point ( x0,y )

Low level functionnalities : elementary drawing commands ( continued )

• There are also three groups of commands to draw curves
• C or c, S or s : Cubic Bezier curves
• A start point, an end point and 2 control points are to be specified
• Q or q, T or t : Quadratric Bezier curves
• A start point, an end point and 1 control point are to be specified
• A or a : Elliptic arc
• A part of an ellipsis is specified by 2 rays and the direction of drawing

Low level functionnalities : examples

?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="600px" height="200px">   <text x="5" y="20" style="font-size:24">SVG Test: Path using horizontal &amp; vertical lines</text>   <g style="fill:none; stroke:blue">     <path d="M 50,50  h 50 v 50 h -50 z"/>     <path d="M 110,50 h 50 v 50 h -50 v -50"/>     <path d="m 50,110 h 50 v 50 h -50 z" />   </g> </svg>

Low level functionnalities: examples ( II )

<?xml version="1.0" standalone="no" ?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="500" height="700" >   <g style="text-rendering:optimizeLegibility;shape-rendering:default">     <text x="5" y="20" style="font-size:24">SVG Demo: More elliptical arcs</text>     <g style="stroke-width:4 ; fill:none; stroke:blue" >       <path d="M 60,50   A 50 50 0 0 0 110 100" />       <path d="M 160,50  A 50 50 0 0 1 210 100" />       <path d="M 60,150  A 50 50 0 1 0 110 200" />       <path d="M 160,200 A 50 50 0 1 1 210 250" />     </g>     <g style="font-size:8" >       <text x="10"  y="120">M 60,50  A 50 50 0 0 0 110 100</text>       <text x="150" y="120">M 160,50 A 50 50 0 0 1 210 100</text>       <text x="10"  y="280">M 60,150 A 50 50 0 1 0 110 200</text>       <text x="150" y="280">M 160,200 A 50 50 0 1 1 210 250</text>     </g>   </g> </svg>

Low level functionnalities : elementary shapes

Several elementary shapes ( particular paths ) have been defined to avoid long descriptions of a path; these are :
• rectangle
• circle
• ellipse
• line
• polyline

Low level functionnalities : rectangles

• <rect x="coord" y="coord" width="w" height="h" rx="rx" ry="ry" />
• x : x coordinate of the lowest side ( in x ) of the rectangle
• y : y coordinate of the lowest side ( in y ) of the rectangle
• width : width of the rectangle
• height : height of the rectangle
• rx : for round cornered rectangles

     x radius of the ellipse of the corner
• rx : for round cornered rectangles

     y radius of the ellipse of the corner

Low level functionnalities : circles

• <circle cx="coord" cy="coord" r="length" />
• cx : x coordinate of the center of the circle

     default : 0
• cy : y coordinate of the center of the circle

     default : 0
• r  : radius of the circle

Low level functionnalities : ellipses

• <ellipse cx="coord" cy="coord" rx="length" ry="length" />
• cx : x coordinate of the center of the ellipse

     default : 0
• cy : x coordinate of the center of the ellipse

     default : 0
• rx : radius of the ellipse along x
• ry : radius of the ellipse along y

Low level functionnalities : lines

• <line x1="coord" x2="coord" y1="coord" y2="coord" />
• x1 : x coordinate of the starting point
• y1 : y coordinate of the starting point
• x2 : x coordinate of the end point
• y2 : y coordinate of the end point

Low level functionnalities : polylines

• A polyline is a set of inter connected straight lines
• A polyline is defining an open shape
• <polyline points="points list" />
• points list is a list of coordinates x,y separated by commas
• These coordinates are expressed in the user space

Low level functionnalities :polygons

A polygon is a set of inter connected straight lines defining a closed shape
• <polygon points="points list" />
• points list is  a list of coordinates x,y separated by commas
• These coordinates are expressed in the user space

Low level functionnalities : Basic shapes examples

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="500" height="500" >   <g style="text-rendering:optimizeLegibility;shape-rendering:default">     <text x="5" y="20" style="font-size:22">SVG Demo: Basic SVG shapes</text>     <g style="stroke:black; fill:none; shape-rendering:default" >       <circle cx="70"  cy="100" r="50"  />       <rect x="150" y="50" width="135" height="100" />       <line x1="325" y1="150" x2="375" y2="50" />       <line x1="375" y1="50"  x2="425" y2="150" />       <polyline points="50,250,75,350,100,250,125,350,150,250,175,350" />       <polygon points="250,250,297,284,279,340,220,340,202,284,250,250" />       <ellipse cx="400" cy="300" rx="72" ry="50" />     </g>     <g style="text-rendering:optimizeSpeed">       <text x="50"  y="175">Circle</text>       <text x="175" y="175">Rectangle</text>       <text x="355" y="175">Lines</text>       <text x="50"  y="375">Polyline</text>       <text x="225" y="375">Polygon</text>       <text x="375" y="375">Ellipse</text>     </g>   </g> </svg>

Low level functionnalities : Basic shapes examples ( II )

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="680" height="500" >   <g style="text-rendering:optimizeLegibility">     <text x="5" y="20" style="font-size:22">SVG Demo: Some basic SVG filled and stroked regular polygons</text>     <g style="stroke:blue; fill:red; shape-rendering:default; stroke-width:10" >       <polygon points="99,50,143,125,56,124,99,50" />       <polygon points="225,50,275,99,225,150,175,100,224,50" />       <polygon points="350,50,397,84,379,140,320,140,302,84,350,50" />       <polygon points="475,50,518,74,518,125,475,150,431,124,431,75,475,50" />       <polygon points="99,175,138,193,148,235,122,269,79,270,51,237,59,195,97,175" />       <polygon points="225,175,260,189,275,225,260,260,225,275,189,260,175,225,189,189,224,175" />       <polygon points="350,175,382,186,399,216,393,250,367,271,332,271,306,250,300,216,317,186,350,175" />       <polygon points="475,175,504,184,522,209,522,240,504,265,475,275,445,265,427,240,427,209,445,184,475,175" />     </g>   </g> </svg>

Text

• Text follow the general recommendations of XML characters
• There is neither automatic line break nor hyphenation
• The tag  <text> is treated like a graphical object

As such, it is sensible to  :
• coordinates transformation
• rendering model
• clipping

Text : syntax

• <text x="coord" y="coord" />
• x is the x coordinate of the starting point of the text
• if it is not followed by a unit, its value is calculated inside the user space
• if it is followed by a CSS unit or by a percentage, its value is calculated by reference to the viewpoint
• y is the x coordinate of the starting point of the text
• if it is not followed by a unit, its value is calculated inside the user space
• if it is followed by a CSS unit or by a percentage, its value is calculated by reference to the viewpoint

Text : fitting elements

• Inside a <text> element, the position of the text, the content of the text or the font of the text can be adjusted by the <tspan> element :
• <tspan x="coord+" y="coord+" dx="coord+" dy="coord+" rotate="auto|number" />

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="10cm" height="3cm">   <desc>Example tspan01 - using tspan to change visual attributes</desc>   <g style="font-family:Verdana; font-size:12pt">     <text x="2cm" y="1.5cm" style="fill:blue">       You are         <tspan style="font-weight:bold; fill:red">not</tspan>       a banana.     </text>   </g> </svg>

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="10cm" height="3cm">   <desc>Example tspan02 - using tspan's dx and dy attributes          for incremental positioning adjustments</desc>   <g style="font-family:Verdana; font-size:12pt">     <text x="2cm" y="1.5cm" style="fill:blue">       But you         <tspan dx="2em" dy="-.5cm" style="font-weight:bold; fill:red">           are         </tspan>         <tspan dy="1cm">            a peach!         </tspan>     </text>   </g> </svg>

Text : fitting elements ( continued )

• Inside a <text> structure, one can :
• either directly specify the text
• or reference the text of another element with the tag <tref>

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="10cm" height="3cm">   <defs>     <text id="ReferencedText">       Referenced character data     </text>   </defs>   <desc>Example tspan04 - inline vs reference text content</desc>   <text x="1cm" y="1cm" style="font-size:12pt; fill:blue">     Inline character data   </text>   <text x="1cm" y="2cm" style="font-size:12pt; fill:red">     <tref xlink:href="#ReferencedText"/>   </text> </svg>

Text : specifications

• With the use of CSS, many attributes can be specified :
• Layout of the text : width of the characters, size of the characters
• Writing direction : from left to right , from right to left, from bottom to top, ...
• Text alignment
• Spacing, line breaking
• Decoration
• ......

Text : relationship with paths

• A text can be forced to follow a path predefined by a tag <path>
• <textPath starOffset="lengthpercentage" xlink:href="uri" />
• starOffset is the offset compared to the beginning of the text
a length is a distance measured along the path in the user space metric
a percentage is a percentage compared to the whole path in the user space metric

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"    "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 1000 300">   <defs>     <path id="MyPath"           d="M 100 200               C 200 100 300   0 400 100              C 500 200 600 300 700 200              C 800 100 900 100 900 100" />   </defs>   <desc>Example toap01 - simple text on a path</desc>   <use xlink:href="#MyPath" style="stroke:red" />   <text style="font-family:Verdana; font-size:42.3333; fill:blue">     <textPath xlink:href="#MyPath">       We go up, then we go down, then up again     </textPath>   </text> </svg>

Rendering

<path>,<text> elements and the basic shapes can be filled up and colored ( that is painted on the border . That is what is called the rendering operation
• With SVG, the rendering can be done with :
• a simple color
• a gradient ( linear or radial )
• a pattern ( vector or image )
• personalized patterns available by extension

Rendering : specifications

• Two properties  fill and stroke share the same following attributes :
• color
• URI of the color or the gradient
• Specific properties of  fill ( filling up )
• opacity
• Specific properties of stroke ( drawing )
• thickness
• Lines junction
• Corners rounding
• Dashes

Rendering : specifications ( examples )

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="500" height="500" >   <g style="stroke:black; stroke-width:6; text-rendering:optimizeLegibility; shape-rendering:default" >     <text x="5" y="20" style="font-size:22">SVG Demo: Stroke and fill opacity.</text>     <rect x="10"  y="100" width="400" height="100" style="fill:yellow"  />     <rect x="10"  y="225" width="400" height="100" style="fill:green"  />     <g style="stroke:blue;fill:cyan">       <rect x="25"  y="50"  width="50"  height="320" style="stroke-opacity:0.2;fill-opacity:0.2"  />       <rect x="100" y="50"  width="50"  height="320" style="stroke-opacity:0.4;fill-opacity:0.4"  />       <rect x="175" y="50"  width="50"  height="320" style="stroke-opacity:0.6;fill-opacity:0.6"  />       <rect x="250" y="50"  width="50"  height="320" style="stroke-opacity:0.8;fill-opacity:0.8"  />       <rect x="325" y="50"  width="50"  height="320"   />     </g>     <text x="40"  y="385">0.2</text>     <text x="115" y="385">0.4</text>     <text x="190" y="385">0.6</text>     <text x="265" y="385">0.8</text>     <text x="340" y="385">1.0</text>   </g> </svg>

Rendering : specifications ( examples ) ( II )

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="525" height="500" >   <g style="shape-rendering:default; stroke-width:14; stroke:#0000FF; fill:none" >     <path d="M50,50C50,200,200,50,200,200" style="stroke-linecap:butt; stroke-dasharray:10 5" />     <path d="M50,150C50,300,200,150,200,300" style="stroke-linecap:round; stroke-dasharray:10 20" />     <path d="M50,250C50,400,200,250,200,400" style="stroke-linecap:square; stroke-dasharray:10 20" />     <path d="M300,50Q400,400,500,50" style="stroke-linecap:butt; stroke-dasharray:20 10" />     <path d="M300,150Q400,500,500,150" style="stroke-linecap:round; stroke-dasharray:10 20" />     <path d="M300,250Q400,600,500,250" style="stroke-linecap:square; stroke-dasharray:10 20" />   </g> </svg>

Rendering : markers

Markers can be defined to be referenced later on by a path or a basic shape
• Syntax : <marker markerUnits="" markerWidth="length" markerHeight="length" orient="auto|angle"  />
• Properties :
• marker-start : the marker of the first node of the object
• marker-mid : the marker of intermediate nodes
• marker-end : the marker of the last node of the object
• Example :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="4in"
     viewBox="0 0 4000 4000" >
  <defs>
    <marker id="Triangle"
      viewBox="0 0 10 10" refX="0" refY="5"
      markerWidth="1.25" markerHeight="1.75"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
  <desc>Placing an arrowhead at the end of a path.
  </desc>
  <path d="M 1000 1000 L 2000 1000 L 3000 2000"
        style="fill:none; stroke:black; stroke-width:100;
        marker-end:url(#Triangle)" />
</svg>

Color

• Colors are specified inside the sRGB space
  
  
• Predefined colors as specified in CSS can also be used including the sixteen basic colors of CSS

An ICC profile can also be specified
 
• The color property is available for the fill and stroke properties seen before

Gradients and patterns

• With SVG, an object can be filled up or stroked by :
• a color
• a gradient ( of  colors )
• a pattern
• A color gradient a smooth transition between two colors according to a vector direction
• Color gradients can be  :
• linear
• radials

Gradients and patterns : linear gradient

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="500px" height="600px" >   <g style="text-rendering:optimizeLegibility;shape-rendering:default">     <defs>       <linearGradient id="grad1" x1="0" y1="0" x2="400" y2="400">         <stop offset="0%"   style="stop-color:#FF0000"/>         <stop offset="25%"  style="stop-color:#0000FF"/>         <stop offset="50%"  style="stop-color:#00FF00"/>         <stop offset="75%"  style="stop-color:#0000FF"/>         <stop offset="100%" style="stop-color:#FF0000"/>       </linearGradient>     </defs>     <text x="5" y="20" style="font-size:22">SVG Demo: Linear gradients</text>     <path style="fill:url(#grad1)" d="M0 50 h200 v200 h-200 z"/>     <circle  style="fill:url(#grad1)" cx="320" cy="150" r="100" />     <polygon style="fill:url(#grad1)" points="0,400,200,400,100,280" />     <ellipse style="fill:url(#grad1)" cx="300" cy="350" rx="100" ry="75"/>     <rect style="fill:url(#grad1)" x="0" y="450" width="400" height="100" />   </g> </svg>

Gradients and patterns : radial gradient

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > < <svg width="500px" height="500px" >   <g style="text-rendering:optimizeLegibility;shape-rendering:default">     <defs>       <radialGradient id="grad1" cx="250" cy="250" r="300" fx="250" fy="250">         <stop offset="0%"   style="stop-color:#FF0000"/>         <stop offset="25%"  style="stop-color:#0000FF"/>         <stop offset="50%"  style="stop-color:#00FF00"/>         <stop offset="75%"  style="stop-color:#0000FF"/>         <stop offset="100%" style="stop-color:#FF0000"/>       </radialGradient>     </defs>     <text x="5" y="20" style="font-size:22">SVG Demo: Radial gradient</text>     <rect style="fill:url(#grad1)" x="50" y="50" width="400" height="400" />   </g> </svg>

Gradients and patterns : patterns

A pattern is used to fill up or stroke an object with the use of a predefined graphical object that can be duplicated along fixed intervals in x and y to cover the area to paint

<?xml version="1.0"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="600px" height="500px" >   <defs>      <pattern id="mypattern" x="0" y="0" width="30" height="30">        <rect width="30" height="30" style="fill:yellow" />        <path style="fill:none;stroke:blue" d="M0,0 L 30,30 M0,30 L 30,0" />      </pattern>   </defs>   <g style="text-rendering:optimizeLegibility" >     <text x="5" y="20" style="font-size:22">SVG Demo: Filling and stroking with a custom pattern</text>   </g>   <g style="stroke:none; shape-rendering:default" >     <ellipse cx="150" cy="150" rx="100" ry="100" style="fill:url(#mypattern)" />     <rect x="300" y="50" width="150" height="150" style="fill:url(#mypattern)" />     <ellipse cx="250" cy="350" rx="200" ry="75" style="stroke:url(#mypattern);fill:none;stroke-width:20" />   </g> </svg>

Clipping and masking

• SVG has the following clipping and masking capabilities :
• Clipping paths use any combination of path, text or basic shapes to build a border for a 1 bit mask where everything inside the border is visible and everything outside the border is masked
• Masks are bags which contain graphical objects or other bags elements which define a set of graphics to build a semi-transparent mask to include foreign objects inside the background

Clipping and masking : clipping example

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "svg-19991203.dtd" > <svg width="500" height="500" >   <defs>     <clipPath>       <ellipse cx="200" cy="220" rx="80" ry="120" id="myClip"  />     </clipPath>   </defs>   <g style="text-rendering:optimizeLegibility;shape-rendering:default" >     <text  x="5" y="25" style="font-size:24">SVG Demo: An image clipped by an ellipse.</text>     <ellipse cx="200" cy="220" rx="90" ry="130" style="fill:#CE8A77" />     <image x="40" y="100" width="320" height="240" xlink:href="krl1.jpg" style="clip-path:URL(#myClip)"/>   </g> </svg>

Clipping and masking : mask example

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
  <desc>Example of using a mask
  </desc>
  <g>
    <defs>
      <mask id="MyMask">
        <image width="10" height="25" xlink:href="transp.png" />
      </mask>
    </defs>
    <rect style="mask: url(#MyMask)" width="12.5" height="30" />
  </g>
</svg>

Filtering effects

A filter takes an image as input, transforms it and gives an image as output
• Practically speaking, it is equivalent to modify the traditional graphics pipeline


by adding an intermediate step of page recomposition as
 
 


or
 

Filtering effects : example

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd"> <svg width="278px" height="118px">  <defs> <filter id="Shadow"> <feGaussianBlur in="SourceAlpha"   stdDeviation="3"   result="blurredAlpha" />  <feOffset in="blurredAlpha"    dx="2" dy="1"    result="offsetBlurredAlpha" />  <feDiffuseLighting in="blurredAlpha"    diffuseConstant=".5"     surfaceScale="5"     resultScale="5"     LightColor="white"     result="bumpMapDiffuse" >  <feDistantLight azimuth="135" elevation="60"/> </feDiffuseLighting> <feComposite in="bumpMapDiffuse" in2="SourceGraphic"   operator="arithmetic" k1="1"   result="litPaint" />  <feSpecularLighting in="blurredAlpha"    surfaceScale="5"    specularConstant=".5"    specularExponent="10"    lightColor="white"    result="bumpMapSpecular" >   <feDistantLight azimuth="135" elevation="60"/>  </feSpecularLighting>  <feComposite in="litPaint" in2="bumpMapSpecular"    operator="arithmetic" k2="1" k3="1"    result="litPaint" />   <feComposite in="litPaint"     in2="SourceAlpha"     operator="in"     result="litPaint" />  <feMerge>     <feMergeNode in="offsetBlurredAlpha" />      <feMergeNode in="litPaint" />   </feMerge>  </filter>  </defs>   <desc>Example filters02 - text with shadowing effect</desc>   <text style="font-size:36px; fill:red; filter:url(#Shadow)"   x="10px" y="70px">Shadowed Text</text> </svg>

Links

• Two types of links : intra or extra SVG documents
• Extra document links :
• Links outside the current document are taken into account by the tag <a>

analogous to the corresponding element of HTML or SMIL
• The <a> element use the syntax of XLink ( specification in progress )
• Example :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
  <desc>This valid svg document draws a triangle which is a hyperlink
  </desc>
  <a xlink:href="http://www.w3.org">
    <path d="M 0 0 L 200 0 L 100 200 z"/>
  </a>
</svg>

Links : internal links

• Needs to specify an SVG fragment
• Same as in HTML:

MyDrawing.svg#MyView
• XPointer compatible reference:

MyDrawing.svg#xptr(id('MyView'))
• SVG view specification :

MyDrawing.svg#svgView(viewBox(0,200,1000,1000))

Scripts

• The attribute contentScriptType of the element <svg> specifies the default script language for all the scripts of the document
• Without this attribute, the default script language can be given by the HTTP header :

Content-Script-Type
• Without both, the default script language is  ECMAScript ( Javascript )
• Example :

    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="4in" height="3in">
  <defs>
    <script><![CDATA[
      /* Beep on mouseclick */
      MouseClickHandler() { beep(); }
     ]]>
    </script>
  </defs>
  <circle onclick="MouseClickHandler()" r="85"/>
</svg>

Animations

• SVG graphics can be animated :
• either by the SVG animation elements
• or by the DOM interface
The SVG animation elements have been developed in collaboration with the SYMM working group which defines the SMIL language
• SVG supports four animation elements which are common with SMIL 2.0 ( not yet finalized )
• animate

allow the change in time of scalar attributes and of properties
• set

short cut to set animation values and non numerical attributes or properties
• animateMotion

moves an element along a path
• animateColor

modifies the color of attributes or properties along time

Animations : elements

• SVG includes four supplementary elements compatible with the SMIL animation :i
• animateTransform

modifies the attributes of transformation along time
• attribute path
• attribute keyPoints
• attribute rotate

Attributes of animateMotion : specify how the move must be done

Animations : example

  <!-- The following illustrates the use of the 'animate' element
to animate a rectangles x, y, and width attributes so that
the rectangle grows to ultimately fill the viewport. -->
  <rect id="RectElement" x="300" y="100" width="300" height="100"
   style="fill:rgb(255,255,0)" >
 <animate attributeName="x" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="300" to="0" />
 <animate attributeName="y" attributeType="XML"
      begin="0s" dur="9s" fill="freeze" from="100" to="0" />
  <animate attributeName="width" attributeType="XML"
   begin="0s" dur="9s" fill="freeze" from="300" to="800" />
  <animate attributeName="height" attributeType="XML"
  begin="0s" dur="9s" fill="freeze" from="100" to="300" />
  </rect>
<!-- Set up a new user coordinate system so that
the text string's origin is at (0,0), allowing
 rotation and scale relative to the new origin -->
  <g transform="translate(100,100)" >
    <!-- The following illustrates the use of the 'set', 'animateMotion',
'animateColor' and 'animateTransform' elements. The 'text' element
 below starts off hidden (i.e., invisible). At 3 seconds, it:
   * becomes visible
   * continuously moves diagonally across the viewport
   * changes color from blue to dark red
   * rotates from -30 to zero degrees
   * scales by a factor of three. -->
<text id="TextElement" x="0" y="0"
  style="font-family:Verdana; font-size:35.27; visibility:hidden" >
  It's alive!
 <set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 100 100"
 begin="3s" dur="6s" fill="freeze" />
 <animateColor attributeName="fill" attributeType="CSS"
 from="rgb(0,0,255)" to="rgb(128,0,0)"
 begin="3s" dur="6s" fill="freeze" />
 <animateTransform attributeName="transform" attributeType="XML"
 type="rotate" from="-30" to="0"

 begin="3s" dur="6s" fill="freeze" />

Animations : example ( continued )

Other functionnalities

Other  functionnalities are available in the SVG specification that will not be detailed here because they are more specific and less implemented
• Interactivity
Like in ECMAScript, SVG can take into account the user interactions such as :
• Change in cursor look
• Mouse events  :
• mouse on an element
• mouse clic
• ...
The creator of an SVg page can also decide to make some elements visible or not through the pointer-events property

Other functionnalities ( continued )

• Fonts
• A proprietary font can be defined in SVG :
• to re-use it
• to export it
• A font can be defined inside the SVG file or outside
• Examples
• Font in the SVG file :

<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px"
  xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>
  <defs>
    <font id="MyFont" font-face-name="Super Sans"
              units-per-em="1000" cap-height="600" x-height="400"
                  ascent="700" descent="300" horiz-adv-x="1000"
                  text-bottom="-300" baseline="0" centerline="350"
                  mathline="350" ideographic="400" hanging="500"
                  topline="700" text-top="700">
      <missing-glyph><path d="M0,0h200v200h-200z"/></glyph>
      <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph>
      <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph>
      <!-- more glyphs -->
    </font>
    <style>
      <![CDATA[
        @font-face {
          font-family: "MyFont";
          src: url("#MyFont") format(svg)
        }
      ]]>
    </style>
  </defs>
  <text style="font-family: MyFont, Helvetica, sans-serif">Text
    using embedded font</text>
</svg>

Other functionnalities ( continued )

• Font defined outside the SVG file

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%"
 xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>
  <defs>
    <font id="MyFont" font-face-name="Super Sans"
              units-per-em="1000" cap-height="600" x-height="400"
                  ascent="700" descent="300" horiz-adv-x="1000"
                  text-bottom="-300" baseline="0" centerline="350"
                  mathline="350" ideographic="400" hanging="500"
                  topline="700" text-top="700">
      <missing-glyph><path d="M0,0h200v200h-200z"/></glyph>
      <glyph unicode="33"><path d="M0,0L200,200L400,0z"/></glyph>
      <glyph unicode="34"><path d="M0,0L200,200L400,0z"/></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>
 

• used by
<?xml version="1.0" standalone="yes"?>
<svg width="400px" height="300px"
 xmlns = 'http://www.w3.org/Graphics/SVG/SVG-19991203.dtd'>  <defs>
    <style>
      <![CDATA[
        @font-face {
          font-family: "MyFont";
          src: url("myfont.svg#MyFont") format(svg)
        }
      ]]>
   </style>
  </defs>
  <text style="font-family: MyFont">Text using embedded font</text>
</svg>

Language definition and use

• Language has been standardized by the W3C in 2001
• Already many implementations
• softwares to read and parse SVG files( SVGView d'IBM , CSIRO SVG Viewer , .. )
• softwares which export SVG ( CorelDraw, ILOG Views, Narcisse , .. )
• convertors
• from Postscript
• from Flash
• from Windows Metafile
• Many citations in newspapers now

Conclusion

• SVG fills a gap of the Web
• Vector graphics
• Scalable
• Essential to the scientific community
• Precious for advertising and e-commerce
• Advantages
• Standard of the W3C
• XML compliant
• Drawback
• A little too big for complex graphics ( need to be compressed )