Computer: SVG (aus Wiki)

SVG (aus Wiki)

Gehört zu: Computer, Vektorgrafik
Siehe auch: InkScape, WordPress Plugins, GitHub

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…?
  • 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

SVG Tools

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)

Beispiel für Fließtext mit SVG 1.2

Weblinks

Computer: Visio (aus Wiki)

Vektorgrafiken mit Visio (aus Wiki)

Gehört zu: Vektorgrafik
Siehe auch:  Libre Office, InkScape, Vektorgrafik, SVG
Stand: 03.04.2022

Vektorgrafiken mit Visio

Visio ist ein im Jahre 2000 von Microsoft aufgekauftes Zeichenprogramm, mit dem man sehr schön Zeichnungen in VektorGrafik z.B. Flowcharts, UML-Diagramme, MindMaps, BPMN-Diagramme (sog. BPD’s) und viele andere Arten von Diagrammen erstellen kann.

Eine Besonderheit ist, dass man mehrseitige Dokumente erstellen kann.

Per 03.04.2022 sind alle VSD-Grafiken auf dem ComputerAsusbaer konvertiert zu SVG- oder ODG-Grafiken.

Installation von Visio

  • Definitive Software Library ID: Visio
  • Name: Visio Professional 2002
  • Version: 10.0.525
  • Installations-Ordner: D:\Programme\Microsoft Office\Visio10
  • Konfigurations-Dateien
    • Stencils: D:\Programme\Microsoft Office\Visio10\1033\…
  • Systemvoraussetzungen: ….

Wissenswertes

Dateitypen

  • vsd = Visio Drawings
  • vss = Shapes = Stencils = Schablonen
  • vst = Templates = Vorlagen

Konversionsmöglichkeiten

  • WMF
  • SVG (Mit InkScape mit ein paar Problemchen)
  • ODG (MIt LibreOffice)
  • Diverse Pixel-Formate

BPMN Stencils

Historie von Visio

  • 1984 Gründung der Firma Aldus, erstes Produkt: PageMaker.
  • 1990 Gründung der Firma Axon durch ehemalige Aldus Manager
  • 1992 Umbenennung von Axon in Shapeware.
  • Nov. 1992: Vision 1.0 freigegeben.
  • 7.1.2000: Microsoft kauft Visio für 1,5 Milliarden Dollar.
  • 2002: Visio 2002 freigegeben (unterstützt XML-Format).
  • 2003: Visio 2003 freigegeben

— Main.DietrichKracht – 19 Feb 2005

Retrieved from my Wiki

Astronomie: Sphärische Trigonometrie

Gehört zu: Mathematik
Siehe auch: Tägliche Bewegung der Gestirne, Diagramme, Tageslänge, Koordinatensystem
Benötigt: WordPress Latex-Plugin, WordPress Plugin Google Drive Embedder

Was ist Sphärische Trigonometrie?

Die Ebene Trigonometrie ist die Lehre von den Dreiecken in der Ebene.

Die Sphärische Trigonometrie ist die Lehre von den Dreiecken auf einer Kugeloberfläche. Solche Dreiecke werden durch Abschnitte von Großkreisen gebildet.

Das Polar-Dreieck auf der Himmelskugel

Zur Umrechnung eines Koordinatensystems in ein anderes zeichnet man sich ein sog. Polar-Dreieck, in dem die “Pole” (“Drehpunkte”) beider Koordinatensysteme vorkommen.

Zur Umrechnung der äquatorialen Koordinaten Deklination (δ) und Stundenwinkel (t) in die horizontalen Koordinaten Höhe (h) und Azimuth (A) wird das sog. Polar-Dreieck wird gebildet durch den Himmelspol (N), den Zenit (Z) und ein Himmelsobjekt (O).

Im Polardreieck sind die Abstände (Bogenlängen):

  • vom Himmelspol zum Zenit: 90° – φ
  • vom Himmelspol zum Himmelsobjekt: 90° – δ
  • vom Zenit zum HImmelsobjekt: z = 90° – h

Im Polardreieck sind die Winkel an den Ecken des Dreiecks:

  • Winkel am Himmelspol: Stundenwinkel t (oder τ)
  • Winkel am Zenith: 180°  – A   (A = Azimuth von Süden)

Abbildung 1: Das Polardreieck (Google Drive: polardreieck.svg)

polardreieck.svg

Polardreieck

Link: https://de.wikibooks.org/wiki/Astronomische_Berechnungen_f%C3%BCr_Amateure/_Druckversion#Koordinatentransformationen

MIt dem Seiten-Cosinussatz errechnet man den Cosinus der Länge einer Seite aus den Längen der beiden anderen Seiten und dem gegenüberliegenden Winkel:
\(\cos z = \cos (90° – \phi) \cos (90° – \delta) + \sin (90° – \phi) \sin (90° – \delta) \cos t\)

Was schließlich heisst:
\(\sin h = \sin \phi \sin \delta + \cos \phi \cos \delta \cos t \)

Der Cotangens-Satz im Polardreieck sagt:

\(   \cos (90° – \phi)  \cos t = \sin(90° – \phi) \cot (90° – \delta) – \sin t \cot(180° – A)  \)

Trigonometrisch umgeformt ergibt das:
\(  \sin \phi \cos t = \cos \phi \tan \delta – \Large\frac{\sin t}{\tan A}  \)

Aufgelöst nach A ergibt sich:

\(   \tan A = \Large\frac{\sin t}{\sin \phi \cos t – \cos \phi \tan \delta} \)

MIt Hilfe dieser Koordinatentransformation kann man für jedes bekannte Himmelsobjekt (Deklination und Rektaszension) die scheinbare tägliche Bewegung am Himmel berechnen – siehe dazu: Die scheinbare tägliche Bewegung der Gestirne.

Großkreise auf einer Kugel

Wenn ich im obigen Polardreieck h=0 setze, erhalte ich einen gekippten Großkreis (oBdA setze ich t = λ).

\(\Large \frac{\sin{\delta}}{\cos{\delta}} = – \frac{\cos{\varphi}}{sin{\varphi}} \cdot \cos{\lambda}  \)

Abbildung 2: Beispiel eines Großkreises auf der Erde (Google: xyz)

grosskreis-01.svg

Großkreis auf der Erdoberfläche

Bei der Seefahrt bezeichnet man die Navigation auf einem Kurs entlang eines Großkreises als “Orthodrome” (Gegensatz: Loxodrome).

Mehr dazu: https://www.navigareberlin.de/onewebmedia/Grosskreisnavigation%20Ver%C3%B6ffentlichung.pdf

Metrik auf einer Kugeloberfläche

Für eine Kugel mit dem Radius r kann ich auf der Kugeloberfläche (z.B. Erdoberfläche) ein Koordinatensystem (s.o.) benutzen:

  • Koordinatensystem (λ, \( \varphi \))
  • wobei im Bogenmass: \( \Large -\frac{\pi}{2} < \varphi < \frac{\pi}{2} \)
  • und auch im Bogenmass: \( \Large 0 \leq \lambda < 2\pi \)

Zur Messung von Abständen (Längen) benötige ich ein LInienelement:

\(\Large ds^2 = r^2 d \varphi^2 + r^2 \cos{\varphi}^2 d\lambda^2 \)

Die kürzeste Verbindung zweier Punkte liegt dann auf einem sog. “Großkreis” (s.o.).

Beispiel 1 (gerade)

Die Strecke von (0.0) nach (π, 0); das ist ein halber Erdumfang am Äquator) müsste eine Länge von π r haben. Da auf der ganzen Strecke φ konstant =0 ist, ist auch dφ = 0 und es  ergibt sich als Längenintegral:

\( \Large s = r \int\limits_{0}^{\pi} d \lambda = r \cdot \left[ \lambda \right]_0^\pi  = \pi \cdot r\)

Beispiel 2 (gerade)

Die Strecke von (0,0) nach (0, π/2) ist ein Viertel Erdumfang vom Äquator zum Nordpol (ein sog. Quadrant) die Länge müsste also \(r \frac{\pi}{2} \) sein. Da auf der ganzen Strecke λ konstant =0 ist, ist auch dλ=0 und es ergibt sich als Längenintegral:

\( \Large s = r \int\limits_{0}^{\frac{\pi}{2}} d \varphi = r \cdot \left[ \varphi \right]_0^{\frac{\pi}{2}}  = r \cdot \frac{\pi}{2}\)

Beispiel 3 (schräg)

Aus dem obigen “Polardreieck” wird das “nautische Grunddreick“, wo wir wieder den Seiten-Cosinussatz anwenden können, um die Distanz zu berechnen. Die Distanz d zwischen einem Ausgangspunkt \( A = (\lambda_A, \varphi_A) \) zu einem Endpunkt \( B = (\lambda_B, \varphi_B) \) können wir also berechnen als:

\(\Large \cos{d} = \sin{\varphi_A} \sin{\varphi_B} + \cos{\varphi_A} \cos{\varphi_B} \cos{(\lambda_B – \lambda_A)} \ \\ \)

Die Strecke von (0, π/3) nach (π, 0) läuft jetzt “schräg” über unser Koordinatensystem…

\(\Large \cos{d} = \sin{\frac{\pi}{3}} \sin{0} + \cos{\frac{\pi}{3}} \cos{0} \cos{\pi}\)

Das ergibt: \( \Large \cos{d} = \frac{1}{2}\sqrt{3} \cdot 0 + \frac{1}{2} \cdot 1 \cdot (-1) = -\frac{1}{2} \\\ \)

und damit ist die gesuchte Distanz  \( d = \frac{2}{3} \pi \)

Um diese Distanz aus unserem Linienelement zu ermitteln, müssen wir das Linienelement entlang des Bogens von A nach B integrieren.

Dafür wollen wir den Weg zuerst als Funktion \( \varphi = f(\lambda) \) aufschreiben.

Astronomie: Tägliche Bewegung der Himmelsobjekte

Gehört zu: Sonnensystem
Siehe auch: Tageslänge, Sphärische Trigonometrie
Benötigt: WordPress Latex-Plugin, Grafiken von Github

Tägliche scheinbare Bewegung der Gestirne

Wenn wir wissen wollen, wie sich ein Himmelobjekt mit bekannter Rektaszension und Deklination im Laufe des Tages über den Himmel bewegt, so ist die einfache Formel:

  • Stundenwinkel = Sternzeit – Rektaszension
  • Deklination = const.

Damit haben wir die äquatorialen Koordinaten Stundenwinkel (t) und Deklination (δ) als Funktion der Sternzeit.

Wenn wir die azmutalen Koordinaten Höhe (h) und Azimuth (A) haben wollen, so müssen wir das wie folgt umrechnen:

(Quelle: https://de.wikibooks.org/wiki/Astronomische_Berechnungen_f%C3%BCr_Amateure/_Druckversion#Koordinatentransformationen )

\( \sin h = \sin \phi \cdot \sin \delta + \cos \phi \cdot \cos \delta \cdot \cos t \)

und

\( \tan A = \Large \frac{\sin t}{\sin \phi \cdot \cos t – \cos \phi \cdot \tan \delta}  \)

Beispiel Wega in Hamburg:

Abbildung 1: Scheinbare tägliche bewegung der Wega (Github: TaeglicheBewegung.svg)

TaeglicheBewegung.svg

Scheinbare tägliche Bewegung der Wega

 

Astrofotografie: Neptun mit Geostationären Erdsatelliten

Gehört zu: Das Sonnensysten
Siehe auch: Künstliche Erdsatelliten
Benutzt: Grafiken von GitHub, Fotos von Google Archiv

Stand: 13.07.2021

Geostationäre Erdsatelliten

Fotoserie auf Neptun

Am 29.8.2016 habe ich von Kollase aus mehrer Fotoreihen geschossen. Zum Schluss wollte ich auch mal in Richtung Neptun zielen.

Das war von 20:45 bis 20:47 UT eine Serie von 8 Aufnahmen mit je 15 sec Belichtung mit dem Takumar 135mm bei ISO 3200 und f/3.5.

Dabei habe ich zufällig eine Gegend mit geostationären Erdsatelliten getroffen (Deklination ca. -7 Grad). Da die Aufnahmen auf die Sterne nachgeführt waren, sind die geostationären Satelliten nun zu kleinen Strichen geworden (siehe Foto unten). Dabei besteht jede Satellitenspur aus 8 kleinen Segmenten.

Deklination geostationärer Satelliten

Geostationäre Satelliten haben eine Umlaufzeit von 24 Stunden und befinden sich in einer Kreisbahn 35.786 km über der Erdoberfläche mit einer Bahnneigung von 0° immer über dem Erdäquator. Wenn wir von Hamburg (53,5° geografischer Breite) beobachten, müssen wir also etwa 7,6 Grad unterhalb des Himmeläquators schauen, wenn wir genau nach Süden schauen. Da Neptun nicht genau im Süden steht, wären die geostationären Satelliten in dieser Gegend etwas weniger als 7,6 Grad unterhalb des Erdäquators zu sehen. Contine reading

Internet: Vector Graphics in HTML

Gehört zu: Vektorgrafik
Siehe auch: HTML, SVG, WordPress

Vektorgrafiken in HTML-Seiten

Auch in HTML-Seiten möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

Upload von SVG-Grafiken

Bei WordPress muss man den Dateityp “SVG” zulassen zum Upload z.B. durch Installation des WordPress-Plugins “SVG Support”. Dies habe ich in Graphis in WordPress beschieben.

Bei Flickr geht es so:…

Bei Google Photos geht es so: …..

SVG Grafik in eine HTML-Seite einbinden

SVG Browser Support heute

Kein Web-Browser unterstützt den aktuellen SVG-Standard in vollem Umfang.

Mozilla Firefox hat sehr gute SVG-Unterstützung.

Microsoft Internet Explorer und Edge nur mittelmäßige SVG-Unterstützung. Contine reading

Computer: Adobe Flash Player – Shockwave – in Mozilla Firefox

Gehört zu: Vektorgrafiken
Siehe auch: SWF, SVG
Benutzt: Grafiken aus GitHub

Meine Vektorgrafiken als SWF oder SVG

My older websites do use vector graphics in Shockwave format – originally produced by Feehand and converted from .fla to .swf

In the long run I am planning to convert .swf to a more open and modern format ( like .svg or html5 or ….)

At the moment I want to keep my older websites “alive”, so I need to know how to embed SWF-files in HTML and how to render them in the important Web Browsers (Mozilla Firefox,…)

My traditional website, that I want to keep “alive” is:  http://www.kr8.de (original) resp. http://web.kr8.de (converted to bootstap).

Adobe Flashplayer

As I understood, I need Adobe Flashplayer as a plugin into my web browser in order to render my SWF graphics properly.

My favorite web browser is Mozilla Firefox. With Firefox version 43.04 I was unable to install the Adobes Flashplayer plugin.
With Mozilla Firefox 28.0 the installation of the Adobe Flash Plugin went well. To be exact: I installed Shockwave Flash 22.0.0.209 as a plugin to Mozilla Firefox 28.0.

Rendering SWF in HTML

My SWF files showed up perfectly on my HTML-Pages in Mozilla Firefox.
Example: http://web.kr8.de/ldap.html

This is the code I used for embedding the SWF into the HTML:

<object align=”left” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ width=”294″ height=”126″>
<param name=”movie” value=”img/ldap.swf” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”high” />
<embed quality=”high” pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” src=”img/ldap.swf” width=”294″ height=”126″  wmode=”transparent” />
</embed>
</object>

Potential Problems

  • Use the right file path in the SRC parameter e.g. src=”img/ldap.swf”
  • Use wmode=”transparent”
  • Other Firefox-Plugins may interfere with the Shockwave Flash plugin, e.g. Shockwave Director or others…

Als SVG-Grafik geht es ganz einfach

Wenn wir statt Shockwave das SVG-Format nehmen, geht es einfacher, wobei wir SVG in der WordPress Media Library oder auch in GitHub speichen können:

Abbildung 1: LDAP-Schema (WordPress Media Library : ldap.svg)

Abbildung 2: LDAP-Schema (GitHub: ldap.svg)

Ldap.svg

Computer: Graphics in MediaWiki

Gehört zu: Web-Authoring
Siehe auch: Vektorgrafiken, MediaWiki, WordPress

Status: Statt MediaWiki verwende ich jetzt WordPress

Graphiken in MediaWikiZeichnungen (Drawings)

Auch in MediaWiki möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

 Upload von Grafiken auf MediaWiki (SVG, SWF, PDF,…)

Damit man Vektorgrafiken auf MediaWiki hochladen kann, müssen einige Einstellungen vorgengenommen werden.

 php.ini

file_uploads = On 
post_max_size = 20M
upload_max_filesize = 20M

 LocalSettings.php

$wgEnableUploads = true    -->  (dann erscheint links die Klick-Zeile "Upload")
$wgFileExtensions = array('png','gif','jpg','jpeg','pdf','svg','swf','mp3','ogg');

Manchmal gibt es Probleme mit der Erkennung des richtigen MIME-Types. Dann kann man folgendes versuchen:

$wgVerfiyMimeType = false;
$wgMimeDetectorCommand = 'file -bi';
in httpd.conf bzw. .htaccess:  AddType image/svg+xml svg

Contine reading

Computer: SVG Vektorgrafiken (aus Wiki)

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

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…?
  • 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

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.

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)
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)

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)

BalancedScorecard-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 Archiv: xyz)

SVG Fließtext - Text Flow

SVG Fließtext – Text Flow

Da hier SVG 1.2 kan 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)

Helloworld.svg

SVG-Grafik Hello World

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

Tageslaenge.svg

 

SVG Beispiel 3: RSS Family

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

Rss-family.svg

SVG Beispiel 4: SWISH Flash Animation

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

Swish_Flash_Animation.svg