SVG and WordPress

Palladio is a lovely visualization tool, with the ability to export graphs to svg and save your work. But using it posed a new question: how the heck do I display an svg file in a WordPress post without digging into the CSS or php?*

I tried installing two plugins, one of which allowed me to upload an svg file as media but did not make it appear when added to a post. The other plugin broke the public side of my WordPress install. So then I uploaded the file to my server space outside of a CMS and copied the html code from a support forum post, which displayed the image but at very large size:

<object width=”300″ height=”150″ type=”image/svg+xml” data=”[url]”>Your browser does not support SVG</object>

I went poking around and found a list of ways to add SVG to a web page. As I’d already uploaded the svg file somewhere other than WordPress’ media library (since svg isn’t an allowed type), I tried just using an img tag. Reference this list to see which browsers and versions support svg in the html image tag. And success, of a sort. The image at least scaled down (the large amount of white space at the top is part of the original image).

It’s not exactly elegant, but it worked. Next test is to re-install the plugin which allows me to upload svg files and see if hand writing the code instead of using the Add Media function will work.

*Although I am capable of editing core files, I wanted to see if there was a way of displaying the svg file without having to mess with those files, for a variety of reasons.