8. Système de coordonnées, transformations et unités

A. Le canevas SVG

• Le canevas SVG est un espace infini ou s’affiche le contenu SVG

B. Le viewport SVG

• Le "viewport" SVG est le rectangle visible pour l’utilisateur
• Le viewport possède un système de coordonnés qui commence en haut à gauche du rectangle ( viewport coordinate system , aussi appelé viewport space )
• On peut définir un viewport dans un viewport (par exemple avec l’élément <svg>)
• Le dessins se reférent par rapport à un système de coordonnées d’utilisateur ( user coordinate system ou user space ) qui au départ est identique au viewpoint coordinate system
• Certains clients permettent à l’utilisateur de bouger et "zoom" le "user space" (Alt-drag pour bouger dans le plugin Adobe)
• Tout dessin qui dépasse est tronqué (clipped)

C. Longeurs

• Les longeurs sont indiqués soit par un nombre, soit par les unités absolues ou relatives habituelles:
• em, ex (largeur d’un "m" et hauteur d’un "x" de la fonte courante)
• px (pixels, unités définies par le device)
• pt, pc (points, et ??). Normalement le client indique à combien de pixels correspond pt ou pc, pareils pour les cm, mm et in.
• cm, mm, in
• pourcentages (par rapport au viewport)
• La signifcation de nombres sans unités s’établit par rapport au unités utilisés pour définir le viewport (pixels par défaut)
• Note: On le choix d’ignorer les subtilités du système des longeurs, mais suivant la tâche il faut les maîtriser et relire la spécification.

A. Eléments qui créent un nouveau viewport

• <svg>, <symbol> (instantié par <use>), <image>
• et <foreignObject> (par ex une image X3D dans l’avenir)

B. L’attribut viewBox

(explications à revoir un jour, c’est pas clair du tout .... désolé)

• Tous les éléments qui créent un nouveau viewport + <marker>, <pattern> et <view> permettent d’adapter les dimensions d’un graphisme à celles d’un conténeur

viewBox = "<min-x> <min-y> <width> <height>"

Attention: Ne pas utiliser autre chose que des simples nombres ! donc 1500 et pas 15mm ou 150px !!

Exemples:

<svg width="300px" height="200px" viewBox="0 0 1500 1000">

<svg width="300px" height="200px" viewBox="0,0,1500,1000">

• viewBox permet de greffer un système de coordonnés sur les dimensions réelles d’un viewport.
• C’est très utile lorsqu’on a par exemple des dessins en mètres et qui doivent quand-même s’afficher à l’écran.
• On peut aussi créer des distorsions (lorsque largeur et hauteur du viewBox n’ont pas les mêmes proportions que ceux du viewPort).

Exemple 8-1: Redimensions d’un dessin de bureau avec ViewPort

• http://tecfa.unige.ch/guides/svg/ex/svg-intro/viewports/viewports1.svg

<svg width="6cm" height="4.5cm"
 viewBox="0 0 400 300"
 >

 <rect x="0" y="0" width="400" height="300"         fill="yellow" stroke="blue" stroke-width="4"  />

....

 <g>

  <title>le gros bureau qui pose problème</title>

  <rect x="182" y="50" width="80" height="180" fill="blue" />

  <text x="185" y="200" font-size="20">180x80 cm </text>

 </g>

 <rect x="264" y="0" width="120" height="80"       fill="blue" />

</svg>

C. L’attribut preserveAspectRatio

• Cet attibut est disponible lorsque lorsqu’un noveau viewPort est crée et permet d’indiquer comment il faut préserver les ratios (x,y) dans le dessin.

preserveAspectRatio="<align> [<meetOrSlice>]"

Le paramètre "align"

Il existe pleins de différentes sortes de align. Ce paramètre indique ce qui doit se passer lorsque les rapports entre longeur et hauteur du viewBox ne correspondent pas au viewBox, autrement dit: comme "tirer" le graphisme.

• none - Tire le graphisme aux 2 bords
• xMinYMin - alignement sur x-min et y-min (coin du haut à gauche)
• xMinYMid - alignement sur x-min et centrage-y
• xMinYMax -alignement sur x-min et y-max (coin en bas à gauche)
• ... ainsi que les autres 6 combinaisons entre x* et Y*.

Le paramètre "meetOrSlice"

• meet (défaut) - garder la "aspect ratio", toute la viewBox est visible et elle est adaptée au dessin, le graphise sera toujours visible mais n’utilise peut-être pas tout le viewPort.
• slice - garder la "aspect ratio", la viewBox utilise tout le viewPort et risque de dépasser dans un sens (selon "align"), autrement dit il y aura des graphismes coupés.

Attention: respectez minuscules ou majuscules !!

Exemple 8-2: Adaptations d’un bureau à des ViewPort

• http://tecfa.unige.ch/guides/svg/ex/svg-intro/viewports/viewports2.svg

....

<symbol id="bureau">

.....

</symbol>

<svg x="0.5cm" y="0.5cm" width="4cm" height="3cm"      viewBox="0 0 400 300"
>

  <use xlink:href="#bureau" /> </svg>

 <svg x="6cm" y="0.5cm" width="3cm" height="3cm" viewBox="0 0 400 300"
     preserveAspectRatio="none"
  >

  <use xlink:href="#bureau" />

</svg>

 <svg x="0.5cm" y="4cm" width="3cm" height="3cm" viewBox="0 0 400 300"     preserveAspectRatio="xMinYMin meet
"  >.... </svg>

 <svg x="6cm" y="4cm" width="3cm" height="3cm" viewBox="0 0 400 300"     preserveAspectRatio="xMinYMax slice" 
>

.... </svg>

(voir slide suivant pour un image)

• Cet exemple montre quelques variations de "preserveAspectRatio par rapport à des viewBox qui ne possèdent pas les mêmes ratios que les viewPorts
• Dans la spécification on trouve plus de détails et d’exemples !
• Faites attention à correctement écrire les paramètres, votre client risque de ne pas se plaindre pour ce genre d’erreurs !

A. Translations avec le paramètre "translate"

• On a déjà vu qu’il est possible de définir un nouveau système de coordonnées avec des nouveaux viewPorts et viewBox
• L’attribut "transform" disponible pour tous les éléments conteneurs ou graphiques (voir Eléments graphiques de base et Structuration: éléments de groupage et références) le permet aussi.

translate(<tx> [<ty>])

Exemple:

<g transform="translate(50,50)">

B. Redimensionnement (scaling) avec le paramètre "scale"

scale (<sx> [<sy>])

lorsque sy n’est pas indiqué on assume que sy=sx

Exemples:

<g transform="scale(2)"> <rect .... /> <g>

<g transform="scale(2,3)"> <rect .... /> <g>

C. Rotations avec le paramètre "rotate"

rotate(<rotate-angle> [<cx> <cy>])

• L’angle de rotation en degrées
• cx et cy définissent le point de rotation (par défaut il s’agit de l’orgine du système de coordonnées locale, PAS le centre de l’objet !)

D. Ordre des opérations

• l’ordre des opérations est séquentielle ! A chaque transformation on obtient un nouveau système de coordonnées !
• Les 2 fragments suivants font la même chose:

<g transform="translate(-10,-20) scale(2) rotate(45   translate(5,10)">

  <!-- graphics elements go here -->

</g>

<g transform="translate(-10,-20)">

  <g transform="scale(2)">

    <g transform="rotate(45)">

      <g transform="translate(5,10)">

        <!-- graphics elements go here -->

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

Exemple 8-3: Simples transformations

• http://tecfa.unige.ch/guides/svg/ex/svg-intro/transforms/transforms1.svg

<g transform="translate(10,40)">

 <g id="dessin"
 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" font-size="20" font-family="Verdana" fill="blue" >      ABC (original) </text>

</g>

<g transform="translate(200,40)"
> <g transform="scale(1.5)"
> <use xlink:href="#dessin
" /> <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue">    ABC (tr.,scale)</text></g> </g>

....

<g transform="rotate(30)
"> ... </g>

...

<g transform="translate(200,160),scale(1.5),rotate(30)"> ...</g>

...

<g transform="translate(370,80),scale(0.5),rotate(30),skewY(30)">

....

<g transform="translate(450,20),scale(0.5,1),rotate(30),skewY(30)">

• Il n’est pas toujours facile de s’imager ce que donne une série de transformations (remember VRML ? )
• Les matrix transform permettent des opérations encore plus générales (et plus difficiles à comprendre, voir la spéc.).