Computer: WordPress: Graphics SVG, PPT, ODG, VSD, SWF

dkracht

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.