Computer WordPress Plugin: Google Drive Embedder

Gehört zu: WordPress Plugins
Siehe auch: Google Drive, SVG-Zeichnungen, Google Apps Login

Ich suche nach einem Weg, wie ich Medien-Dateien (z.B. MP3, SVG, MP4, JPG,…) in meine WordPress-Artikel gut einbinden kann. Also wirklich “einbinden”, nicht “importieren”. Die Dateien werde ich dann irgendwo “hosten”, unabhängig vom WordPress-Provider.

Mit dem WordPress-Plugin “SVG Support” kann ich zwar SVG-Zeichnungen schön in meine WordPress-Artikel einbinden, die Speicherung erfolgt aber in der WordPress-Media-Library – also beim WordPress-Provider. Ich möchte die Speicherung aber unabhängig vom WordPress-Provider vornehmen. So wie ich das schon mit einen Pixel-Bildern mache, die bei Flickr gespeichert sind.

Im ersten Schritt werde ich also meine SVG-Grafiken auf Google Drive speichern. Dabei ist wichtig, welchen meiner Google-Accounts ich dafür verwende.

Im zweiten Schritt möchte ich die auf Google Drive gespeicherte SVG-Zeichnung in einen WordPress-Artikel einbinden. Da zu habe ich das WordPress-Plugin “Google Drive Embedder” installiert. Danach erscheint beim Editieren eines jeden WordPress Artikels in der oberen Leiste eine Schaltfläche “Add Google File” (in der Reihe: Add media, Add slider, Youtube, Add Google File, Flicks, Add Contact Form):

Abbildung 1: WordPress – Add Google File (Flickr: xyz)

WordPress-Plugin

Wenn ich auf diese Schaltfläche klicke, öffnet sich ein Dialog, der mich auffordert, mich mit einem Google-Account anzumelden (identifizieren).
Hierzu ist erforderlich, das ebenfalls das WordPress-Plugin “Google Apps Login” installiert ist.
Falls das Plugin “Google Apps Login” nicht intsalliert ist, erscheint als Fehlermeldung “Please install and configure Google Apps Login plugin first”, wenn es installiert ist, geht es wie folgt weiter:

Abbildung 2: WordPress-Plugin Google Apps Login (Flicke: xyz)

WordPress-Plugin: Google Drive Embedder

Wir klicken auf diesen Link und melden uns bei Google Drive an, mit dem gleichen Google-Account, wie beim Hochladen der SVG-Datei auf Google Drive. Dann werden uns zur Auswahl die “recent files” (was das genau ist, weiß keiner) auf unserem Google Drive angezeigt:

Abbildung 3: WordPress Add Google File (Flickr: xyz)

Wordpress Google Drive Embedder

Bei der kostenlosen Version des Plugins “Google Drive Embedder” kann ich nicht durch meine Ordner bei Google Drive navigieren, sondern kann lediglich aus “recent files” auswählen oder die Suchfunktion benutzen.

Beispiel

Das WordPress-Plugin “Google Apps Login” habe ich unter “WordPress Settings” auf eines meiner Google-Konten eingestellt.

MIt den Google-Konto habe ich mich angemeldet, zwei Ordner neu angelegt: “Music” und “Pictures”.

Dann habe ich in den Ordner “Music”  drei MP3-Dateien und in den Ordner “Pictures” einige JPG-Dateien hochgeladen.

Schießlich habe ich die hochgeladenen Dateien auf “Shared” gesetzt und zwar mit “jeder der den Link hat”.

Beispiel 1: Eine JPG-Datei “netzwerk07.jpg”

[google-drive-embed url=”https://drive.google.com/uc?id=1dtYWRot2-d0q8D30hHNiZZtvKPJmMN-i&export=download” title=”Netzwerk07.jpg” icon=”https://drive-thirdparty.googleusercontent.com/16/type/image/jpeg” width=”857″ height=”537″ extra=”image” style=”embed”]

 

Beispiel 2: Eine MP3-Datei “derloewe.mp3″

[google-drive-embed url=”https://drive.google.com/file/d/1gdiwsDZDpKswK6Elyq3wUramR9EmG2q2/preview?usp=drivesdk” title=”derloewe.mp3″ icon=”https://drive-thirdparty.googleusercontent.com/16/type/audio/mpeg” width=”80%” height=”70″ style=”embed”]

 

 

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

 

Computer Software: InkScape

Gehört zu: Vektor-Grafik
Siehe auch: SVG, Graphics in WordPress, GitHub

Vektorgrafiken mit InkScape

Bereits in meinem Wiki hatte ich einen Artikel zu InkScape begonnen. Hier sind jetzt alle meine Bemerkungen zu InkScape zusammengeführt.

Die Software InkScape

Inkscape ist eine Open Source Software (also kostenlos), mit der man Vektor-Grafiken auf Basis von SVG erstellen und bearbeiten kann.

Inkscape ist eine “Fork” von Sodopodi.

SVG-Grafiken können in WordPress mit einem Plugin eingebunden werden:  SVG mit WordPress.

Ich speichere meine SVG-Grafiken auf GitHub: https://github.com/. Dort habe ich zwei Repositories:  dkracht/drawings und dkracht/svg. Diese können dann einfach per URL in WordPress eingebunden werden.

Die Versionen von InkScape

  • 20200501 Version 1.00
  • 20170104 Version 0.92
  • 20150130 Version 0.91
  • 20070205 Version 0.45

Installation von InkScape

  • Definitive Software Library: InkScape
  • Name: InkScape
  • Version: 1.00
  • Hersteller/Bezugsquelle: https://inkscape.org/de/release/0.92.3/
  • Installations-Ordner: d:\bin\Inkscape
  • Konfiguration: ./.
  • Systemvorassetzungen: Windows,…

Verwendung von InkScape

  • Zur Erstellung von Vektorgrafiken im SVG-Format.
  • Zur Skalierung von SVG-Grafiken auf MediaWiki bzw. WordPress

Zeichnen mit InkScape

Dokument / Zeichnung

Menüleiste: Datei -> Dokumenteneinstellungen  -> Reiter “Seite”  (Portrait/Landscape – A4,…)

Menüleiste: Ansicht -> Zoomfaktor -> Seite

Gerade Linien – Bezier-Kurven – Pfeile

Gerade Linien zeichnet man mit dem Tool “Bezier-Kurven und gerade Linien zeichnen” in der Werkzeugleiste rechts das Symbol “Schreibfeder” unterhalb des Symbols “Spirale”.

Quadrate

Rechteck zeicnen, dabei Taste “Strg” drücken (zusätzlich SHIFT-Taste erhält den Mittelpunkt)

Kreisbögen

xyz

Texte

Sonderzeichen z.B. griechische Buchstaben können in Textfeldern als Unicode eingegeben werden. Dazu nimmt man die Tasten:

  • Strg+U
  • 4-stelliger Unicode
  • Enter

Beispielsweise: delta = <Strg+U> 03B4 <Enter>, phi = <Strg+U> 03C6 <Enter>,…

Texte können auch entlang von Kurven gesetzt werden. Die Kurve darf kein “Shape” sein, sondern muss ein “Pfad” sein.

 

 

Astronomie: Kosmologie

Gehört zu: Astronomie
Siehe auch: Mathematik, Physik, Diagramm, Teilchenphysik, Entfernungsbestimmung, Relativitätstheorie
Benötigt: WordPress Latex-Plugin, Grafiken von GitHub, Bilder von Wikipedia

Kosmologie

In der Kosmologie wollen wir das Universum als Ganzes beschreiben inklusive der Entwicklung vom Urknall bis heute und weiter…
Am Ende kommen wir zum vielgenannten “Standardmodell der Kosmologie“…

Unsere Grundannahmen dabei sind: Isotropie (das Universum sieht in alle Richtungen gleich aus) und Homogenität (das Universum sieht an jedem Punkt gleich aus). Wobei das alles nur bei der Betrachtung sehr großer Skalen der Fall ist.

Expansion des Universums

Einsteins Gleichungen der Allgemenien Relativitätstheorie (ART) haben zwar eine statische Lösung (Einstein – De Sitter Universum), aber die allgemeinen Lösungen erheben ein dynamisches Universum z.B. mit einer Expansion.

Hierzu habe ich einen eigenen Blog-Post begonnen.

Die Friedmann-Gleichung

Auch hierzu habe ich einen eigenen Blog-Post begonnen.

Kosmische Hintergrundstrahlung

Am 15.5.2018 nahm ich an einem Gesprächskreis über die “CMB” (Cosmic Microwave Background radiation)  teil.

Themen waren u.a.:

  • Wie kommt es, dass die kosmische Hintergrundstrahlung (CMB) heute bei uns aus allen Richtungen gleichmäßig (“isotrop”) ankommt?
  • Kann die Fluchtgeschwindigkeit von Galaxien bzw. die Expansionsgeschwindigket des Raumes schneller als die Lichtgeschwindigkeit sein?
  • Woher kommt die Rotverschiebung der Galaxien?

Stichwörter

Da fielen eine Reihe von Stichwörtern, die mir nicht so geläufig waren:

  • Minkowski-Raum d.h. ohne Gravitation  –> Minkowski-Diagramm s.u.
  • Friedmann Gleichung
  • Robertson-Walker-Metrik
  • Roger Penrose “CCC”
  • Steinhardt Princeton

Entfernungen im Universum

In der Kosmologie hat man zwei verschiedene Maße für Entfernungen im Universum (Davis & Lineweaver 2004):

Proper Distance: Entfernung eines Objekts zu einem bestimmten Zeitpunkt. Wegen der Expansion des Universums ändert sich die “Proper Distance” mit der Zeit.

Comoving Distance: Entfernung eines Objekts, die sich mit der Zeit nicht ändert – also die Expansion des Universums “herausgerechnet”. Die “Comoving Distance” wird definiert als identisch der “Proper Distance” zum jetzigen Zeitpunkt. Man spricht auch vom sog. Skalenfaktor a(t), der sich im Laufe der Zeit ändert. Zur Zeit t=heute ist a(heute)=1.

Minkowski  (Raum, Diagramm, Metrik)

Hermann Minkowski (1864-1909) war Mathematiker und lehrte an den Universitäten Bonn, Königsberg, Zürich und hatte schließlich einen Lehrstuhl in Göttingen. In Zürich war er einer der Lehrer von Albert Einstein.

Auf Minkowski geht die Idee zurück, die Welt (wie Lorenztranformation und Spezielle Relativitätstheorie) als einen nicht-euklidischen vierdimensionalen Raum zu verstehen. Wobei er mit  anschaulichen Bildern (grafischen Darstellungen) anstatt mit schwerer verständlichen Formeln arbeitete.

Zwei Begriffe kommen sofort bei “Minkowski” ins Gespräch:

  • Minkowski-Raum
  • Minkowski-Diagramm

Der Minkowski-Raum ist eine “größere Geschichte”: Ein vierdimensionaler Raum mit einer speziellen Metrik, denn in einem Raum möchte man ja Abstände zweier Punkte messen, Länge von Vektoren, Winkel und Flächen bestimmen.  Eine solche Metrik kann man beispielsweise durch ein Skalarprodukt von Vektoren definieren.
Eine einfache Definition der Metrik im Minkowski-Raum ist gegeben durch (“Linienelement”):

ds²  = c² dt² – (dx² + dy² + dz²)

Soetwas schreiben die Oberspezialisten gern als einen Tensor, auch “metrischer Tensor” genannt:  \( ds^2 = g_{\mu \nu} dx^{\mu} dx^{\nu}\) (bei einem Tensor wird “implizit” summiert.)

Ein Minkowski-Diagramm ist eine ganz einfache grafische Darstellung, nämlich ein rechtwinkliges zweidimensionales Koordinatensystem mit einer Zeitachse und einer Raumachse (also der dreidimensionale Raum auf eine Dimension vereinfacht) .
Beobachter, die sich mit konstanter Geschwindigkeit bewegen (Inertialsysteme) haben dann als sog. “Weltlinie” eine Gerade.

Abbildung 1: Weltlinie eines Photons (Github: weltlinie.svg)

weltlinie.svg

Weltlinie eines Photons

Wenn man auf der Ordinate nicht die Zeit selbst, sondern c*t aufträgt, wird die “Weltlinie” eines Photons die 45° Gerade.

Wenn man unser Universum als Minkowski-Raum verstehen wollte, mit einer durch das Linienelement

ds²  = c² dt² – (dx² + dy² + dz²)

definierten Metrik, wäre das ein “flacher” Raum, also nicht gekrümmt (so zu sagen ohne Gravitation).

In so einem Minkowski-Raum, also mit der Minkowski-Metrik, lässt sich die Spezielle Relativitätstheorie (SRT) sehr einfach grafisch darstellen.

Expandierendes Universum

In einem expandierenden Universum kann man eine Metrik definieren durch ein Linienelement:

ds²  = c² dt² – a²(t) (dx² + dy² + dz²)

Mit a(t) als sog. Expansionsfaktor, auch “Skalenfaktor” genannt.

Robertson-Walker-Metrik

Durch die Forderung nach Isotropie erhält man aus den Einsteinschen Feldgleichungen der Allgemeinen Relativitätstheorie (ART) das Robertson-Walker-Linienelement

\( {\displaystyle \mathrm {d} s^{2}=c^{2}\mathrm {d} t^{2}-a(t)^{2}R_{\mathrm {C} }^{2}\left({\frac {\mathrm {d} x^{2}}{1-k\ x^{2}}}+x^{2}\mathrm {d} \Omega ^{2}\right)\ ,} \)

wobei der Krümmungsparameter k = + 1 , 0 , − 1 ist und \( {\displaystyle x=r/R_{\mathrm {C} }}\) .

Urknall: Geschichte des Universums

Abbildung 2: Geschichte des Universums (Wikipedia: History_of_the_Universe_lang.svg)

Notizen zum Vortrag im DESY am 6.2.2020

Siehe auch: Kosmische Hintergrundstrahlung

CMB = Cosmic Microwave Background Radiation, also die Hintergrundsrahlung

Heute messen wir eine Plancksche Schwarzkörperstrahlung von 2,7 K  isotrop

Entdeckt wurde die CMB zufällig (als Störstrahlung) von Wilson & Penzias bei den Bell Labs New Jersey. Sie erhielten den Nobelpreis dafür.

Gleichzeitig haben Astrophysiker im nahe gelegenen Princton das Big-Bang-Modell mit einem mathematischen Modell dargestellt. Dieses Modell sagte eine kosmische Hintergrundstrahlung voraus. Man musste so eine Strahlung nur noch praktisch nachweisen.

Am Anfang war demnach ein “Big Bang”. Das Universum bestand aus sehr heißem Plasma (1032 Kelvin) und kühlte dann aber ab.
Das Universum bestand aus Materie (Protonen und freien Elektronen) sowie aus Strahlung (Photonen).
Die Photonen konnten nicht herausfliegen, weil sie extrem oft mit den freien Elektronen kollidierten.

Solange die Temperatur schön heiß war, konnten die freien Elektronen nicht dauerhaft an die Protonen gebunden werden. Die Bindungsenergie eines Elektrons im Wasserstoffatom liegt bei 13,6 eV, was so ca. einer Temperatur von 3000 K entspricht. Erst bei einer Abkühlung auf ca. 3000 K konnten dann die freien Elektronen an Protonen gebunden werden und sich so neutrale Wasserstoffatome bilden. Man nennt dieses “Rekombination” (obwohl es ja keine “erneute Kombination” war – aber der Begriff ist historisch). Nun gab es nur noch wenige freie Elektronen und der Weg war frei für die Photonen das Plasma zu verlassen.

Damit gab es zum ersten Mal “Licht” im Universum. Modellrechnungen ergaben, das diese “Rekombination” so etwa 380000 Jahre nach dem Urknall geschah.

Genauere Messungen der CMB wurden später mit Erdsatelliten gemacht.

  • 1989-1993 COBE – Cosmic Background Explorer
  • 2001-2010 WMAP – Wilkinson Microwave (im Lagrangepunkt L2)
  • 2009-2013 ESA Planck-Mision (im Lagrangepunkt L2)

Der Satellit COBE hat die CMB bei verscheidenen Frequenzen gemessen und so sehr genau die Kurve eines Planckschen schwarzen Stralers erhalten. Die Temperatur dieses Schwarzen Strahlers (Mikrowellenhintergrund) beträgt 2,735 K

Noch genauere Messungen durch WMAP und Planck zeigten in verscheidenen Richtungen minimale Schwankungen dieser Temperatur.

Abbildung 3: CMB Temperatur Fluktuationen gemessen vom WMAP (Wikimedia: WMAP_2010.png)

CMB Temperatur Fluktuationen gemessen vom WMAP

Wenn man aus diesen minimalen Schwankungen (Frequenz bzw. Temperatur) die bekannten Bewegungen (Milchstraße, Sonne etc.) herausrechnet, bleiben relativ gleichmäßg verteilte kleinste Temperaturschwankungen übrig, von denen man das sog. “Leistungsspektrum” (Stärke der Schwankung in Abhängigkeit von der Winkelausdehnung) analysiert.

Die Astrophysiker haben ein mathematisches Modell entworfen, das die Entwicklung des Universums seit dem Urknall beschreibt. Mit Hilfe der Methode der kleinsten Quadrate kann man die Modellparameter, die die beste Passung ergeben bestimmen. Das ganze nennt sich “Lambda-CDM-Modell”, was auch als “Standardmodell der Kosmologie” bezeichnet wird.

Zu den Modellparametern dieses Standardmodells gehören:

  • Anteil der baryonischen Materie:  4,9%
  • Anteil der “dunklen” Materie:       26,8%
  • Anteil der “Dunklen Energie”:       68,3%
  • Hubblekonstante…

Das Alter des Universums ergibt sich zu 13,8 Millarden Jahren.

Stark vereinfachtes Modell

Dies stark vereinfachte Modell habe ich gefunden bei:  http://scienceblogs.de/hier-wohnen-drachen/2010/09/19/wie-gross-ist-das-beobachtbare-universum/

Nur eine Raumkoordinate: x und eine Zeitkoordinate: t

Messung der Zeit in Sekunden, Messung der Raumkoordinate in Lichtsekunden

Szenario 1:

Wir beobachten 7 Galaxien (n = 1, 2, …, 7), die sich vom Beobachter mit Fluchtgeschwindigkeit entfernen.

Anfangsbedingungen (zum Zeitpunkt t=0):

  • Entfernung vom Beobachter: \( x_n(0) = n \)
  • Fluchtgeschwindigkeit bezogen auf den Beobachter: \( \dot x_n(0) = \Large \frac{n}{4} \)
  • Wir haben also zum Zeitpunkt t=0 eine Hubble-Konstante von \(  H(0)= \Large \frac{\dot x(0)}{x(0)} = \large 0,25 \)

Differentialgleichung (Bewegungsgleichung): \( \dot x_n(t) = \Large \frac{n}{4} \)

Lösung: \( x_n(t) = \Large \frac{n}{4} t + n \)

Damit wäre der Hubble-Parameter in unserem “Vereinfachten Modell”:
\( H(t) = \Large \frac{\dot x}{x} = \frac{\Large \frac{n}{4}}{\Large \frac{n}{4} \cdot t + n} = \Large \frac{1}{t+4} \)

Abbildung 4: Raum-Zeit-Diagramm der 7 Galaxien (Github: Kosmologie-1.svg)

Raum-Zeit-Diagramm der 7 Galaxien

Szenario 2:

Zusätzlich zu Szenario 1 wird zum Zeitpunkt t=0 ein Lichtsignal von Galaxis 7 in Richtung des Beobachters gesendet.

Anfangsbedingungen (zum Zeitpunkt t=0):

  • Entfernung des Signals vom Beobachter: x(0) = 7
  • Geschwindigkeit des Signals in Bezug auf den Beobachter: v(0) = c – Fluchtgeschwindigkeit der Galaxie 7 also v(0) = 1 – (7/4) = – (3/4)

Bewegungsgleichung des Lichtsignals:

  • v(t) = c – Fluchtgeschwindigkeit (x,t)
  • \(  \dot x = 1 – \Large \frac{x}{t + 4}  \)

Abbildung 5: Raum-Zeit-Diagramm der 7 Galaxien mit einem Lichtsignal (Github: Kosmologie-2.svg)

7 Galaxien und ein Lichtsignal

 

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: WordPress: Graphics SVG, PPT, ODG, VSD, SWF

Gehört zu: WordPress
Siehe auch: WordPress Plugins, SVG Grafiken, InkScape, Google Drive, GitHub

Grafiken in WordPress: SVG, PPT, ODG, VSD, SWF

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

Dabei ergeben sich mindestens zwei Fragen:

  • Grafik-Formate: Wie erstelle ich eine Grafik? Kann WordPress die Grafik darstellen?
  • Grafik-Speicherung: Wo werden die Dateien gespeichert?   (WordPress-Host, Flickr, Google, OneDrive,…?)

Für Grafiken, auch Diagramme oder Zeichnungen genannt, gibt es verschiedene Formate:

  • SVG Scalable Vector Grafics
  • PPT Microsoft PowerPoint
  • ODG Grafikformat aus LibreOffice Draw
  • VSD Microsoft Visio – konvertiert zu SVG
  • SWF Adobe Flash – veraltet
  • FLA Freehand

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

Graphics Format SVG

Ich kann ganz einfach SVG-Dateien erstellen, die in WordPress-Artikel eingebunden werden können.

SVG Graphics erstellen

Zum Erstellen und Bearbeiten von SVG-Grafiken benutze ich die Software:

  • InkScape
  • LibreOffice Draw

Einzelheiten dazu unter: InkScape und …

Sonderzeiche z.B. griechische Buchstaben können in Textfeldern als Unicode eingegeben werden. Dazu nimmt man die Tasten: Strg+U -> 4-stelliger Unicode -> Enter. Beispielsweise: delta = 03B4, phi = 03C6,…

SVG Graphics einbinden in WordPress per PlugIn

Eine SVG-Grafik kann einfach über im IMG-Tag in HTML eingebunden werden. In WordPress wird das wie folgt unterstützt.

Das Plugin “SVG Support” ermöglicht es, SVG-Dateien in die WordPress Media Library hochzuladen…

Wenn die SVG-Dateien dann in der Media Library stehen, kann man die “normal” d.h. wie andere Bilder auch, in WordPress-Artikel einbinden.

Die Speicherung der SVG-Dateien erfolgt in diesem Falle also innerhalb von WordPress in der WordPress Media Library d.h. beim Web-Hoster.

Abbildung 1: Beispiel einer SVG-Grafik (WordPress Media Library: Agility.svg)

SVG Upload

Source: https://wordpress.org/support/topic/svg-upload-not-allowed

SVG upload not allowed?? (9 posts)

  1. I’m trying to put an SVG image into a post, but I can’t upload it.

    “Harajuku map.svgz” has failed to upload due to an error
    Sorry, this file type is not permitted for security reasons.

    What gives?! It’s just an image!

  2. You can overcome the security warning by adding this to your current themes functions.php file.

    add_filter('upload_mimes', 'custom_upload_mimes');
    
    function custom_upload_mimes ( $existing_mimes=array() ) {
    
    	// add the file extension to the array
    
    	$existing_mimes['svg'] = 'mime/type';
    
            // call the modified list of extensions
    
    	return $existing_mimes;
    
    }

    Then you should be able to upload files with an .svg extension

     

SVG Graphics in Google Drive speichern

Man kann SVG-Grafiken aber auch woanders als beim WordPress-Hoster in der dortigen WordPress-Media-Library speichen, z.B. auf Google Drive.

Dateien von Google Drive kann man mit dem WordPress-Plugin “Google Drive Embedder” dann wiederum in WordPress-Posts einbinden.

SVG Graphics in GitHub speichern

Man kann SVG-Grafiken aber auch auf GitHub speichern.

Solche SVG-Dateien von GitHub kann man dann einfach in WordPress-Posts einbinden über “Add Media” und “URL”.

Graphics Format PPT

xyz

Graphics Format ODG

xyz

Graphics Format VSD

VSD-Grafiken stammen aus Microsoft Visio. Ich konnte viele Grafiken aus PPTs leicht als VSD-Grafiken kopieren und abspeichern (dank an Microsoft).

Heute konnte ich feststellen, dass LibreOffice Draw solche VSD-Dateien direkt öffnen kann. Wir können sie aus LibreOffice Draw dann Exportieren als SVG bzw. abspeichern als ODG.

Alle VSD-Dateien wurden so konvertiert. Stand 13.2.2020.

Graphics Format SWF

Dieses Format ist veraltet und wird auf meinem WordPress durch SVG ersetzt.

Plugin Method

Source: http://www.wpbeginner.com/wp-tutorials/how-to-embed-swf-in-wordpress-posts/

First, you need to download and install Easy Flash Embed Plugin for WordPress. This plugin is so simple that no settings are even added to your admin menu. All you have to do is used a shortcode when you are creating your posts like this:

1 [swf src="http://www.example.com/my-flash-file.swf" width=300 height=100]

Simply replace the src attribute with a link to your flash file and adjust height and width accordingly.

Download Easy Flash Embed plugin.

[swf src=”/wp-content/uploads/2016/08/Agility.swf” width=300 height=300]

Agility

Code Method

For those of you who would like more control over your code we are now going to show you how to embed flash files directly into your WordPress posts, pages, or even themes. Although people have come up with numerous methods for doing this over the years the easiest and most standards compliant way is to use the <object> element.

The final code looks like this:

01 <object id="flashcontent"
02         classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
03         width="550px"
04         height="400px">
05   <param name="movie" value="mymovie.swf" />
06  
07   <!--[if !IE]>-->
08   <object type="application/x-shockwave-flash"
09           data="mymovie.swf"
10           width="550px"
11           height="400px">
12   <!--<![endif]-->
13  
14     <p>
15       Fallback or 'alternate' content goes here.
16       This content will only be visible if the SWF fails to load.
17     </p>
18  
19   <!--[if !IE]>-->
20   </object>
21   <!--<![endif]-->
22  
23 </object>

Note that you are using 2 <object> elements. The outer element is targeting Internet Explorer while the inner element is for all the other browsers. You can change your fallback text if necessary. You can also add extra <param> options like wmode or allowScriptAccess.

P.S. you should always use wmode=transparent, so your embed doesn’t override existing content such as a floating bar. Check out our article on how to prevent Youtube oEmbed from overriding content.

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Vektorgrafik
Siehe auch: Graphics in WordPress
Benutzt: Grafiken aus Github

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> 

Abbildung 4: Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext:

Flow-2.jpg

SVG-Grafik mit Fliesstext

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

Computer: VektorGrafik (aus Wiki)

Formate für Vektor-Grafiken (aus Wiki)

Gehört zu: Grafik-Formate
Siehe auch: SVG, Flash, Libre Office Draw, Visio, PowerPoint

Wieder einmal fragte ich mich, in welchem Format und mit welchem Tool ich eigentlich Vektorgrafiken machen will/sollte, die ich viele, viele Jahre benutzen will.

Format SVG

Zuerst versuchte ich selbstverständlich SVG da dies als “offener” W3C-Standard am interessantesten schien.

Die SVG-Tools erschienen mir aber nicht sehr stabil.
Interessant war der SVG Bezier Animator namens beez (http://beez.sourceforge.net).
Auch das Tool SodiPodi 0.32 (http://sourceforge.net/projects/sodipodi/) war interessant, aber noch nicht richtig ausgereift.
Einzig Adobe Illustrator 10 ist sicher stabil, kostet aber richtig und gefiel mir eigentlich nicht bezüglich der Speicherung im SVG-Format – das war sehr proprietär (Adobe)…

Sodopodi wird nicht mehr weiterentwicklt. Eine erfolgreiche Abspaltung (sog. “Fork”) von Sodopodi ist Inkscape
Microsoft: PowerPoint oder Visio Wenn einem gar nichts solides schönes zu Vektorgrafiken einfällt, kann man sicher Microsoft PowerPoint oder auch Microsoft Visio nehmen.

Format Flash

Aber Flash (SWF) ist ja auch noch ein schönes Format. Das FLA-Format ist zwar proprietär (Macromedia, Adobe), das SWF-Format aber OPEN. Als Tool gibt es Macromedia Flash: das ist teuer und kompliziert. Da habe ich das sehr verbreitete Tool SWiSH ausprobiert und muss sagen: OK das probiere ich mal ein paar Wochen als Testphase aus.

<embed height="380" width="250" src="http://blog.kr8.de/files/slowfox.swf" wmode="transparent" />



Für WordPress gibt es ein Plugin names "Easy Flash Embed" damit kann man SWF-Dateien ganz einfach in WordPress-Artikel einbinden:

[swf src=”http://blog.kr8.de/files/Grizzly.swf” width=300 height=100]

ENDE