Tuesday, August 06, 2013

Making SVG Work with Blogger

If you've had problems with SVG in Blogger (or any other web pages), here are some things I've learned the Hard Way. The test image below (which you won't be able to see in Internet Exploder; upgrade to a modern browser, please) comes from inline SVG markup, incidentally.
First, when you try to insert an SVG image the usual way, by using the image-insert feature, quite often SVG isn't a recognized format. Blogger, for example, expects images to be GIF, PNG, JPEG, etc. If you try to "place" an SVG image in your blog, the upload won't be accepted.

Shame on Google.

But that's okay, because SVG is just markup, right? And you can put markup inline with your HTML using the edit-raw-HTML mode of the editor widget. It turns out all browsers except Internet Exploder honor raw SVG embedded inline in HTML. For an example, see the source code for this page (the above image was inlined).

But there's a problem. Blogger's editor widget, upon seeing any self-closed tag that it doesn't recognize, such as <g/>, will try to convert it to <g></g>.(even though self-closing tags are perfectly legal, and Blogger itself honors such examples as <br/>.) What's worse, though, is that if Blogger encounters a run of self-closing tags, such as

<use xlink:href="#123" x="1" y="2"/>
<use xlink:href="#123" x="14" y="23"/>
<use xlink:href="#123" x="51" y="52"/>

it will try to convert it to

<use xlink:href="#123" x="1" y="2">
<use xlink:href="#123" x="14" y="23">
<use xlink:href="#123" x="51" y="52">

which is, of course, wrong, because this creates nested elements where no nesting existed before.

Nine times out of ten, inlined SVG just doesn't render properly in Blogger pages. (And usually, it's because of the problem I just mentioned: self-closing tags.) Bigtime Fail.

The answer is to expand every self-closed tag in your SVG to formal end-tag form—which is impracticable to do by hand in anything but a trivially small SVG file.

I took a crack at solving this problem using regular expressions. The idea is to write a regex that matches self-closing tags, then use the String replace() method to fix everything. It took me an hour of messing around to stumble onto a solution. The code seems to work, although I can't guarantee it's formally correct or will work in every single case.

The regular expression I came up with is:

  var globalPattern =

This charming little monstrosity tries to match an angle bracket followed by an element name composed of any combination of letters and numbers and hyphens (all legal in XML), followed by anything that's not a forward slash or a closing angle bracket; and then finally it looks for the closing bracket.

To apply this to an SVG page that's loaded in the browser, you have to get the raw source for the page, which isn't hard to do, programmatically, providing you know the following trick:

 function getMarkup( node ) { 
   return new XMLSerializer().serializeToString( node );

Pass document.getElementsByTagName("svg")[0] to this function and you'll be just fine.

Now you need a function that will transform your raw markup to formal closing-tag form. This is what I came up with:

function fixSelfClosingTags( markup ) {

  var globalPattern =
  var pattern =

  var count = markup.match(globalPattern).length;

  for(var i = 0; i < count; i++){
     var len = markup.match( pattern )[0].length-2;
     markup = markup.replace( pattern, markup.match(pattern)[0].substring(0,len) + 
         "></" + markup.match(pattern)[1] + ">");

  return markup;
Okay, so it isn't pretty. It's the best I could come up with (that seems to work) on short notice.

Once you've converted your SVG to formal closing-tag syntax, it can be inlined in a Blogger (or other) web page, and it should render just fine.

Too bad Blogger doesn't make it easier for you to use SVG. Scalable Vector Graphics has been around for almost 20 years. It's time for it to be granted first-class web citizenship, don't you think?


  1. Thanks for the hints.

    We'll try to set up a Public 'svg -> converted to Blogger' page.
    If successful, will post it here.

  2. I love SVG files and found this article while googling how to add them to a blog (I have seen plenty SVG images online and I had just assumed that you should be able to add them). This, however, has blown my mind. More complicated than I would have liked, but I might give this a try some day!

  3. http://www.indotheta.com/2017/01/pengertian-lengkap-sistem-informasi.html

  4. i have read fully about your posted information. i got some useful ideas from yours. as a web design supporter i got how you are managing effect of school developemt and manging puipil. keep follow more information from yours.
    New Zealand education Consultants in Chennai

  5. Thanks, I like the way you explain things...a couple of sentences with clarification and examples. It makes it easier for me to understand.

    1. Oh yeah, I especially like how you noted the pitfalls you run into and how to fix them...I, of course, ran into the same ones you mentioned.

  6. Excellent information. Very interesting to read. I really love to read such a nice post.
    infinite logo design
    logo design app

  7. Ready for an upgrade, there are Yola also money by immediately best dishwasher boil down to individual preference, best rated dishwashers all the most up to date bells as well as whistles. dishwasher reviews choose a dishwasher with a decibel ranking official website dishwasher also includes a self-cleaning filter.


Add a comment. Registration required because trolls.