Difference between revisions of "SVG"

From Dietrich Blog (Strato)
Jump to: navigation, search
(SVG Scalable Vector Graphics)
(Replaced content with "Has been moved to: http://blog.kr8.de/wiki-svg/")
 
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== SVG Scalable Vector Graphics ==
+
Has been moved to: http://blog.kr8.de/wiki-svg/
* 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...?
 
* Konkurrierend zu SVG ist: '''Flash''' von Macromedia
 
 
 
== SVG Hello World Beispiel ==
 
So sieht der SVG Quelltext aus:
 
<pre>
 
<?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>
 
</pre>
 
Und so sieht die SVG-Grafik aus:<br />
 
[[Image:Helloworld.svg]]
 
 
 
== SVG Tools ==
 
* Sodipodi
 
* [[Inkscape]]
 
* Adobe Illustrator (kommerziell)
 
* Corel Draw (kommerziell)
 
* [[OpenOffice]] Draw
 
* Batik
 
* Siehe auch: [[XMLEditing]]
 
 
 
== 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):
 
<pre>
 
<?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>
 
</pre>
 
Dies als Grafik:<br />
 
[[Image:DasHausvomNikolaus.svg]]
 
 
 
 
 
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
 

Latest revision as of 21:29, 15 May 2020

Has been moved to: http://blog.kr8.de/wiki-svg/