Présentation effectuée par Christophe Villeneuve (Hello / Sector One) à la Very Important Party (VIP) 2015 organisé par Popsy Team

1.
Le FULL Vectoriel

2. 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

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

4. ● Bitmap
Bitmap VS Vectoriel
● Vectoriel
= Pas de perte= pixelisé

5. Afficher une image
<img src='atari.png'>
<img src='atari.png' width='100'>

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

8. Image
1

9. 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>

10. 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>

11. Résultat

12. Texte

13. 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>

14. Carré
2

15. Définir
● Positionnement

16. Définir la forme
<rect
fill="#AFBCC7"
stroke="#646464"
stroke­width="5px"
x="100px" y="100px"
width="100px" height="100px">
</rect>

17. 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>

18. 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>

19. Résultat… en live
3

20. Effet Gradient
5

21. 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>

22. 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;"
/>

23. 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>

24. Résultat
● Après quelques modifications
– Dimensions
– Point de départ
6

25. Effet Curve
Courbe de bézier
7

26. Qu'est ce...
● Modifier la rotation d'un trait
<path
d="M50,50 Q50,100 100,100"
style="stroke: #006666; fill:none;"
/>

27. 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>

28. Définir
● Les formes
f(t)=sin(at)+cos(bt+phi)

29. 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();
}

30. Résultat… en live
7

31. Effet de gouttes
8

32. 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>

33. 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>

34. Animation
● En code
function 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)
}

35. WebApps

36. 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

37. Merci
● Code source inspiré du web
Questions
@hellosct1
@neuro_paris
livre Drupal avancé ­ Editions Eyrolles ­ Christophe Villeneuve ­ Vanessa Kovalsky David