Hvordan lages svg-filer?

Hvordan lages svg-filer?

Innleggav Nanaki » tir 05.10.2010 13:05

.svg filer består av kode (stier og tekstelementer). Disse kan i html5 tegnes med javascript på canvas elementet. Det er slik vektorprinsippet er implementert i svg.

Her har jeg brukt firebug til å inspisere en slik fil, og også fjernet noen elementer (nummeret på Telemark fylke, tittelen på Hedemark). lenke til skjermbilde

Men hvordan er de laget? Jeg kan aldri tro folk sitter å beskriver et område som:
Kode: Merk alt
M 112.02441,501.61286 C 111.75491,501.17679 112.00471,499.12646 112.57954,497.05658 C 113.15437,494.98669 113.62719,491.36939 113.63025,489.01814 C 113.63543,485.04713 113.85437,484.69943 116.70918,484.12847 C 119.23858,483.62259 119.68738,483.13467 119.24491,481.37171 C 118.52096,478.48727 121.84345,476.29870 124.65886,477.80547 C 126.73312,478.91557 127.34708,480.79314 125.63583,480.79314 C 124.35870,480.79314 124.31914,484.51602 125.59156,484.95981 C 127.04060,485.46520 125.23521,492.09466 122.27115,497.15244 C 120.10818,500.84327 119.09413,501.63757 116.09870,501.98727 C 114.12735,502.21741 112.29392,502.04893 112.02441,501.61286 z

(dette er vestfold i vedlagt bilde fra wikipedia: http://en.wikipedia.org/wiki/File:Norway_counties.svg )

Så hvordan gjøres dette? I Illustrator? Eller..?

Målet mitt er å finne ut hvordan disse er laget (stiene, altså. paths, som summeres opp til d="" attributten i svg-filen.), slik at jeg kan manipulere dem med javascript.

Brukerens avatar
medlem i 228 måneder
 

Re: Hvordan lages svg-filer?

Innleggav ArneArts » tir 05.10.2010 13:19

SVG-filer er vanligvis laget med Illustrator eller tilsvarende programmer, ja.

Skal du manipulere eksisterende SVG-filer, eller skal du generere grafikken fra scratch? Hvis det sistnevnte vil jeg anbefale deg å se på Canvas i stedet for SVG.

Brukerens avatar
medlem i 238 måneder
 

Re: Hvordan lages svg-filer?

Innleggav Nanaki » tir 05.10.2010 13:34

ArneArts skrev:Skal du manipulere eksisterende SVG-filer, eller skal du generere grafikken fra scratch? Hvis det sistnevnte vil jeg anbefale deg å se på Canvas i stedet for SVG.


Jeg skal gjøre en mellomting. Jeg skal tegne opp Norgeskartet (som nødvendigvis allerede eksisterer), men jeg vil gjøre det dynamisk (f.eks. markere noen fylker med andre farger basert på tilstanden i en database, lage mouseovers osv). Så ja, jeg ser på canvas. Grunnen til at jeg ser på .svg er at jeg oppdaget at stiene er like, altså kan de genereres uten at jeg må tegne stien punkt for punkt. Dette ville ikke være gjennomførbart i stor skala, nødvendigvis.

Et enkelt eksempel med canvas(?) her: http://raphaeljs.com/australia.html

Det er for meg fortsatt litt uklart hva som skiller canvas og svg, ut over at canvas er et html element som kan vise vektorgrafikk (og andre ting, som pixelbaserte bilder, tekst), hvori svg-filer ser ut til å være det mest spennende, da disse kan genereres "on the fly", slik at nettopp tilstanden til en database eller endre programkode-avhengige variabler kan styre hvordan grafikken vises.


Men altså; jeg kan åpne/redigere/lagre disse .svg-filene i Illustrator? Just nå har jeg ikke Illustrator på Mac'n (kan fikse det hvis jeg må), finnes det alternativer?

Brukerens avatar
medlem i 228 måneder
 

Re: Hvordan lages svg-filer?

Innleggav ArneArts » tir 05.10.2010 13:50

Hvis du ikke har Illustrator kan du prøve f.eks Inkscape.

Teknisk sett er det ganske stor forskjell på Canvas og SVG. SVG er et XML-format for vektorgrafikk, mens Canvas er et tegne-API for Javascript.

Australia-eksempelet du linker til bruker faktisk SVG, med et veldig fancy bibliotek som heter Raphaël — jeg har såvidt kikket på dette tidligere, og det ser ut som noe det kan være aktuelt å bruke.

Edit: Du kan evt. se på SVGKit.

Brukerens avatar
medlem i 238 måneder
 

Re: Hvordan lages svg-filer?

Innleggav Nanaki » tir 05.10.2010 14:11

Dette har vært oppklarende, takker.

Brukerens avatar
medlem i 228 måneder
 


Returner til Illustrasjon



Hvem er i Forumene

Registrerte brukere: Google [Bot]