Stand: 14.10.2023

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)

Erstellen von SVG-Dateien

SVG-Zeichnungen kann ich direkt mit der Software InkScape erstellen und bearbeiten.

Bestimmte Grafiken kann ich schöner mit der Software GeoGebra erstellen. Die kann ich dann als SVG exportieren.

Einbetten von SVG-Dateien in WordPress

Ich speichere meine SVG-Dateien unabhängig von WordPress einfach auf GitHub. Von da kann ich sie einfach über “Add Media” und “Insert from URL” in einen WordPress-Artikel einfügen.

Beispiel: SVG Hello World

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>

Abbildung 1: Das als SVG-Grafik (GitHub: Helloworld.svg)

Beispiel: SVG Tageslänge

Die Berechnung der Tageslänge konnte ich schon in meiner Schulzeit (1962) anhand folgender Zeichnung durchführen:

Abbildung 2: Tageslänge (GitHub: Tageslaenge.svg)

SVG in eine WordPress-Seite einbinden

[[Image:Rss-family.svg|600px]]

Dies Beispiel stammt von der Seite: RSS.

Abbildung 3: RSS Family (GitHub: Rss-family.svg)

Dies SVG-Beispiel stammt von der Seite: SWiSH

Abbildung 4: SWiSH (GitHUb: Swish_Flash_Animation.svg)

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>

Abbildung 5: Dies als Grafik (GitHub: 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:

Abbildung 6: Bogenstücke als Grafik-Datei (GitHub: Pathwitharcs.svg)

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:

Abbildung 7: Textzeilen (GitHub: BalacedScorecard-3.svg)

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> 

Abbildung 8: Dies als SVG-Datei (GitHub: Flow-2.svg)

Weblinks

• http://www.heise.de/ix/artikel/2003/01/128/04.shtml