Logo

Le langage SVG
Didier Courtaud
25 Janvier 2000

Logo orateur


Plan

 

 

 

 

 

Le langage SVG

DESS Ingénierie Documentaire et Multimédia

Module M4A

 

 

Préambule

 

                                  


dans le répertoire samples de la version 0.3c du produit SVGView d'IBM et ceux
figurant dans la spécification du 3 décembre 1999 du W3C


de SVGView lors du chargement des exemples d'IBM pré-cités ou ceux
présentés dans la spécification du 3 décembre 1999 du W3C

 

 

Introduction


                  et pour pouvoir les zoomer )

a conduit le W3 Consortium a créer un Groupe de travail en 1998


Netscape, Xerox, Apple, Corel, HP,ILOG entre autres

 

 

Introduction : présentation générale

 

 

 

 

 

 

 

 

 

 

 

 

Introduction : Définitions et concepts


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
  "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">


( par ré-utilisation de fragments )

Introduction : Définitions et concepts ( II )


comme en HTML : #rrggbb ou un mot-clé dans la liste : aqua,black,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow

     ( x.yyye(ou E)±nn )

        entre - 3.4e+38 et 3.4e+38

Introduction : Définitions et concepts ( III )


même document SVG

Structure d'un document SVG

 

 

Structure d'un document SVG : Regroupement d'éléments


communs : couleur, style, ...


<rect x="100" y="100" width="200" height="200 />
<rect x="300" y="400" width="100" height="100 />
</g>
<g style="fill:blue" id="Petits rectangles bleus">
<rect x="10" y="10" width="20" height="20 />
<rect x="30" y="40" width="10" height="10 />
</g>


comme figurant dans leur propre groupe ( leurs attributs ne sont pas propagés )

Structure d'un document SVG : Référencement


...
<rect style="fill:url(#myGradient) />

Structure d'un document SVG : Référencement ( II )


<defs>
<linearGradient id="Gradient01"> .... </linearGradient >
</defs>
...
<rect style="fill:url(#Gradient01) ..../>


soient faites dans la même structure <defs>

Structure d'un document SVG : Référencement ( III )


<defs>
<symbol id="s1" >
......
</symbol>
</defs>
<g >
<use xlink:href="#s1" />
</g>

Structure d'un document SVG : Référencement ( IV )


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

Structure d'un document SVG : Les métadonnées


dans le bandeau par exemple


<g>
<title> Mon image
</title>
<desc> Cette image ne contient qu'un rectangle </desc>
<rect ..... />
</g>

 

 

Structure d'un document SVG : Le traitement conditionnel


SVGLang : toutes les fonctionnalités de la spécification
SVGStatic : un sous-ensemble
SVGDOMStatic : + les interfaces DOM de SVGStatic
SVGDOMDynamic , ....

Systèmes de coordonnées

<?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>

 

Systèmes de coordonnées : les transformations

<?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>

 

 

?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>

 

 

 

Systèmes de coordonnées : les transformations ( II )

?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>

?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>

Systèmes de coordonnées : les transformations ( III )


par une matrice carrée 3 x 3 de ce type

où  seules 6 valeurs a,b,c,d,e,f sont différentes de 0 ou 1. De ce fait, on peut aussi
employer une notation vectorielle du type [ a b c d e f ] .


 

 

 

 

Systèmes de coordonnées : les transformations ( IV)


tx et ty sont les distances de translation des coordonnées x et y


sx et sy sont les facteurs d'échelle en x et y


a est l'angle de rotation



a est l'angle d'inclinaison en y

Systèmes de coordonnées : les transformations ( V )


par simple multiplication matricielle de type :


ainsi qu'à l'ensemble de ces ancêtres ( en général le précédent élément <svg> ) est
appelée la matrice de tranformation courante ( en anglais CTM Current Transform Matrix )


courantes et les coordonnées de fenêtrage ( viewport coordinates )

 

 

 

Systèmes de coordonnées : les attributs de transformation


de coordonnées utilisateur courantes


dans les unités précisées pour les angles

Systèmes de coordonnées : les attributs de point de vue


un espace donné, on peut établir un nouveau point de vue


viewBox

 

<?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>

Systèmes de coordonnées : les attributs de point de mise à l'échelle


preserveAspectRatio = align [ meet ou slice ]


x et en y touchent les bords du rectangle de point de vue


                                                         min des y = y min du point de vue


                                                         min des y = y min du point de vue


 

 

 

 

Systèmes de coordonnées : nouveaux point de vue


instances des éléments ou des images référencés


temporaire pour tracer le symbole

Fonctionnalités de bas niveau


<path d="path data" nominalLenght="number" />

 

 

 

Fonctionnalités de bas niveau : les fonctions élémentaires


des chemins

Fonctionnalités de bas niveau : les fonctions élémentaires ( II )

Commandes de base


et le dernier moveto

 

 

Fonctionnalités de bas niveau : les fonctions élémentaires ( III )

Fonctionnalités de bas niveau : exemples

?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>

 

 

Fonctionnalités de bas niveau : exemples (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>
 

Fonctionnalités de bas niveau : formes élémentaires

qui permettent de s'affranchir de la description complète d'un chemin

Fonctionnalités de bas niveau : les rectangles


     rayon en x de l'ellipse assurant le raccord


     rayon en y de l'ellipse assurant le raccord

Fonctionnalités de bas niveau : les cercles


     0 par défaut


     0 par défaut

Fonctionnalités de bas niveau : les ellipses

     0 par défaut

     0 par défaut

Fonctionnalités de bas niveau : les lignes

Fonctionnalités de bas niveau : les polylignes

Fonctionnalités de bas niveau : les polygones


définissant une forme fermée

 

 

 

 

 

 

Fonctionnalités de bas niveau : Exemples de formes de base

<?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>
 

 

 

 

 

 

 

Fonctionnalités de bas niveau : Exemples de formes de base ( 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>

 

 

 

 

Le texte


En tant que telle, elle subit l'influence :

Le texte : syntaxe

Le texte : éléments d'ajustement


texte ou la police du texte grace à l'élément <tspan>

<?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>

Le texte : éléments d'ajustement ( II )

<?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>

Le texte : spécifications

Le texte : lien avec les chemins


selon la métrique de l'espace utilisateur


selon la métrique de l'espace utilisateur

<?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>

Le rendu


( c'est à dire peints sur les bords ). On appelera cette opération le rendu

Le rendu : spécifications

 

 

 

 

Le rendu : spécifications ( exemples )

<?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>
 

Le rendu : spécifications ( exemples ) ( 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>

 

 

 

Le rendu : les marqueurs


par un chemin ou une forme de base


<?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>

La couleur


y compris les seize couleurs de base de CSS


conforme aux profils ICC

Gradients et motifs


un vecteur

Gradients et motifs : gradient linéaire

<?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 et motifs : gradient radial

<?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 et motifs : les motifs


un objet graphique pré-défini qui peut être dupliqué à intervalles fixes en x et en y pour couvrir l'aire à peindre

 

 

 

<?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>
 

 

Découpe et masquage


de chemin, de texte ou de formes de base pour servir de frontière à un masque à 1 bit où tout ce qui est à l'intérieur de la frontière est visible et ce qui est à l'extérieur est masqué


graphiques pour former un masque semi-transparent pour inclure des objets étrangers dans le fond d'écran

 

 

 

 

Découpe et masquage : exemple de découpe

<?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>
 

 

 

 

Découpe et masquage : exemple de masquage

<?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>

 

Effets de filtre


image en sortie



en lui rajoutant une étape intermédiaire de composition de page
soit
 


soit
 

 

 

 

Effets de filtre : exemple

<?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>

Les Liens


analogue à l'élément correspondant de HTML ou SMIL


<?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>

Les Liens : liens internes


MyDrawing.svg#MyView


MyDrawing.svg#xptr(id('MyView'))


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

 

Les scripts


Content-Script-Type


    <?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>

Les animations


le groupe de travail SYMM qui élabore SMIL


permet aux attributs scalaires et aux propriétés de changer avec le temps


raccourci pour assigner des valeurs d'animation et des attributs et propriétés
non numériques


déplace un élément le long d'un chemin


modifie la couleur d'attributs ou de propriétés au cours du temps

Les animations : éléments


modifie les attributs des transformations au cours du temps


Attributs de animateMotion : précisent comment doit se faire le déplacement

Les animations : exemple

<?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="8cm" height="3cm"  viewBox="0 0 800 300">
  <desc>Example anim01 - demonstrate animation elements</desc>

  <!-- 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" />

<animateTransform attributeName="transform" attributeType="XML"
 type="scale" from="1" to="3"
 begin="3s" dur="6s" fill="freeze" />
    </text>
  </g>
</svg>

Les animations : exemple ( suite )

 

Autres fonctionnalités


car étant d'un emploi plus spécifique et encore peu implémentées

telles que :


via la propriété pointer-events

Autres fonctionnalités ( suite )


<?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>

Autres fonctionnalités ( suite )

<?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>

<?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>

 

 

 

 

 

Etat de l'art du langage

Conclusion

 

 

 

 

 

http://www.euroclid.fr/Cours_SVG/all.htm