John Smith's Blog

Ramblings (mostly) about technical stuff

What's the best way of including SVGs in a responsive web page?

Posted by John Smith on

TL; DR: <object> seems the best bet - although Safari 5.1 has issues compared to the other browsers. Second choice is having the SVG inline in the HTML, but that has issues for WebKit and IE.

As a diversion from my more usual diet of Python, I've spent a fair bit of time over the past week or so revisiting SVG. My previous experiments have usually been done using fixed sizes, but I've always wanted to do something that fits in better with what these days is called "responsive design", especially given as these are supposed to be scalable vector graphics.

For an example of the sort of thing I've been aiming for, take a look at the main chart on a Google Finance page. This Flash chart resizes horizontally as you change the size of the browser window. (NB: the chart makes extra data visible as you make the browser window wider, which isn't exactly what I want, but you should get the idea.)

Unless I've been particularly boneheaded about the way I've investigated this, this isn't as straightforward a problem as it first seemed. If you put a regular bitmap image in an HTML page with something like <img src="whatever.png" width="100%" /> the image will scale as you'd hope when the browser window is resized. This isn't necessarily the case with SVG.

As outlined in the W3C docs, there are five ways that you can pull SVGs into a page in a modern browser:

  • <embed>
  • <frame> / <iframe>
  • <object>
  • <img>
  • Inline <svg>
(You can also create an SVG via DOM function calls, but I'm not particularly interested in that approach right now.)

I've built tests for each of these, and run them through the latest versions of the five main browsers. This obviously ignores a lot of issues with older browsers and mobile browsers, many of which don't even support SVG at all, but as it turns out, the "big 5" are enough to worry about on their own :-(

In the following sections, when I refer to a particular browser, the tests were done in the following versions, which (AFAIK) are the current ones as of early April 2012:

  • Firefox 10
  • Opera 11.62
  • Chromium 17 or 19 (I didn't notice any difference between the two
  • Internet Explorer 9
  • Safari 5.1
Where relevant, issues are illustrated with screengrabs from the Windows version of a browser, but much of my testing was done with Linux versions - except in the case of IE and Safari. I also tested whether JavaScript functionality worked - both within the SVG itself, and from the enclosing document trying to manipulate the SVG.

Just for clarity's sake: all of this messing around is (probably?) only needed if you want an SVG to be scalable within your web page. If you're happy for it to be a fixed size, then you shouldn't have to worry about any of the following stuff.


Test link:

The image gets scaled correctly in Firefox, Chromium and IE. The image does not get scaled correctly in Opera or Safari.

Screengrab of SVGs using the embed tag in Opera 11.62 Screengrab of SVGs using the embed tag in Safari 5.1


Test link:

(I've assumed <frame>s behave the same; I couldn't be bothered to write a separate test for them.)

Only Chromium rendered the page completely as desired. Screengrab of SVGs using the iframe tag in Chromium 19

IE and Safari both failed to scale the images properly, but were able to modify the SVGs from the enclosing document's JavaScript. Screengrab of SVGs using the iframe tag in IE9 Screengrab of SVGs using the iframe tag in Safari 5.1

Firefox and Opera failed to scale the images, or modify them via the JavaScript in the enclosing document. I'm not sure if the JS issue is down to some DOM API difference and/or security problem - but as the scaling is broken, I couldn't be bothered to investigate further. Screengrab of SVGs using the iframe tag in Firefox 10 Screengrab of SVGs using the iframe tag in Opera 11.72

(All browsers did at least run the JavaScript contained within the SVG files.)


Test link:

Only Safari lets the side down, by failing to scale the SVGs. All other browsers work as desired. Screengrab of SVGs using the iframe tag in Safari 5.1


Test link:

If you have any JavaScript-based interactivity, forget about using <img> tags - the JS in the SVGs won't be run, and the JS in the document doesn't do anything either. WebKit-based browsers also have weird issues with additional padding and squashed images. You might hope that the preserveAspectRatio might be able to solve that, but I was unable to find any value which fixed things. Screengrab of SVGs using the img tag in Chromium 19 Screengrab of SVGs using the img tag in Safari 5.1

Inline <svg>

Test link:

This method is what the BBC uses for the position chart in its football tables, which is the highest profile use of SVG in a mainstream site that I know of.

Scaling works in all browsers, except IE. Screengrab of SVGs using inline SVG in IE9

However, WebKit browsers suffer from excessive vertical padding - it seems that WebKit assumes the height of the image is the same as the browser window, rather than the viewBox attribute in the <svg>. A slightly messy fix is to manually alter the height of the SVG elements after the page has loaded - this wasn't incorporated into this particular test, but an example from another test is here, and other people have documented similar workarounds. There are some open bugs on the WebKit tracker that might be related, here and here. Screengrab of SVGs using inline SVG in Chromium 19 Screengrab of SVGs using inline SVG in Safari 5.1

Whilst doing some earlier tests in this area, I also found a couple of bugs in Opera where

  • An HTML5 page wouldn't properly render, and would never trigger the load event - but an effectively identical XHTML page was fine. Warning: this bug also causes Opera to consume 100% CPU on the processor it is running on Screengrab showing bug in Opera in HTML5 page with embedded SVGs
  • If a page had multiple copies of the same SVG pulled in via the <img> tag, then if the page was reloaded, most of the duplicates would not appear: Screengrab showing bug in Opera after a page with duplicate SVGs is reloaded
Both of these have been reported to Opera via the tool built into their browser


As can be seen, of the five methods available, none is 100% foolproof. It seems to me that the best bet is <object>, as it works fine on all browsers except Safari, without need for JavaScript hacks. Second-place is embedding the SVG into the HTML, which entails a simple hack for WebKit browsers - but unfortunately is still broken in IE.

Thoughts on Windows 8 Consumer Preview

Posted by John Smith on

Microsoft released a "Consumer Preview" of Windows 8 last week, and I thought I'd download it and take a look, as it's the first version of Windows that I've ever had any curiosity about, mainly due to the new Metro UI.

I've only spent a few hours playing around in a fairly aimless manner, so this is by no means a thorough review. In general, I agree with most of the points made in this Orlowski piece at The Register, but this post will cover a few things I found of note.

(Just for background, I'm far from being a Windows aficionado or regular user - whilst I have a desktop, laptop and netbook with Windows 7, those machines spend most of their lives running some form of Linux, whether natively via dual-boot, or in a virtual machine. With regard to the Metro UI, I've never used Windows Phone 7 - in fact, I've only ever seen it being used once in the wild - and I really don't like how it it has been implemented in the latest Xbox 360 dashboard update. In fairness, most of the problems I have with the Xbox 360 implementation are far more to do with how MS have prioritized ads and general media over games, which doesn't have anything do with Metro per se, and would easily be resolved if the dashboard was configurable.)

  • I've only tried Win8 in a VirtualBox VM running atop Windows 7. For some reason I'm only able to run it in a limited number of resolutions, none of which are the native resolution of my monitor. Not quite sure whether this is the fault of Win8 or VirtualBox - it's the first time I've used the latter, normally I use VMWare for all my virtualized environments. (In a similar vein, I was unable to get USB memory sticks or external hard drives to be recognized, and I don't know where the fault lies.)
  • The login page confuses the hell out of me. It's super-minimal, which isn't a problem, but most of the time when I click the mouse on the login screen, all that happens is that the screen scrolls up and then back down by about half-an-inch. The same happens if I double-click, long-click, middle-click or right-click. Nothing happens if I hit the Windows key (which is used heavily in Win8, see later point). I've just discovered that pressing the Ctrl key, or rotating the mouse wheel, brings up the password prompt - prior to that point I'd just been randomly moving the mouse around and clicking until I triggered some magical gesture. Screengrab of the Windows 8 login screen
  • MS seem to push you towards using authentication based on Windows Live/Hotmail/Microsoft Live/whatever-they-brand-it-this-week accounts. This isn't necessarily a bad idea, but one thing that I'm not a big fan of is that they suggest that people might want to create a Windows account with the same name as their regular email account. From my experience on a project using Google accounts, where we suggested people might want to create a Google account named "" or "", this just leads to user confusion, as people mentally associate a particular account with a particular service. (Theoretically the same should apply to stuff like Amazon accounts, but the same issue doesn't really apply for various reasons. Probably something for a different post...)
  • MS seem to be really pushing Metro over the "traditional" Windows UI, but I'm really not sure how it's going to scale. I did a completely clean install, and just added Firefox, Opera, Safari+QuickTime and TortoiseSVN, and already the Start screen is full of crap and has more items than will fit on screen at once: Screengrab of Windows 8 start screen Note that in the above shot, I'd already reduced some of the boxes that default to double width (such as Weather and Calendar) down to single width. I'm not sure why the "packer" automatically moved some items into the space that was freed when I did that, but hasn't moved Music - the items can be manually dragged, but it seems odd that it sometimes works automatically and sometimes not.
  • That "submenu" items such as those for TortoiseSVN or Apple Software Update have appeared in the top menu seems incredibly lame. Again, they can be manually removed from the Start screen, but (a) I don't know why users should have to manually get rid of all the crap that a newly installed application might have added without asking, and (b) I'm not sure how easy it would be to find/restore such deleted items. (There doesn't seem to be any sort of application specific context menu associated with each box.
  • Metro applications launch full screen, and have no window controls. This meant that I was scratching my head trying to work out how to escape from an application. In the end I had to resort to a Google search, and found that (a) I wasn't alone in being confused, and that (b) the answer is to press the Windows key. I imagine the proper version of Windows 8 will have some sort of introductory tutorial that explains this to new users, but I foresee a lot of confused people stood at demo units in PC World wondering what the hell they're supposed to do next...
  • By comparison, losing the "start" button in the regular UI is actually less painful than I was expecting - with one caveat. I'm sure that it'll probably be fine on a regular desktop, but as I've had to run Win8 in a VM in a window much smaller than my overall screen, the experience was a tad fiddly.
  • One other minor point about Metro pushing the Windows key - MS seem to be very pleased with the new Windows logo they've come up with, and compared to some of the gouge-your-eyes-out rebranding monstrosities that come out, I'd consider it perfectly OK. However, they're up against millions (billions?) of existing keyboards that are sending a very different message about what the Windows logo is. If I had to tech support over the phone to non-technical people such as my parents, I'd expect to have to describe to them what "the Windows key" is, and the first description is "it looks like a flag", which the new logo doesn't.
  • Probably the most useful thing for me in Win8 is having IE10 to test. As yet, I haven't actually used it very much, so I don't know how comparable it is to the rest of the browser market. (Personally I consider IE9 a very weak release, far behind the rest of the pack - probably closer to Firefox 2 than 3. The summary page at agrees with me.) What is a bit odd though, is that in many ways there are two IE8 browsers: the one for the "traditional" Windows UI, and the one for Metro. Screen grab of IE10 browser running in the 'regular' Windows UI on Windows 8 Moving the browser chrome down to the bottom in Metro is a non-issue. Moving the "forward" button to the far right, rather than being adjacent to the "back" button, and losing the "home" & "bookmarks" buttons, are very questionable. But refusing to play Flash content on a machine that has Flash installed and working is absolutely batshit insane. Screen grab of IE10 browser running in the Metro UI on Windows 8 As an avowed Flash-hater, on one level I do want to welcome yet another nail in its coffin. However, this puritanical refusal to do something that the machine/OS/browser is clearly capable of, seems very user-hostile. I was aware that Flash and other plug-ins were not going to be available in some versions of Windows 8, but I'd assumed it was just going to be the ARM/mobile versions, which makes perfect sense. I guess that MS have decided though that they want to try to have a consistent experience across all Metro platforms, which is admirable in some respects. But given the failure though of non-iPad tablets, I would expect the ARM/mobile part of the overall Win8 user base to be a drop in the ocean for the foreseeable future, so making the experience worse for the 9x% of people on desktop/laptop machines just so the tiny fraction of people on ARM/mobile don't feel left out, strikes me as misguided.
  • There are also a few other "WTF?" things with IE10, that I've not personally experienced, but which are documented here. I do find it telling that that piece is (at best) neutral in tone, whereas Thurrott is normally "rah rah, isn't this great" about the vast majority of stuff that MS do...
  • Not that I was expecting anything, but the continued absence of any bread-and-butter tools like ssh or even telnet is very lame. I suppose that they are too Unixy for MS, and they'd rather not let on that there's an alternative to the world of Windows out there ;-)

Obviously, this is just a preview release, and it makes sense for MS to try out new ideas that might not work out, and which they can easily pull in the official release. Certainly Metro looks nice, and feels less cliched than OS X's brushed steel. (Although given that I mostly use Linux and Xfce, and turn off desktop wallpapers, fancy transitions (e.g. compiz) etc, my opinions on aesthetics probably shouldn't be paid too much heed ;-) Personally, it offends me far less than GNOME 3, the 2011 Google redesign, or OS X Lion - but that's probably because I don't have any great investment in the world of Windows. I do think that such radical changes for a product such as Windows are very "brave", but that's a subject I might elaborate on in another post, as this one is already more than long enough.

About this blog

This blog (mostly) covers technology and software development.

Note: I've recently ported the content from my old blog hosted on Google App Engine using some custom code I wrote, to a static site built using Pelican. I've put in place various URL manipulation rules in the webserver config to try to support the old URLs, but it's likely that I've missed some (probably meta ones related to pagination or tagging), so apologies for any 404 errors that you get served.

RSS icon, courtesy of RSS feed for this blog

About the author

I'm a software developer who's worked with a variety of platforms and technologies over the past couple of decades, but for the past 7 or so years I've focussed on web development. Whilst I've always nominally been a "full-stack" developer, I feel more attachment to the back-end side of things.

I'm a web developer for a London-based equities exchange. I've worked at organizations such as News Corporation and Google and BATS Global Markets. Projects I've been involved in have been covered in outlets such as The Guardian, The Telegraph, the Financial Times, The Register and TechCrunch.

Twitter | LinkedIn | GitHub | My CV | Mail

Popular tags

Other sites I've built or been involved with


Most of these have changed quite a bit since my involvement in them...