Le FULL Vectoriel

Qui... est Christophe Villeneuve ?

<<

afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – Lire à toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros ­ elephpant

Sommaire

● Bitmap● Vectoriel avec SVG● Démo● Le code de la démo

● Bitmap

Bitmap VS Vectoriel

● Vectoriel

= Pas de perte= pixelisé

Afficher une image 

<img src='atari.png'>

<img src='atari.png' width='100'>

SVG

● Signifie Scalable Vector Graphics● Format vectoriel en XML● Supporte 

– Image statique– Animation et l'interactivité avec 

Synchronized Multimedia Integration Language (SMIL)– Couleur RGB avec une option Alpha en plus

● Mémorise le 'graph' objet en mémoire dans le DOM● Couplage à CSS

Image

1

Définir

● code

<svg      width="200px" height="200px"      viewBox="0 0 200 200"     version="1.1"         xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">      <img src='atari.svg'>

</svg> 

Code SVG<svg   xmlns:svg="http://www.w3.org/2000/svg"   xmlns="http://www.w3.org/2000/svg"   Version="1.1"    width="120"   height="143"   id="svg2">

  <rect     width="5.9977822"  height="37.701492"     x="111.20078"     y="102.76726"     id="rect3"     style="fill:#000000" />  <path     d="m 16.5,101.8125 c ­1.889001,0 ­3.50086,1.17072 ­4.125,2.84375 l 0,0.0312 ­10.6875,35.78125 6.40625,0 2.46875,­9.71875 11.90625,0 2.59375,9.71875 6.5625,0 ­10.96875,­35.8125 ­0.03125,0 C 19.994483,102.9913 18.390703,101.8125 16.5,101.8125 z m ­0.0625,8.21875 4.125,15.6875 ­8.15625,0 4.03125,­15.6875 z"     id="path5"     style="fill:#000000" />

…</svg>

Résultat

Texte

Les bases du SVG

<svg xmlns="http://www.w3.org/2000/svg"

    xmlns:xlink="http://www.w3.org/1999/xlink">

    <text x="5" y="190"

          transform="translate(40) rotate(­45 10 50)"

    >Very Important Party</text>

</svg>

Texte

Habillage

    <rect x="40" y="5" height="110" width="110"

          style="stroke:#ff0000; fill: #CFCFCF;"

          transform="translate(30) rotate(28 50 35)">

    </rect>

Carré

2

Définir

● Positionnement

Définir la forme

    <rect fill="#AFBCC7" stroke="#646464" stroke­width="5px" x="100px" y="100px"width="100px" height="100px">        </rect>

Animer la forme

    <rect fill="#AFBCC7" stroke="#646464" stroke­width="5px" x="100px" y="100px"     width="100px" height="100px">

    <animateTransform        attributeType="XML"        attributeName="transform"        type="rotate"        from="0,150,150" to="360,150,150"        begin="0s" dur="5s"        repeatCount="indefinite"/>    </rect>

Script complet

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" Width="320" height="320">

    <rect fill="#AFBCC7" stroke="#646464" stroke­width="5px" x="100px" y="100px"  width="100px" height="100px">    <animateTransform        attributeType="XML"        attributeName="transform"        type="rotate"        from="0,150,150" to="360,150,150"        begin="0s" dur="5s"        repeatCount="indefinite"/>    </rect></svg>

Résultat… en live3

Effet Gradient

5

Définir

● Courbe

<svg xmlns="http://www.w3.org/2000/svg">

<radialGradient id= "Grad" cx="80%" r="20%" spreadMethod="reflect">    <stop offset="5%" stop­color="red"/>    <stop offset="50%" stop­color="green" stop­opacity="1"/>    <stop offset="90%" stop­color="blue" stop­opacity="0.5"/></radialGradient>

<rect x="0" y="0" width="200" height="200"  style="fill:url(#Grad);" /> 

</svg>

Définir

● Bordure

<rect x="30" y="10" 

width="200" height="200" rx="10" ry="10" 

style="fill:url(#effet); stroke: #CCCCCC; stroke­width: 3;" 

/> 

Définir

● Animation en Javascript<svg xmlns="http://www.w3.org/2000/svg" onload = "startup()" >…</svg>

<script>function startup(){            radialGrad = document.getElementById("effet");

  for (i=0; i<ngradient;i++) {    stops[i]=document.getElementById("stops"+i);  }

 timer = setInterval("vary()",100);}</script>

Résultat

● Après quelques modifications– Dimensions– Point de départ

6

Effet CurveCourbe de bézier

7

Qu'est ce...

● Modifier la rotation d'un trait

<path d="M50,50 Q50,100 100,100"style="stroke: #006666; fill:none;"/>

Réalisation

● En code

<svg xmlns:svg="http://www.w3.org/2000/svg" Version="1.1" width="400" height="450" onload = "startup()">

<script><g> <path id="curve" stroke-width="3" stroke="red" fill="none" /> </g></svg>

Définir

● Les formes

    f(t)=sin(at)+cos(bt+phi)

Définir

● Boucle

function Animate(){  def(alpha, beta, phi);  phi += dphi;    phi %= 2.0*Math.PI;  if(phi > 2.0*Math.PI ­ dphi &&                                    phi < 2.0*Math.PI + dphi) {      if(alpha==11) {      if(beta==11) {alpha=1; beta=2;  }      else {       alpha=1; beta++      }    }    Else { alpha++;    }    modifyColor();  }  modifyEquation(); }

Résultat… en live7

Effet de gouttes

8

Réalisation

● En code

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" onload="startUp()" onresize="resize()">...</svg>

Définir la goutte

<defs> <radialGradient id="rg" cx="20%" cy="20%" r="100%" fx="30%" fy="30%" >   <stop stop­color="white" offset="0" stop­opacity="0.5"/>   <stop stop­color="aqua" offset="20%" stop­opacity="0.5"/>   <stop stop­color="blue" offset="80%" stop­opacity="0.5"/>   <stop stop­color="blue" offset="100%" stop­opacity="0.5"/> </radialGradient></defs>

<rect height="100%" width="100%" fill="black"/>

<g id="GroupOfBubbles"> <circle id="Bubble" cx="­150" cy="­150" r="50" fill="url(#rg)" /></g>

Animation

● En codefunction startUp() { resize(); var mybubble = document.getElementById("Bubble")

xm = nx/2; ym = ny/2;

for(i=0;i<NB;i++) { object[i] = new makeSphere(i); }

setInterval("for (i in object)object[i].moveSphere()",16)}

WebApps

WebApps

● Pas de pertes de qualités● C'est un format léger et souple● Mutli­devices / Multi­appareils

https://developer.mozilla.org/fr/docs/Web/SVG

Merci● Code source inspiré du web

Questions

@hellosct1

@neuro_paris

livre Drupal avancé ­ Editions Eyrolles ­ Christophe Villeneuve ­ Vanessa Kovalsky David