|
|
| (4 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | {{TOCright}}
| + | Has been moved to: http://blog.kr8.de/wiki-svg/ |
| − | == SVG Scalable Vector Graphics ==
| |
| − | * SVG ist ein auf [[XML]] beruhender [[W3C]]-Standard für [[VektorGrafik]].
| |
| − | ** SVG 1.0: 2001
| |
| − | ** SVG 1.1: 2003
| |
| − | ** SVG 1.2: 2005
| |
| − | * SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe "End of Life" verkündet.
| |
| − | * SVG hat als offenes; d.h.nicht-proprietäres Format große Unterstützung durch [[OpenSourceSoftware]]
| |
| − | * SVG wird von [[MediaWiki]] unterstützt
| |
| − | * [[WebBrowser]] unterstützen SVG auch...?
| |
| − | ** [[MozillaFirefox]] 2 unterstützt zur Zeit eine Teilmenge von SVG 1.1, diese soll in 2007 vervollständigt werden.
| |
| − | ** Microsoft [[InternetExplorer]] ???
| |
| − | * Konkurrierend zu SVG ist: '''Flash''' von Macromedia (aufgekauft von Adobe)
| |
| − | | |
| − | == Bekannte Probleme ==
| |
| − | * Darstellung von Pfeilspitzen an Linien
| |
| − | * Welche Schrifttypen werden unterstützt?
| |
| − | * Darstellung von Fließtext (ab SVG 1.2 möglich)
| |
| − | | |
| − | == 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 in eine WikiMedia-Seite einbinden ==
| |
| − | <pre>
| |
| − | [[Image:Rss-family.svg|600px]]
| |
| − | </pre>
| |
| − | Dies Beispiel stammt von der Seite: [[ContentSyndication]].
| |
| − | <br />[[Image:Rss-family.svg|600px]]
| |
| − | | |
| − | Dies SVG-Beispiel stammt von der Seite: [[SWiSH]]
| |
| − | <br />[[Image:Swish Flash Animation.svg]]
| |
| − | | |
| − | == [[SVG]] in eine [[HTML]]-Seite einbinden ==
| |
| − | <pre>
| |
| − | <embed width="940" height="500" type="image/svg+xml" src="%ATTACHURL%/rss-family.svg"></embed>
| |
| − | oder:
| |
| − | <object data="%ATTACHURL%/rss-family.svACHURL%/rss-family.svg" width="940" height="500" type="image/svg+xml" />
| |
| − | </pre>
| |
| − | | |
| − | Damit der [[WebBrowser]] das [[SVG]] anzeigen kann, muss ein SVG-Viewer (Adobe, Corel) installiert sein. Vgl dazu: [[MozillaFirefox]].
| |
| − | | |
| − | == SVG Tools ==
| |
| − | * Adobe Illustrator
| |
| − | * Macromedia Flash
| |
| − | * [[OpenOffice]] Draw
| |
| − | * Corel Draw
| |
| − | * Visio
| |
| − | * [[PowerPoint]]
| |
| − | * Sodipodi (SVG a la Adobe Illustrator)
| |
| − | * DIA (SVG a la Visio)
| |
| − | * [[Inkscape]] (SVG pur, Branch of Sodipodi)
| |
| − | * [http://www.dkracht.com/joomla/index.php?option=com_content&task=view&id=60 GoogleSketchUP]
| |
| − | | |
| − | == 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 ===
| |
| − | 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]]
| |
| − | | |
| − | === Beispiel für zwei einzelne Textzeilen ===
| |
| − | <pre>
| |
| − | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
| |
| − | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
| |
| − | <svg xmlns="http://www.w3.org/2000/svg" width="265" height="65"
| |
| − | xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
| |
| − | <title>Balanced Scorecard</title>
| |
| − | <desc>Aus: pres_030806.ppt TTC</desc>
| |
| − | <style type="text/css">
| |
| − | .st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
| |
| − | </style>
| |
| − | <g>
| |
| − | <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
| |
| − | <text x="18" y="29" class="st2">Basic Balanced</text>
| |
| − | <text x="50" y="55" class="st2">Scorecard</text>
| |
| − | </g>
| |
| − | </svg>
| |
| − | </pre>
| |
| − | Dies als Grafik:<br />
| |
| − | [[Image:BalancedScorecard-3.svg]]
| |
| − | | |
| − | === Beispiel für Fließtext ===
| |
| − | Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
| |
| − | <br />SVG-Quellcode:
| |
| − | <pre>
| |
| − | <?xml version="1.0" standalone="no"?>
| |
| − | <svg version="1.2" xmlns="http://www.w3.org/2000/svg"
| |
| − | id="body" width="350" height="350">
| |
| − | <title>SVG flowPara Example.</title>
| |
| − | <g>
| |
| − | <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
| |
| − | <flowRoot>
| |
| − | <flowRegion>
| |
| − | <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
| |
| − | </flowRegion>
| |
| − | <flowDiv text-align="start">
| |
| − | <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
| |
| − | P1 The quick brown fox jumped over the lazy dog.</flowPara>
| |
| − | <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
| |
| − | P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
| |
| − | <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
| |
| − | P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
| |
| − | </flowDiv>
| |
| − | </flowRoot>
| |
| − | </g>
| |
| − | </svg>
| |
| − | </pre>
| |
| − | Dies als Grafik:<br />
| |
| − | [[Image:Flow-2.svg|thumb|210px|none|Beispiel für Fließtext mit SVG 1.2]]
| |
| − | | |
| − | === Beispiel: Berechnung der Tageslänge ===
| |
| − | [[Image:Tageslaenge.svg]]
| |
| − | | |
| − | == Weblinks ==
| |
| − | * http://www.heise.de/ix/artikel/2003/01/128/04.shtml
| |
