{"id":63,"date":"2007-07-12T01:32:45","date_gmt":"2007-07-11T23:32:45","guid":{"rendered":"http:\/\/www.hermione.de\/blog\/?p=63"},"modified":"2008-06-05T17:25:14","modified_gmt":"2008-06-05T15:25:14","slug":"scalable-vektor-graphics","status":"publish","type":"post","link":"http:\/\/blog.hermione.de\/?p=63","title":{"rendered":"Scalable Vektor Graphics"},"content":{"rendered":"<p><strong>SVG &#8211; XML basierte skalierbare Grafiken<\/strong><br \/>\nGrundlegendes im <a href=\"http:\/\/svg.tutorial.aptico.de\/index.php\" target=\"_blank\">SVG Tutorial<\/a>.<br \/>\nSchickes Beispiel <a href=\"http:\/\/www.codedread.com\/displayWebStats.php\" target=\"_blank\">http:\/\/www.codedread.com\/displayWebStats.php<\/a>.<\/p>\n<p><strong>Einbettung von svg im HTML als object<\/strong><br \/>\n&lt;object data=&#8220;bspSVG.cgi&#8220; type=&#8220;image\/svg+xml&#8220; height=&#8220;400&#8243; width=&#8220;400&#8243;&gt;&lt;\/object&gt;<\/p>\n<p><strong>(0,0) befindet sich in der linken oberen Ecke!<\/strong><\/p>\n<p><strong>Einfacher Text<\/strong><br \/>\n&lt;text x=&#8220;30&#8243; y=&#8220;20&#8243; width=&#8220;70&#8243; height=&#8220;12&#8243; style=&#8220;stroke: green&#8220;&gt;Ein einfacher Text&lt;\/text&gt;<\/p>\n<p><strong>Linie<\/strong><br \/>\n&lt;line x1=&#8220;2&#8243; y1=&#8220;3&#8243; x2=&#8220;7&#8243; y2=&#8220;8&#8243; style=&#8220;stroke: black&#8220;&gt;<\/p>\n<p><strong>Polyline<\/strong><br \/>\n&lt;polyline style=&#8220;fill: none; stroke: red; stroke-width: 5px&#8220; points=&#8220;10 20, 10 40, 20 10, &#8230; &#8222;\/&gt;<\/p>\n<p><strong>Verschieben um (x,y)<\/strong><br \/>\n&lt;g transform=&#8220;translate(60, 20)&#8220;&gt;&lt;\/g&gt;<\/p>\n<p><strong>Skalierung: Vergroessern (1&lt; $s), Verkleinern(0&lt;$s&lt;1)<\/strong><br \/>\n&lt;g transform=&#8220;scale($sx,$sy)&#8220;&gt;&lt;\/g&gt;<\/p>\n<p><strong>Umwandlung von svg nach png: <\/strong><em>inkscape blub.svg blub.png<\/em><br \/>\n<a href=\"http:\/\/www.inkscape.org\"><\/a><br \/>\n<strong>Zum Rumspielen :) <\/strong><a href=\"http:\/\/www.inkscape.org\">Inkscape<\/a><br \/>\n<!--more--><\/p>\n<hr \/>\n<p><strong>Das Baru-Beispiel<\/strong><br \/>\n5000 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 &#8222;Timestamp Anzahl&#8220;. Das sieht in etwa so aus:<\/p>\n<table border=\"0\">\n<tr>\n<td>1181592339 1298<br \/>\n1181592941 1303<br \/>\n1181593483 1326<br \/>\n[&#8230;]<br \/>\n1182704309 4979<br \/>\n1182704573 4983<\/td>\n<\/tr>\n<\/table>\n<p><object data=\"http:\/\/dadidi.ath.cx\/baru\/bspSVG.cgi\" type=\"image\/svg+xml\" height=\"300\" width=\"400\"><\/object><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG &#8211; XML basierte skalierbare Grafiken Grundlegendes im SVG Tutorial. Schickes Beispiel http:\/\/www.codedread.com\/displayWebStats.php. Einbettung von svg im HTML als object &lt;object data=&#8220;bspSVG.cgi&#8220; type=&#8220;image\/svg+xml&#8220; height=&#8220;400&#8243; width=&#8220;400&#8243;&gt;&lt;\/object&gt; (0,0) befindet sich in der linken oberen Ecke! Einfacher Text &lt;text x=&#8220;30&#8243; y=&#8220;20&#8243; width=&#8220;70&#8243; height=&#8220;12&#8243; style=&#8220;stroke: green&#8220;&gt;Ein einfacher Text&lt;\/text&gt; Linie &lt;line x1=&#8220;2&#8243; y1=&#8220;3&#8243; x2=&#8220;7&#8243; y2=&#8220;8&#8243; style=&#8220;stroke: black&#8220;&gt; Polyline &lt;polyline style=&#8220;fill: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"_links":{"self":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/63"}],"collection":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=63"}],"version-history":[{"count":0,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=\/wp\/v2\/posts\/63\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=63"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=63"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.hermione.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}