Le Full vectoriel
-
Upload
christophe-villeneuve -
Category
Internet
-
view
1.442 -
download
0
Transcript of 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