SVG (aus Wiki)
blog.kr8.de
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:
<?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:
Die Berechnung der Tageslänge konnte ich schon in meiner Schulzeit (1962) anhand folgender Zeichnung durchführen:
SVG in eine WordPress-Seite einbinden
[[Image:Rss-family.svg|600px]]
Dies Beispiel stammt von der Seite: RSS.
Dies SVG-Beispiel stammt von der Seite: SWiSH
SVG in eine HTML-Seite einbinden
<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" />
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)
- 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):
<?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:
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:
Beispiel für zwei einzelne Textzeilen
<?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>
Dies als Grafik:
Beispiel für Fließtext
Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:
<?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>
Dies als Grafik:
Beispiel: Berechnung der Tageslänge