Laboration SVG
Laborationspoäng:3

Översikt

SVG är ett XML-baserat språk med vilket man kan göra skalbar vektrografik. Språket innehåller även konstruktioner för att kunna manipulera grafiken m.h.a. DOM, och för att kunna göra animationer.

I denna laboration ska du göra en SVG-animation av en jo-jo som åker upp och ner på skärmen.

Plats och tid

Laborationen går att utföras på Mac eller PC som har Opera installerad.
Chrome fungerar också hyggligt, men verkar inte klara av att hantera ändringarna av textens färg. Firefox verkar inte klara animationer över huvud taget.

Förberedelser

Öppna din favorittexteditor. Klipp in följande text och spara filen som "simple.svg".

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     version="1.1" baseProfile="full" 
     width="3cm" height="3cm">
  <circle cx="20" cy="20" r="20" 
          style="fill:yellow;stroke:black;stroke-width:6"/>
</svg>

Öppna sedan filen från hårddisken i Opera. Om du få upp en fin liten AIK-färgad (gul och svart) cirkel är allt i sin ordning.

Läs igenom nedanstående tutorial för att få en känsla för vad som kan göras med SVG och hur det görs. Tutorialen innehåller allt du behöver veta för att kunna göra laborationen (se dock noten om bilder nedan).

• http://www.adobe.com/svg/basics/intro.html från "Getting started" till och med "Declarative animation.

Andra länkar som kan vara av intresse är:

• http://www.sun.com/software/xml/developers/svg/text/
• Källan till all SVG-visdom är http://www.w3.org/TR/SVG/ där ni åtmintone bör kolla upp hur man använder bilder (image, finns i avdelning 5.7).
  

Uppgiften (3p)

Nu ska du göra en enkel animerad jo-jo i SVG. Öppna SVG-filen du nyss gjorde och använd den som skelettkod för uppgiften

Animationen ska föreställa en jo-jo som åker upp och ner på skärmen, samtidigt som den roterar åt ena hållet på nervägen och åt andra hållet på uppvägen. Själva jo-jon innehåller en bild på en jordglob med texten "SVG är kul". Ett "ä" kodas "ä".
Allteftersom jo-jon ändrar y-läge ska "snöret" blir längre respektive kortare. Slutligen ska färgen också på texten ändras enligt cykeln röd-blå-gul-grön-röd. Här är ett snapshot:

och här finns en skärminspelning av hur det bör se ut.
Jordglobsbilden finns här.
SVG-element jag använt är (i godtycklig ordning):

• <g>
• <text>
• <image>
• <animate>
• <svg>
• <animateColor>
• <line>
• <circle>
• <animateTransform>

Ett litet tips är att t.ex skala jordbgloben så att den har 100 pixlar i diameter, låta "fallhöjden" vara 314 pixlar samt låta jo-jon rotera 360 grader. Då ser det ut som om den rullar efter kanten.

Examination

Laborationen redovisas som vanligt via It's learning med en länk till din SVG-fil. Ange eventuell lab-partner som "deltagare", så rättas båda gemensamt