Koordinater i SVG
Jeg skrev et lengre blogginnlegg om SVG, eller Scalable Vector Grahpics, i 2013 hvor jeg blant annet var innom forskjellen på vektorgrafikk og rastergrafikk, viste noen praktiske eksempler og nevnte bruken av koordinater.
Kort fortalt er SVG bildefiler hvor det i koder og klartekst står beskrevet hvordan de forskjelligene tingene i bildet skal tegnes opp, noe som gir veldig gode og klare gjengivelser.
For eksempel vil «rød strek skal gå fra oppe til venstre og skrått ned mot høyre» kunne skrives slik:
<line x1="5" y1="10" x2="25" y2="35" style="stroke: red; stroke-width: 10" />
Allerede her ser vi flere koordinater. Både 5, 10, 25 og 35 er nevnt.
Selv sliter jeg mye med disse koordinatene i SVG hver eneste gang og ender gjerne opp med prøving og feiling. Derfor skriver jeg denne jukselappen, mest for min egen del.
Det kartesiske koordinatsystemet
De fleste husker forhåpentligvis det kartesiske koordinatsystemet fra mattetimene, selv om man ikke nødvendigvis har festet seg så mye ved at det er kartesisk.
At det er kartesisk kommer forøvrig fra den franske filosofen og matematikeren René Descartes, mannen som ikke bare tok i bruk koordinatsystemet, men som også stod bak utsagnet «jeg tenker, altså er jeg».
Her har man altså et koordinatsystem med en stående y-akse og en liggende x-akse, med nullpunktet origo der de to aksene springer ut. Og de forskjellige punktene angis på formatet (x,y):
Ovenfra og ned
I motsetning til hvordan et slikt koordinatsystem fungerer med akser som springer opp fra et nullpunkt så ligger det i en nettsides natur at den starter øverst og løper nedover.
Derfor blir det også naturlig at koordinatene oppfører seg tilsvarende:
Derfor ...
Et vanlig kartesisk koordinatsystem slik vi kjenner det fra mattetimen:
Og et koordinatsystem slik det benyttes i SVG:
Kodesnutten nevnt innledningsvis kan derfor gi noe slikt som resultat:
