Les 11: SVG.

Presentatie over: "Les 11: SVG."— Transcript van de presentatie:

1 Les 11: SVG

2 Inhoud Algemeen SVG vormen Filters Gradients

3 Algemeen: wat Scalable Vector Graphics
nieuw grafisch bestandsformaat voor 2D graphics + webtaal gebaseerd op XML staat toe om vanuit real-time gegevens dynamisch hoge-kwaliteitsbeelden (vectorieel) te genereren gegevensgestuurd interactief gepersonaliseerd

4 Algemeen: structuur Als een standalone document:
Maak een nieuw bestand aan in notepad Sla het bestand op als een SVG – bestand Het SVG – bestand kan geopend worden in een browser Er moet een viewer geïnstalleerd zijn Standalone SVG – bestanden worden meestal niet herkend door zoekmachines

5 Algemeen: structuur Ingevoegd in een xHTML document
<object data="test.svg" width="500px" height="500px" type="image/svg+xml"> Er moet ook een viewer geïnstalleerd worden De xHMTL pagina wordt wel herkend door zoekmachines Er kunnen ook andere objecten zoals muziek, flash,… ingevoegd worden

6 Opmerking Firefox Om svg bestanden uit te voeren in firefox:
Kopieer NPSVG6.dll en NPSVG6.zip uit de map C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins Plak ze in de map plugins van firefox

7 Algemeen: voorbeeld

8 Algemeen: voorbeeld Bevat de processing instructie
Verwijst naar een externe DTD ( wat is toegelaten en wat niet) Het document begint met de tag <svg>. Deze tag heeft verschillende attributen Het element <circle> geeft aan dat er een cirkel moet getekend worden. De attributen bepalen hoe die cirkel er uit moet zien Het document wordt afgesloten met de tag </svg>

9 Verschillende vormen: overzicht
Door het gebruik van tags kunnen verschillende vormen getekend worden: Rechthoek <rect> Cirkel <circle> Ellips <ellipse> Lijn <line> ( Polygon <polygon>) ( Polyline <polyline>) ( Path <path>)

10 Verschillende vormen: rechthoek
<rect width="300px" height="100px" style="fill:rgb(0,0,255);stroke-width:1px; stroke:rgb(0,0,0)"/>

11 Verschillende vormen: rechthoek
Uitleg code <rect> er moet een rechthoek getekend worden width="300px” height="100px" bepalen de afmetingen van de rechthoek style=“ “ vanaf hier worden de opmaak properties meegegeven fill:rgb(0,0,255) bepaalt de kleur van de rechthoek

12 Verschillende vormen: rechthoek
Kleuren kunnen op 3 manieren worden weergegeven: Rgb(255,0,0) #FF0000 Red Stroke-width: bepaalt de dikte van de rand Stroke: bepaalt de kleur van de rand

13 Verschillende vormen: rechthoek
Andere attributen X en Y: bepalen de positie van de rechthoek op het scherm Fill-opacity: bepaalt de opacity voor de rechthoek zelf Stroke-opacity: bepaalt de opacity voor de rand Opacity: bepaalt de transparantie voor het volledige object. Bevat altijd een waarde tussen 0 en 1

14 A-Oefening 1

15 A-Oefening 1 Maak een rechthoek van 300px op 200px
De positie is 200px van de top en 200px van de linkermarge De rechthoek heeft een rode kleur en een zwarte rand van 2px De opacity bedraagt 0,7

16 A-Oefening 1

17 A-Oefening 1 Maak een tweede rechthoek van 50px op 70px
Plaats deze in de rode rechthoek Geef hem een gele kleur en een dikke zwarte rand

18 Verschillende vormen: cirkel
<circle cx="100px" cy="50px" r="40px" stroke="black" stroke-width="2px" fill="red"/>

19 Verschillende vormen: cirkel
Uitleg code <circle> Er moet een cirkel getekend worden cx="100px" cy="50px“ Bepalen de positie van het middelpunt van de cirkel op het scherm r=“40px” Bepaalt de radius van de cirkel Stroke, stroke-width en fill Bepalen de opmaak van de cirkel. Ze kunnen op verschillende manieren worden ingegeven. Vergelijk met de opmaak van de rechthoek

20 Verschillende vormen: cirkel
<rect width="300px" height="100px" style="fill:rgb(0,0,255);stroke-width:1px; stroke:rgb(0,0,0)"/> <circle cx="100px" cy="50px" r="40px" stroke="black" stroke-width="2px" fill="red"/>

21 A-Oefening 2

22 A-Oefening 2 Teken een zwarte cirkel met een radius van 5px
Positioneer de cirkel tegen de rechterzijde van de gele rechthoek

23 Verschillende vormen: ellips
<ellipse cx="300px" cy="150px" rx="200px" ry="80px" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2px"/>

24 Verschillende vormen: ellips
Uitleg code <ellipse> Er moet een ellips getekend worden Een ellips is in feite een cirkel met 2 verschillende radiussen rx en ry Alle andere eigenschappen zijn identiek aan de cirkel

25 A-Oefening 3

26 A-Oefening 3 Voeg 2 ellipsen toe
Positioneer deze ellipsen langs de linkerzijde en de rechterzijde van de gele rechthoek Geef ze een witte achtergrondkleur met een zwarte rand van 2px dik

27 Verschillende vormen: lijn
<line x1="0px" y1="0px" x2="300px" y2="300px" style="stroke:rgb(99,99,99);stroke-width:2px"/>

28 Verschillende vormen: lijn
Uitleg code <line> Er moet een lijn getekend worden Het punt x1 / y1 bepaalt het vertrekpunt van de lijn Het punt x2 / y2 bepaalt het eindpunt van de lijn Stroke bepaalt de kleur van de lijn Stroke-width bepaalt de dikte van de lijn

29 A-Oefening 4

30 A-Oefening 4 Teken 2 zwarte lijnen met een dikte van 2px
Deze lijnen vertrekken van een hoekpunt van de rode rechthoek en lopen naar elkaar toe

31 Filters ( algemeen ) Net zoals in Photoshop kunnen er filters toegekend worden op figuren Er bestaat een volledig gamma aan filters Er kunnen meerdere filters gebruikt worden op 1 element

32 Filters ( voorbeeld ) <defs> <filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs>

33 Filters ( voorbeeld ) Filters worden gedefinieerd binnen <defs> tags ( definitions ) Daarna kom de tag <filter> met als attribuut een uniek id Daarbinnen een element met de naam van de filter <feGaussianBlur > Attribuut: in="SourceGraphic" bepaalt dat het effect voor de volledige tekening telt Attribuut: stdDeviation="3" bepaalt de hoeveelheid blur

34 Filters ( voorbeeld ) Toepassen op een object
<ellipse cx="200px" cy="150px" rx="70px" ry="40px" style="fill:#ff0000;stroke:#000000; stroke-width:2px;filter:url(#Gaussian_Blur)"/>

35 A-Oefening 5

36 A-Oefening 5 Pas een blur filter toe op de 2 ellipsen
Zorg voor een afwijking van 5

37 Gradients ( Algemeen ) Is een zachte overgang van het ene kleur naar het andere Gradients worden gedefinieerd binnen de <defs> tags Er kunnen verschillende gradients op 1 element toegepast worden Er bestaan 2 soorten gradients Linear radial

38 Linear gradients ( voorbeeld )
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient>

39 Linear gradients ( voorbeeld )
Ook binnen de <defs> tags <linearGradient> Geeft aan om welk type gradient het gaat Id=“” geeft een unieke naam aan de gradient X1,y1 / x2,y2: stelt in waar de overgang begint en waar hij eindigt Y1=y2 horizontaal X1 =x2 verticaal

40 Linear gradients ( voorbeeld )
Een tag <stop> om telkens een nieuw kleur aan te geven Offset=“” geeft aan waar een kleur begint en stopt style="stop-color:rgb(255,0,0) bepaalt de kleur stop-opacity bepaalt de opacity voor dit kleur

41 Linear gradients ( voorbeeld )
Toepassen op objecten <ellipse cx="230px" cy="200px" rx="110px" ry="100px“ style="fill:url(#orange_red)"/>

42 A – Oefening 6 Kopieer de code uit het voorbeeld en experimenteer met verschillende gradients

43 Radial gradients ( voorbeeld )
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/> </radialGradient>

44 Radial gradients ( voorbeeld )
Veel overeenkomsten met linear gradients Verschillen: Cx,cy en r bepalen de buitenste cirkel Fx en fy bepalen de binnenste cirkel

45 A – Oefening 7 Kopieer de code uit het voorbeeld en experimenteer met verschillende gradients

46 Herhalingsoefening Maak volgende figuur na

47 Einde les 11