SVG Scalable Vector Graphics When pixels no longer does it for ya.

Presentasjon om: "SVG Scalable Vector Graphics When pixels no longer does it for ya."— Utskrift av presentasjonen:

1 SVG Scalable Vector Graphics When pixels no longer does it for ya.

2 SVG in a nutshell Vektorgrafikk uttrykt som XML Geometriske objekter og matematiske funksjoner snarere enn rastergrafikk.

3 Grunnstruktur <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> […] …

4 Grunnleggende objekter Linjer Rektangler Sirkler Ellipser Stier Polylinjer Polygoner

5 Transformasjoner Applisere en transformasjonsmatrise på punktene i et objekt Typer: Translasjon, flytte relativt til origo: translate(x,y) Rotasjon, snu objektet: rotate(deg [cx,cy]) Kursivering, strekke/forskyve objektet : skewX(lenght) skewY(length) Skalering, endre størrelse og størrelsesforhold på objektet: scale(ratio) Transformasjoner er additive!

6 Stil og farger CSS: Subsett av CSS2 + spesialtyper Eks, font og tekst fra CSS2 Eks, stroke, fill, stroke-width Stroke og fill Gjennomsiktighet (translucency/opacity) Gradienter, skiftende farger, lineære og radiale Mønstre, gjenta figurer som farge

7 Animasjon Av: Farger Posisjon Transformasjon: Alt: Tidsbestemt eller eventstyrt, basert på SMIL.

8 Annet småsnacks Symboler Tekst Filtre Scripting XML-fragmenter (f.eks XHTML)