Schreibe einen Kommentar

SVG-Images with PNG-Fallback in WordPress

SVG is kind of a big issue since people surf websites with high-resolution tablets and Retina display Macbooks. So, it’s no surprise that a lot of people want to use those files in their projects.

SVG files are vector images (based on XML). They are very small concerning their data size, but can be scaled to any resolution without blurring effects.

When I was working on one of mine and trying to implement SVG-files, I realized that WordPress (even after the latest main update) doesn’t support them. Firstly, you can’t upload those files. Well – this can be fixed easily (I used the lines by Dennis Erdmann). Secondly, if you want to use some intelligent code that show a png-image for older Browsers and the SVG image for newer ones, WordPress constantly deletes those lines. Of course, this only happens when you try to write it within the WP editor. Hardcoding works and it also works in WordPress if you stick to the HTML input and don’t use the visuel editor. However, this wouldn’t work in the long term. I want to use SVG files in the front end the same way I use normal pictures.

I am lazy – so I started searching the web for a quick plugin fix. I found some of them, but after assessing their code and functions, it turned out that they are nothing else than crap. One was adding a huge security breach to your website, the other one had no functionality for any fallback.

[UPDATE December 3rd, 2014: I recently published this solution as an official WordPress plugin. Feel free to use it as usual: ]

Long story short: I wrote a quick and dirty function that is easy to use, powerful and lightweight. I didn’t want to spend any time on writing a whole plugin, so I simply put it into the functions.php of my theme. Afterwards, you will be able to simply upload your SVG files to WordPress and insert them into your posts or pages by using a shortcode. In order to help other people who work with WordPress and need a fast and easy SVG-fix, I am going to share this code here in this post (also my first English one in this blog).


The Code to make WordPress SVG friendly

(simply put it into your functions.php)


How to use the shortcode


You could also use „style“ to set style-elements to the svg-container and „styleimg“ to set style-elements to the image.


I hope this helps!

If you are looking for a SVG editor and don’t have tons of money for Adobe Indesign, check out Inkscape (free) or CorelDraw (cheap).

Der Beitrag gefällt dir? Teile ihn!