Computer: Graphics in MediaWiki

dkracht

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

Status: Statt MediaWiki verwende ich jetzt WordPress

Graphiken in MediaWiki – Zeichnungen (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

 SVG bei MediaWiki

 Rendering von SVG bei Mediawiki

Welche Vektorgrafik-Formate kann Mediawiki problemlos darstellen d.h. “rendern”?

  • SVG: das geht bei MediaWiki bestens (s.u. Beispiele)

In LocalSettings.php:

$wgSVGConverter = 'inkscape';
/** If not in the executable PATH, specify */
$wgSVGConverterPath = 'D:/bin/Inkscape';
/** Don't scale a SVG larger than this */
$wgSVGMaxSize = 1024;

Abbildung 1: SVG ISO Spice (Github: iso_spice.svg)

iso_spice.svg

 

SVG in eine MediaWiki-Seite einbinden

Dies Beispiel stammt von der Seite: RSS.

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

Rss-family.svg

 

SWF bei MediaWiki

  • SWF: das ging bis MediaWiki 1.19 mit einer Extension, die ich aber unter MediaWiki 1.22 noch nicht zum Laufen bekommen habe.

Angeblich soll es so gehen:

  1. Die Extension “swf.php” in den Ordner “extensions” stellen
  2. Die Extension in LocalSettings.php am Ende laden….
  3. Die Datei-Endung “swf” zulassen: $wgFileExtensions = array(‘png’,’gif’,’jpg’,’jpeg’,’pdf’,’svg’,’swf’,’mp3′,’ogg’);
  4. Auf einer Wiki-Seite die SWF-Grafik einfügen per: bbbbb

Schluss

<swf width=”321″ height=”379″>http://localhost/ITIL.swf</swf>

————–

Flash in eine MediaWiki-Seite einbinden

Dazu muss eine MediaWiki-Extension installiert werden. Der Quellencode sieht dann beispielsweise so aus:

<flash>file=Slowfox.swf|width=500|height=400|quality=best|align=none</flash>
<br />
<flash>file=SCC-Provider.swf|width=500|height=400|quality=best|align=none</flash>

Das Beispiel stammt von den Seiten: Tanzen und VersionControl.

<flash>file=SCC-Provider.swf|width=500|height=400|quality=best|align=none</flash>
<flash>file=Slowfox.swf|width=500|height=400|quality=best|align=none</flash>
<flash>file=ssh_configuration.swf|width=650|height=380|quality=best|align=none</flash>

—————–

 PDF bei Mediawiki

  • PDF: das könnte evtl. auch funktionieren…

 Erstellen und Bearbeiten von Vektorgrafik

 Erstellen und Bearbeiten SVG

Vektorgrafiken im SVG-Format kann ich mit der OpenSource Inkscape hervorragend erstellen.

Auch der Adobe Illustrator (CS2) unterstützt das Abspeichern eine Vektorgrafik als SVG.

 Erstellen und Bearbeiten SWFmit SWiSH

Das kann man mit SWiSH machen….. Bei einigen (neueren) SWF-Zeichnungen stürzt SWiSH ab, wenn ich sie öffnen will…

Die alten SWF-Files (aus dem Lexikon) kann ich mit SWiSH gut bearbeiten (z.B. die Schrift von Futura auf Arial umstellen).

Allerdings kann ich mit SWiSH so eine Zeichnung nur wieder im SWF oder SWI-Format abspeichen, was mir nicht wirklich weiter hilft….

Das Produkt Flash Exploit von M-Gate Labs sieht ganz vielversprechend aus. http://swf2svg.3D22Toy.com

Java has experienced an error, most likely due to running out of ram.
Please close this program and run it with a higher ram setting.
java.lang.ArrayIndexOutOfBoundsException: -1

 Konvertieren in SVG

 Alte Vektorgrafiken in PowerPoint (PPT)

Diese können per Cut-and-Paste in den Adobe Illustrator übetragen werden und dann mit “Datei speicheren als….” ins SVG-Format übertragen werden.

Ich kann ganz wunderbar Grafiken aus PowerPoint per “Cut & Paste” in meinen Adobe Illustrator C2 übertragen. Wenn ich das im Adobe Illustrator dann mir “Speichen als…. SVG” abspeichere, macht Adobe da am Anfang der SVG-Datei etwas kompliziertes mit den Namespaces:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="764.121" height="575.469"
	 viewBox="0 0 764.121 575.469" overflow="visible" enable-background="new 0 0 764.121 575.469" xml:space="preserve">

Wenn ich eine solche SVG-Datei mit Inkscape weiterbearbeiten will erhalte ich eine Fehlermeldung…

 Failed to load the requested file Z:\Drawings\Schema 05.svg

Wenn ich eine solche SVG-Datei in MediaWiki mit “Upload file” hochladen will, gibt es ebenfalls eine Fehlermeldung…

** (inkscape.exe:10080): WARNING **: Specified document C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg cannot be opened (does not exist or not a  valid SVG file)
RegistryTool: Could not create the registry key 'SOFTWARE\Microsoft\Windows\CurrentVersion\App Paths\inkscape.exe'
C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg:7: namespace warning : xmlns: URI &ns_svg; is not absolute
<svg version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width
^
C:\Program Files\Windows Server\Bin\WebApps\Site\wikikracht/images/3/35/Server_DB_Baukasten_Schema_05.svg:7: namespace warning : xmlns: URI &ns_svg; is not absolute
<svg version="1.1" id="Ebene_1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width
^

Manuell korrigiere ich die Namespace-Einträge dann wie folgt:

<?xml version="1.0" encoding="utf-8"?>
<svg  version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="764.121" height="575.469"
	 viewBox="0 0 764.121 575.469" overflow="visible" enable-background="new 0 0 764.121 575.469" xml:space="preserve">

Dann funktioniert es mit dem “Upload file” und auch mit Inkscape.

 Alte Vektorgrafiken in Visio (VSD)

Da müsste sich zunächst ein Visio besorgen, oder…?

 Alte Vektorgrafiken in SWF

Da habe ich ganz viele….. aber was mache ich mit denen?

 Examples: Rendering SVG

Abbildung 1: Balanced Scorecard im SVG-Format (Github: BalancedScorecard-4.svg)

BalacedScorecard-4.svg

Basic Balaced Scorecard

Abbildung 2: Path with Arcs (Github: Pathwitharcs.svg)

Pathwitharcs.svg

SVG: Path with Arcs

 

08:08, 1 January 2014 (CET)