Embedding SVG in Wordpress Posts

Jeff just put up some web stats made pretty by graphs done with SVG. He's also got a way of embedding SVG into an HTML page that shows up in most browsers. For many browsers an object element is enough but Internet Explorer with Adobe SVG Viewer 3 requires an embed tag to work properly. I think that's the gist of it. Jeff's got a good snippet of code to handle this, but it's kind of ugly and not convenient to use in a blog post.

He showed me a sample page with the graph embedded (not done in Wordpress) and it was too cool to let it go. I've been fooling with some plugins for Wordpress (1.5.2 I think) lately, so I though I might have a fix for his posting problem. What I came up with is a plugin that lets the author use a special tag, <svginlay />, to refer to an external SVG file. When the post is displayed, the plugin uses a filter to replace the <svginlay /> tag with some HTML that will render the SVG image properly on a lot of platforms. Everything up to here happens on the server side in PHP. Note that the post is stored in the database with the svginlay tag in it. This is good because it can be picked out and changed later if there's a 'better' way to portably embed SVG. The actual HTML that's inserted into the page has some browser and feature detection stuff that includes Javascript, an embed and an object. That part will do what's needed on the client side (at least for current Firefox, IE and Opera browsers).

If you want to see it, click here to get the source.

Caveat Emptor of course, this plugin is breakable. In particular you could easily stick something in an attribute that messes up the string that shows up in the Javascript code for IE. If you put something it doesn't like in for an attribute or an attribute value then the regex might not even pick up the tag and it won't get replaced.

To use the plugin, copy the PHP file into your WordPress plugins directory and rename it to svginlay-tag.php (just take off the '.txt' extension). Then go in to your admin panel and activate it. Now you can use the <svginlay /> tag in your posts. The syntax immitates HTML but it might be more fragile: <svginlay src='document.svg' nosvg='Text to display if SVG is unavailable.' [additional attributes] />

  • The src attribute is used to specify the SVG document. The plugin copies this into the src attribute of the embed element and the data attribute of the object element.
  • The nosvg attribute is text that's written if the embed or object can't be displayed. It's also shown if Javascript is unavailable. The default text is a paragraph with the words "SVG inlay image not available."
  • Any other attributes will be copied to a div that contains the SVG document.

Here's an example of how to use it:

<svginlay xsrc="/files/2005/effects-tutorial-1-step-9.svg" src="/files/2005/effects-tutorial-1-step-9.svg" nosvg="failed" class="mosvg" style="width: 80%; height: 400px;border: 1px blue solid;" />

failed

In this example, a user without SVG would see the red border of the div with the text "failed" in it. View the source of this page to see the code that's inserted.

One thing I really want to add is more complete handling for alternate content. I don't see a way with this version to put in a static image for viewers without SVG. If I get it soon then I'll update here. Any suggestions are also welcome.

And finally, why 'inlay'? Because all the other good words were taken.

2.867645
Your rating: None Average: 2.9 (68 votes)

[...] After Rob called my code ugly, I decided to update my technique for embedding SVG into HTML and it finally crystallized into a nice solution for me. I hesitate to say &#8220;embedding&#8221; because that might imply that I condone the &lt;embed&gt; tag, when in fact I only use it at gunpoint. Rob came up with a suitable term for including SVG in a HTML document: inlaying (as opposed to inlining). [...]

[...] For now, I&#8217;m using a seriously stripped-down version of his cards in my playable demo: Solitaire. I thought I&#8217;d use Rob&#8217;s new WP plugin to inlay the SVG into my blog: [...]

Really informative post, thanks, i really wanted to know about SVG

Really interesting way of embedding SVG. I tried that my self a couple of times and I ran into some problems. Thanks for the info...

using

gives me

Fatal error: Call to undefined function domxml_open_mem() in /var/www/web39/web/wp-content/plugins/svginlay-tag.php on line 93

anyone has an idea wy?
tnx in advance

Have a look at replace_tags_callback(), I think you can change the if (0) to an if (1) to make it work in your version of PHP. I should be doing PHP version detection there but it looks like I was lazy again.

The DOM XML method I used for PHP 4 is not available in PHP 5 so most likely that's the source of your problem but the alternative I've got in there could work for you. It's also possible (though less likely) that you haven't got the needed PHP modules for processing XML.

hth

svginlay doesn't work anymore because the editor in WordPress (2.5) removes unknown tags from the HTML code. Do you plan a version with [svginlay] tags instead of ?
Thanks

Philippe

That's a bummer. There must be a way to avoid stripping tags. I'll look in to it but I'll have to upgrade my Wordpress first.

An update on this plugin... I've moved to Drupal and have started reworking this Wordpress plugin into a Drupal module for my own needs. I might still be able to maintain the Wordpress one too. The links in this post are still valid and point to the Wordpress version.