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

Gehört zu: WordPress

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

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

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

SVG Upload


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 per Plugin

In WordPress installiert man das Plugin “SVG Support”, dann kann man seine SVG-Grafiken einfach in die WordPress-MediaLIbrary hochladen und dann “normal” verwenden.

SWF Graphics

Plugin Method


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:


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

Download Easy Flash Embed plugin.


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