Publisert i bloggen, lørdag 23. mars 2019:

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

Kartesisk koordinatsystem

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:

svg-koordinater-eksempel-nettside.png

Derfor ...

Et vanlig kartesisk koordinatsystem slik vi kjenner det fra mattetimen:

kartesisk-koordinatsystem-eksempel.png

Og et koordinatsystem slik det benyttes i SVG:

svg-koordinater-eksempel.png

Kodesnutten nevnt innledningsvis kan derfor gi noe slikt som resultat:

svg-koordianter-roed-linje.png

Relatert innhold

Scalable Vector Graphics
Komprimere PNG-bilder

Bloggen

Paid and organic last click
Are og Ida på date
Kunstig intelligens
Vekst- prosjektet
Da Outlook stjal ikonet mitt
Sen eller tidlig påske?
Koordinater i SVG
Påstand: Corner er mål
Vestfold-Rogaland kalkulator
Twitter og VM på ski
My New Year's Resolutions
Et bilde sier mer enn tusen ord
Rogaland blir nye Vestfold
På størrelse med Vestfold
Datoformat i Excel og Google Analytics
what3words Hvilke tre ord?
Covfefe will make America great again
Om domenenavn og firmanavn
Fotballfrue: Jeg tar innpå deg
Sakte-TV: Se gresset gro
Sakte-TV: Se maling tørke
Første generasjon iPapp har kommet
Jukselapp fotografering
Det sorte hullet cookies disabled
Høysesong for kjipe annonser
Om analsex og popups
Rotasjon av vindsymboler
Hvor mye er Fotballfrue verdt?
Slik tar du et screenshot
Nyttige husketrekanter
Enklere utregning med kryssmultiplisering
Min egen lille adventskalender
Logge antall likes på Facebook
Hva er sitemap.xml?
Hva er robots.txt?
Responsivt design
Webscraping med PHP
Jeg sammenligner epler og pærer
Scalable Vector Graphics
Google Analytics API: Hente data
Google Analytics API: Muligheter
HTML5: Video
Big Data
Cookies: Hvordan det brukes
Cookies: Hva er det?
Excel i to vinduer
CRM-systemet «Kontor»
Gigantisk timelapse
Hva er jQuery?
Overvåke ReadyNAS DUO med PHP
Favicon - ikonet i adressefeltet
Animert heading på hardcode.no
CSS -sprites
Komprimere PNG-bilder
Redesign av hardcode.no
Klikkbar flash uten clickTAG
Relevans har stor verdi
Alle har wide- screen i 2013
Markedsandeler nettlesere 2010
Internet Explorer-vindu i feil størrelse
Hvor stor er en piksel?
Markedsføring og kundelojalitet
Flash-versjoner
Vestre Sylling og Øverskogen JFF
Sidevisninger, besøk og brukere
Widescreen kommer
Hvor brede bør sidene være?
Fortsatt lese hele saken?
Lese hele saken nå?
Første møte med AdWords
Bort med IE6
Utviklingen på nettleserfronten
Nyttige jukselapper
Nye Sylling.no
Klær med egen logo?
Værdata fra yr.no
Logodesign trender i 2008
Gmail grimaser
Google Analytics
Publiseringssystemet Outpost
Hardcode.no relanseres
Publiserings -systemet