Les 11: SVG

Inhoud Algemeen SVG vormen Filters Gradients

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

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

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 http://www.adobe.com/SVG/viewer/install/main.html De xHMTL pagina wordt wel herkend door zoekmachines Er kunnen ook andere objecten zoals muziek, flash,… ingevoegd worden

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

Algemeen: voorbeeld

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>

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

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

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

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

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

A-Oefening 1

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

A-Oefening 1

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

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

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

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"/>

A-Oefening 2

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

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"/>

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

A-Oefening 3

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

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

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

A-Oefening 4

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

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 http://www.w3schools.com/svg/svg_filters_intro.asp

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

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

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)"/>

A-Oefening 5

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

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

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>

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

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

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

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

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>

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

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

Herhalingsoefening Maak volgende figuur na

Einde les 11