Le Full vectoriel

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" strokewidth="5px" x="100px" y="100px"width="100px" height="100px"> </rect>

Animer la forme

<rect fill="#AFBCC7" stroke="#646464" strokewidth="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" strokewidth="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%" stopcolor="red"/> <stop offset="50%" stopcolor="green" stopopacity="1"/> <stop offset="90%" stopcolor="blue" stopopacity="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; strokewidth: 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 stopcolor="white" offset="0" stopopacity="0.5"/> <stop stopcolor="aqua" offset="20%" stopopacity="0.5"/> <stop stopcolor="blue" offset="80%" stopopacity="0.5"/> <stop stopcolor="blue" offset="100%" stopopacity="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● Mutlidevices / Multiappareils

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

Le Full vectoriel

Internet