Transformasjoner
For de som har programmert 2D eller 3D-grafikk i ulike settinger er dette kjente operasjoner, og vi vet at de utføres ved hjelp av matriseoperasjoner. I følge lineær algebra kan vi kombinere transformasjoner ved å multiplsere matriser som beskriver hver av deltransformasjonene. Vi kan i tillegg til basistransformasjonene spesifisere spesielle matriser for spesielle behov. Mozilla Debelopers Network [1] har materiale om dette.
Det er to paraleller til den tenkingen vi gjør i tradisjonell grafisk databehandling:
- Vi kan assosiere SVG-strukturen til en scenegraf. Det vil si at vi kan plante transformasjoner i noder og disse vil arves av barna (og barnebarna). Det vil si at legger vi en translasjon inn i et g-element så vil det ha konsekvenser for all geometri i elementene som er barn av dette g-elementet. Det er slik vi også tenker når vi bruker CSS-regler som jo også er arvelige.
- Matrise begrepet blir tydelig når vi programmerer mot f.eks. OpenGL. Vi bruker translate(), scale() og rotate() for å bygge nye sammensatte matriser og vi bruker pushMatrix() og popMatrix() for å ta vare på sammensatte matriser (resultatet av matrisemultiplikasjoner). Det vil si at vi holder styr på en stack av akkumulerte matriser og sørger for at den som skal gjelde (currentMatrix) alltid ligger på toppen. Vi kan da på en måte si at vi realiserer trestukturen av transformasjoner dynamisk i koden.
Hvis assosiasjonene ovenfor er fremmede så er det likevel ganske kurant å bygge transformasjoner inn i en SVG-struktur. Et lite eksempel:
