Scalable Vektor Graphics

2007-07-12 | 1:32 am | Kein Kommentar »

SVG – XML basierte skalierbare Grafiken
Grundlegendes im SVG Tutorial.
Schickes Beispiel http://www.codedread.com/displayWebStats.php.

Einbettung von svg im HTML als object
<object data=“bspSVG.cgi“ type=“image/svg+xml“ height=“400″ width=“400″></object>

(0,0) befindet sich in der linken oberen Ecke!

Einfacher Text
<text x=“30″ y=“20″ width=“70″ height=“12″ style=“stroke: green“>Ein einfacher Text</text>

Linie
<line x1=“2″ y1=“3″ x2=“7″ y2=“8″ style=“stroke: black“>

Polyline
<polyline style=“fill: none; stroke: red; stroke-width: 5px“ points=“10 20, 10 40, 20 10, … „/>

Verschieben um (x,y)
<g transform=“translate(60, 20)“></g>

Skalierung: Vergroessern (1< $s), Verkleinern(0<$s<1)
<g transform=“scale($sx,$sy)“></g>

Umwandlung von svg nach png: inkscape blub.svg blub.png

Zum Rumspielen :) Inkscape

Das Baru-Beispiel
5000 Baru-Getreide passen in ein stumpfes Baruschwert. Ab und zu werden einige Barus in das Schwert gefuellt. Und immer wieder wird nachgeschaut, wieviele davon nun drin sind. Das ergibt eine Messreihe mit jeweils der Anzahl der Barus im Schwert zu einem bestimmten Zeitpunkt (timestamp). Insgesamt umfasst sie 245 Wertepaare und besitzt das Format „Timestamp Anzahl“. Das sieht in etwa so aus:

1181592339 1298
1181592941 1303
1181593483 1326
[…]
1182704309 4979
1182704573 4983

Sag etwas dazu: