Gehört zu: Vektorgrafik
Siehe auch: Graphics in WordPress
Benutzt: Grafiken aus Github, Fotos aus Google Drive

Stand: 15. Sep 2021

SVG Scalable Vector Graphics (aus Wiki)

SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
- SVG 1.0: 2001
- SVG 1.1: 2003
- SVG 1.2: 2005
- SVG 2.0: hieran wird seit 2011 gearbeitet (“Candidate Recommendation”)
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
SVG wird von WordPress 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)

SVG-Dateien sind keine binären Dateien, sondern Text-Dateien, die also auch mit normalen Text-Editoren bearbeitet werden können.
Solche SVG-Dateien sind “normale” XML-Dateien mit dem besonderen Namespace SVG.

SVG tat sich anfangs sehr schwer, da Flash der Industrie-Standard war.
SVG 1.1 enthielt lediglich eingie Korrekturen zu 1.0
SVG 1.2 wurde nie offiziell fertiggestellt.
SVG 2.0 soll der neue Super-Standard werden – als Teil von HTML5

SVG Grafiken Einbetten in…

Bekannte Probleme mit SVG

Darstellung von Pfeilspitzen an Linien
Welche Schrifttypen werden unterstützt?
Darstellung von Fließtext (ab SVG 1.2 möglich)

Weblinks zu SVG

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

SVG-Viewer

SVG-Grafiken bis Verson 1.1 können z.B. in Mozilla Firefox betrachtet (“Rendering”) werden. Auch Google Drive…

SVG-Grafiken Erstellen und Bearbeiten

Ich benutzte zur Zeit (Feb. 2020) das SVG-Tool Inkscape. Leider wurden in Inkscape schon einige Elemente von SVG 1.2 implementiert, die aber nie definitiv verabschiedet wurden. Dazu gehören: flowRoot, flowRegion und flowPara…

Dies sind Fliesstext-Konstrukte, die von den Vertretern im W3C sehr kontrovers diskutiert wurden und schließlich nicht in den SVG-Standard aufgenommen wurden. Wir müssen bei Inkscape also aufpassen und ggf. solche Konstrukte entfernen und durch einfachere Konstrukte von SVG 1.1 ersetzen.

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
Sodipodi
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 1: Dies als Grafik in SVG-Format (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>

Abbildung 2: Dies als Grafik in SVG-Format (Github: Pathwitharcs.svg)

SVG mit Bogenstücken

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>

Abbildung 3: Dies als Grafik (Github: BalacedScorecard-3.svg)

Balanced Scorecard als 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>

Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext.

Abbildung 4: SVG-Grafik mit Fließtext (Google Drive: flow-2.jpg)

SVG Fließtext – Text Flow

Da hier SVG 1.2 kann das SVG nicht als Original Flow-2.svg richtig angezeigt werden. Daher wir es in ein Flow-2.jpg umgewandelt (mit Inkscape und Libre Office Draw).

SVG Beispiele

SVG Beispiel 1: 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>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Abbildung 5: Und so sieht die SVG-Grafik dann aus (Github: Helloworld.svg)

SVG-Grafik Hello World

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

SVG Beispiel 3: RSS Family

Abbildung 7: Dies Beispiel stammt von der Seite: RSS (Github: Rss-family.svg)

SVG Beispiel 4: SWISH Flash Animation

Abbildung 8: Dies SVG-Beispiel stammt von der Seite: SWiSH (Github: Swish_Flash_Animation.svg)

Blog Dietrich (Strato)

Collected Notes on Astronomy, Computers, Consulting, Travelling et.al.

Computer: SVG Vektorgrafiken (aus Wiki)