Difference between revisions of "SVG"

From Dietrich Blog (Strato)
Jump to: navigation, search
(SVG die ersten Schritte)
Line 8: Line 8:
  
 
== SVG Hello World Beispiel ==
 
== SVG Hello World Beispiel ==
So sieht der SVG-Inhalt aus:
+
So sieht der SVG Quelltext aus:
 
<pre>
 
<pre>
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
Line 56: Line 56:
  
 
Beispiel für Bogenstücke:
 
Beispiel für Bogenstücke:
 +
<pre>
 +
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
 +
<g stroke="black" stroke-width="1" fill="none">
 +
<path d="M150 50 A100 100 0 0 0 50 150" />
 +
<path d="M0 150 L150 150" stroke="red"/>
 +
<path d="M150 0 L150 150" stroke="blue" />
 +
<path d="M50 200 A50 50 0 0 1 100 250" />
 +
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
 +
</g>
 +
</svg>
 +
</pre>
 +
 +
Dies als Grafik:<br />
 +
[[Image:pathwitharcs.svg]]
 +
 +
== Weblinks ==
 +
* http://www.heise.de/ix/artikel/2003/01/128/04.shtml

Revision as of 23:17, 29 June 2007

SVG Scalable Vector Graphics

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
  • SVG wird/wurde sehr stark von der Firma Adobe unterstützt.
  • SVG hat als offenes; d.h.nicht-proprietäres Format große Unterstützung von der OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • WebBrowser unterstützen SVG auch...?
  • Konkurriered zu SVG ist: Flash von Macromedia

SVG Hello World Beispiel

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Und so sieht die SVG-Grafik aus:
Helloworld.svg

SVG Tools

SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad aus "M" (=move to) und "L" (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Dies als Grafik:
DasHausvomNikolaus.svg


Beispiel für Bogenstücke:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Dies als Grafik:
Pathwitharcs.svg

Weblinks