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

Gehört zu: WordPress

Grafiken in WordPress

Auch in WordPress-Artikeln und -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.

SVG Graphics

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 Embedding


SWF Graphics

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


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" />
07   <!--[if !IE]>-->
08   <object type="application/x-shockwave-flash"
09           data="mymovie.swf"
10           width="550px"
11           height="400px">
12   <!--<![endif]-->
14     <p>
15       Fallback or 'alternate' content goes here.
16       This content will only be visible if the SWF fails to load.
17     </p>
19   <!--[if !IE]>-->
20   </object>
21   <!--<![endif]-->
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.

Other Graphics: ODG, VSD, PPT