Web designers who care about efficiency and speed might like to have a look at Sam Ruby’s Blog.
All images are embedded SVG in the XHMTL. No bitmaps at all. Notice how fluid it is, how it scales with the browser’s zoom in and zoom out controls (Control + and Control – in Firefox) and as you resize the browser window.
The page is small, just 14.5k of HTML plus 6.6k of CSS. There’s 21k of JavaScript that isn’t required for the design. Even the drop-down menu at the top works with Javascript disabled. Finally there a WOFF web font that adds 40k (another nice technique). It would be nice to have web fonts hosted for cross-site caching.
One disadvantage of designing sites this way is that the page must be valid XHTML for inline SVG to work. This makes it difficult to support older browsers properly, because the server must send the content-type as text/xhtml+xml, not text/html. This will cause older browsers to download the page instead of rendering it. You could work around that with user agent sniffing. I think that Internet Explorer might need that in any case.
Another disadvantage is that very few CMSs currently support generating valid XHTML, so it’s difficult to know what tool we could recommend to help you to build and manage a website with inline SVG. Massimiliano of the Habari Project says:
I don’t have any examples of blog software constructed this way… the only way to find out how many people would like having SVG on their blog is to provide a blogging tool which allows them to do it.
Both issues could be worked around by using external SVG (in separate files) instead of inline (embedded in XHTML). External SVG files are more cacheable but require additional HTTP requests to fetch from the server the first time.
Most older browsers do not support SVG images, so although the site degrades gracefully, it looks very plain without any graphics. You could work around this with a server-side renderer that converts the SVG to PNG for older browsers.
I think this is an excellent example of a great technique that we could be using for many more sites.
