Hvad er SVG
SVG, Scalable Vector Graphics, fik sit officielle 1.0-stempel i starten af september. SVG er et XML-baseret vektorformat til grafik som EPS og Windows Metafile-formaterne. I modsætning til bitmapformater som GIF og JPEG, der - kort fortalt - gemmer farveværdien af hvert enkelt billedpunkt (pixel), så indeholder vektor-formater en geometrisk beskrivelse af billedet. Derfor kan vektorgrafik skaleres, uden at kvaliteten forringes. Samtidig fylder vektorgrafik væsentligt mindre end bitmap-grafik.
I W3-konsortiets arbejdsgruppe sidder der repræsentanter fra blandt andre Adobe, Netscape, Apple, Microsoft, HP, IBM, Quark, Sun, Xerox og Nokia. Den solide opbakning skulle give formatet gode chancer.
Adobe er blandt de mest ivrige fortalere for formatet, og det er jo ikke så underligt, da firmaets kerneprodukter jo er grafiske værktøjer. Illustrator er det mest anvendte vektorgrafikprogram i de professionelle grafikmiljøer, og den seneste version, nummer 9, kan eksportere i SVG-formatet.
Adobe har også udviklet en browser plug-in, der kan fremvise SVG-billeder, og den er i version 2, mens version 3 er i beta i øjeblikket. Denne plug-in fås både til Windows og Mac, til browserne Internet Explorer 4 og senere, og Netscape til og med version 4.76. Desværre har Adobe valgt ikke at understøtte Netscape 6, og det er ærgerligt. Til gengæld er en gruppe programmører i gang med at implementere SVG i Mozilla, som er grundlaget for Netscape 6, men de har et godt stykke vej endnu.
Kig og lær
Kig og lær
Adobe er som sagt glade for formatet, og Adobes website er også det bedste sted at begynde, hvis man ikke kender SVG på forhånd. Start med at downloade og installere Adobes SVG plug-in. Derefter er der masser af spændende demoer at kigge på. Her kan man se de fleste af de egenskaber og muligheder, som formatet tilbyder.
Mange vil sikkert fornemme en stor lighed med Flash, og SVG tilbyder også en hel del af den funktionalitet som findes i Flash, men implementeringen er ganske anderledes. SVG er defineret i XML, og man kan åbne SVG-filer i et tekstbehandlingsprogram og manipulere med indholdet, lige som med HTML-dokumenter. Der findes dog to versioner af formatet: En komprimeret og en ukomprimeret. Det vender vi tilbage til.
Animationer kan skabes ved specielle animations-mærker (tags), eller ved hjælp af JavaScript indlejret i SVG-filen. Interaktivitet skabes ved hjælp af JavaScript, og eksterne JavaScript, placeret i browserens HTML-dokument, kan gå ind og manipulere med objekterne i SVG-filen.
Hvis man kan noget med vektorgrafik og JavaScript, kan SVG tilbyde en indfaldsvinkel til animeret, interaktiv grafik som er meget anderledes end Flash. Formatet bag Flash er binært, og der kræves et program til udvikling, enten Macromedias eget Flash-program eller Adobes LiveMotion. Disse programmer koster selvfølgelig penge, og derudover tager det tid at beherske dem. I parentes bemærket vil vi her gerne gøre ublu reklame for PC World Onlines kusine, IDG Forlag, der har udgivet et hæfte om Flash 5, som er væsentligt bedre end mange bøger på emnet.
Men tilbage til SVG. Hvis man kommer fra et web-miljø, og muligvis har lidt erfaring med dynamisk HTML, kan SVG være et oplagt alternativ til mange ugers Flash-selvstudium.
Et eksempel
Illustrator 9 indeholder understøttelse af SVG som eksport-format og i form af en skummel palette med navnet SVG Interactivity (i den engelsksprogede version af programmet). Det skal lige indføjes, at Illustrator 10 kan udkomme hver dag det skulle være, og den skulle efter sigende indeholde endnu bedre understøttelse af SVG. Men altså - denne palette kan bruges til at eksekvere JavaScript ved bestemte brugerudløste events, som det kendes fra Flash og Dreamweavers Behaviors, og Actions i GoLive.
Men hvor får man så disse JavaScripts fra? På Illustrator installations-cd'en findes der en mappe med navnet SVG Sample Files, men Adobe har produceret nogle bedre eksempler siden cd'en gik i trykken, og dem kan man hente på Adobes webside om SVG og Illustrator.
I menuen til venstre - som er skabt i SVG - kan man vælge forskellige eksempler som gennemgår teknikker til animation og udvikling af SVG i Illustrator. I introduktionen (under punktet Return to intro i menuen) kan man downloade en zip-fil med alle eksemplerne, inklusive Illustrator-filer og JavaScripts. Udpak zip-filen og åbn Illustrator.
Interaktivitet tilføjes i Illustrator via SVG Interactivity-paletten, som fås via menuen Window > Show SVG Interactivity.
Events
Åbn illustrationen til det første eksempel, Change Color, som ligger i mappen plane stamp. Tricket her går ud på at ændre illustrationens baggrundsfarve, når musen bevæges hen over baggrunden.
Åbn SVG Interactivity-paletten og klik på mappesymbolet nederst i paletten. Derved åbnes en række dialoger, hvor man skal pege på det JavaScript, der indeholder funktionerne til manipulation af SVG-filen.
Find scriptet events.js i mappen Plane stamp, og klik Done i den første dialog.
Til at starte med skal det lag, vi ønsker at manipulere, navngives i Layer-paletten. Vælg den blå baggrund og navngiv det "Blåt rektangel" i Layer-paletten. Dette navn nedarves i SVG-filen, således at scriptet kan finde det.
Opvælg de elementer i illustrationen, som skal udløse begivenheden. Det kan være hele billedet, men det kan også blot være enkelte dele, alt efter ønske.
På næste side viser vi det færdige eksempel, så det kan være, at browseren spørger, om du vil installere Adobes SVG plug-in, og acceptere firmaets omfangsrige licensbetingelser. Så nu er du advaret.
Det færdige eksempel
SVG Interactivity-paletten kan minde lidt om Behaviors i Flash og Dreamweaver og Actions i GoLive. I dropdown-menuen øverst i paletten vælges, hvilken event (begivenhed), som skal udløse den ønskede effekt. Sæt den på onmouseover.
Med de valgte elementer opmærket, indsættes linien
elemColor(evt, 'Blåt rektangel', '#336699')
i tekstfeltet JavaScript, og tryk så på retur-tasten. Det er vigtigt, at den anden parameter er skrevet helt mage til som i Layers-paletten.
Stil nu dropdown-menuen på onmouseout, og indtast linien
elemColor(evt, 'Blåt rektangel', '#A4B5D6')
i tekstfeltet JavaScript, og tryk retur. Nu kan filen gemmes via File > Export-menuen. Vi nævnte tidligere, at der er to SVG filformater: Et ukomprimeret og et komprimeret. Adobes SVG-fremviser er ligeglad med, om man bruger det ene eller det andet navn, men når vi generer SVG-filen kan det have stor betydning for filens størrelse, da der kort fortalt er meget "luft" i SVG og andre XML-baserede formater. Kompressionsmetoden er blot standarden gzip som de fleste Zip-programmer understøtter, så man altså åbne komprimerede SVG-filer med for eksempel WinZip, hvilket er ganske praktisk, specielt når man vil lade sig inspirere af andres teknikker.
Til udviklingsbrug er SVG det rigtige valg, og når man er parat til at intregrere sit SVG-dokument med HTML-dokumenter skal man gemme i SVGZ, som er fil-endelsen for komprimeret SVG.
Nu kan eksemplet benyttes indlejret i HTML-siden - hvis altså brugeren har installeret SVG-fremviseren. Man skal huske at placere scriptet events.js et sted, hvor SVG-fremviseren kan finde det. Her i eksemplet er det samme mappe som SVG-filen.
Hvis du har installeret SVG-fremviseren, kan du se eksemplet herover. Ved at højreklikke fås en menu, hvor man blandt andet kan se SVG-koden bag.
Ved at kigge på SVG-koden kan man se, hvorledes JavaScript interagerer med SVG-elementerne. Princippet bygger på DOM (Document Objekt Model) og hvis man har beskæftiget sig med dynamisk HTML, skulle det være nemt at gå til.
Resten af eksemplerne gennemgår en række andre grundlæggende manipulationer, og ved at kigge på de genererede SVG-filer, kan man lære de mange muligheder at kende.
Adobe har samlet en række glimrende eksempler og teknikker, og en udførlig gennemgang af opbygningen af SVG-dokumenter.
