thoughts on SVG for icons in websites

My CMS uses FCKeditor for a lot of the text-editing fields.

When the editor is being loaded, there is a very noticeable lag while the various icons are loaded up. The average editor has about twenty separate icons. Each one of those represents a request to the server. Even if the icon is already loaded, the browser makes a request anyway, to see if a newer version is available.

That’s bloody awful! Even with broadband, it’s not good. The ideal would be that there are only three requests – one for the JavaScript, one for the CSS, and one for the images. Instead, there are about thirty, comprising the icons, the CSS, and the JavaScript.

There is one easy way to fix this – get all the icons, paste them all into one large bitmap, and use CSS to display the appropriate cropped part of the bitmap as needed. The unfortunate part of this method is that all icons must be located at predictable locations and have predictable sizes. This could be a mistake, if you want to display the toolbar with different themes, which may have different-sized icons.

But – there’s another way which would be useful for much more than just FCKeditor: what if all the icons were provided in one file as sections of SVG? With SVG, the locations of the icons in the file are not a problem, and the icons are whatever size you want them to be.

So – I believe that SVG may be the answer to the problem.

However, as far as I know, not many browsers natively support SVG. Firefox does recently, and I think Opera does as well, but IE (the most popular one) doesn’t, and even Konqueror, which I’m writing this in, only supports it if you specifically compile it in. (don’t bite my head off if I’ve got something wrong in this paragraph – it’s all voodoo anyway)

So, a workaround must be built for those browsers that don’t support SVG. I think that workaround is to figure out whether the browser supports SVG, and if it doesn’t, then the SVG should be loaded via Ajax, and drawn dynamically using a library such as the JavaScript Vector Graphics Library.

Anyway… there y’are. Just an idea. I’m not promising that I’ll do this any time soon, but you never know – I may just sit down and write it. If I’m lucky, I may be able to convince the boss that the project is worthwhile (which it is), and will be allowed to do it during work hours (I’m usually too tired outside of that time to get anything done).


  1. Alternatively, the icons could be encoded as “data:” URLs for browsers like Firefox and Opera that support them. This is less work than reauthoring the icons as SVG.


  2. @ Phillip Bogle:

    Well, I suppose, that the CMS should also work with so called Browsers that do not support “data:” URLs, namely IE. Any Optimization that only work with Firefox and Opera is nice, but will not be noticed by most users.

    I guess that for displaying Icons a rather simple subset of SVG would be enough.

  3. Yes. I haven’t studied it, but I was aware of it. You know, implementing SVG in JavaScript may be easier than it seems! Because of that IE hack, and Canvas support in Konqueror and Firefox, it looks like this is going to be pretty straightforward!

    I wasn’t able to start on it yesterday (was installing Fedora Core 4 on the boss’s laptop – finally, I’m making a difference 😉 ), but will hopefully get some work done on this tonight.

  4. I have made a start on this. I’ve decided to start from the lowest common denominator – browsers that don’t have any Canvas analogy. to help that, I’ll be using Walter Zorn’s JSGraphics library. You can follow my progress by periodically checking this page in a browser that does not support SVG.


  5. Emil A. Eklund seems to try a similar Project:

    He seems to have droped the emulation ov canvas in favour of SVG:

  6. well! I had some time to spare today, and wrote a good bit of code for the project. it is now basically usable, so I think it’s worth a new blog post!

  7. » implementing an SVG viewer in JavaScript « klog - pingback on April 26, 2006 at 5:02 am

Trackbacks and Pingbacks:

%d bloggers like this: