Using SVG in your websites

SVG is an amazingly capable graphics technology with the only problem that it is not supported by all browsers. So what is SVG? According to Adobe, who invented this technology, “Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics”.

Let’s see what this means. Scalable means that the technology is resolution-independent. So whatever the resolution it will look good. Vector means that the image data is described using mathematical coordinates, for example :

<path d="M 100 100 L 14 100
    L 120 140 z"/>

Finally, Graphics means that it’s used to create images.

So why should we use SVG? First of all SVG is very highly searchable because SVG images are really just interpreted XML files (just as web pages are interpreted HTML files), and XML is simply plain text. Secondly, like XML, SVG was designed in a modular way. This means that SVG provides strong mobile support. It comes in a few different flavors that are interoperable with one another. It does this by defining profiles to support low-end devices with reasonable quality while still providing high-fidelity content. Finally SVG is an open standard.

Browser Support

Browser support for SVG has been increasing for a long time, and within the past couple of years it’s picked up considerably.

• Opera has full support of SVG.
• Gecko has been supporting SVG from 2005 and nowadays Firefox supports the majority of features of SVG.
• Webkit started supporting SVG from 2006 and Safari (which uses Webkit as its rendering engine) has enough features supported that make the implementation usable.
• Internet Explorer…… Well you know does not support SVG. However recently  Microsoft have joined the W3C SVG working group. So there is some hope for the future.

Of course many us cannot ignore Internet Explorer. So what can we do? Here are a number of workarounds for IE:

• Rely on HTTP content negotiation to serve SVG to supporting browsers, and raster images to Internet Explorer. While this works reliably, it feels like 1995 again because you still need two separate pieces of content, unless you build one dynamically from the other. Wikipedia uses this technique.
• Make users install plugins. Adobe has one called Adobe SVG Viewer.
• Another solution is to use a cross-browser API. There are quite a few out there. For those who use Dojo there is SVG for the Dojo toolkit, svgweb is an experimental library by Google and finally there is RaphaëlJS. This is a stand-alone  and therefore can be easily mixed with other JavaScript libraries.

So how do these frameworks work. Fortunately SVG-writing JavaScript frameworks all follow the same paradigm:

• Provide a cross-browser JavaScript API for writing SVG commands, and
• Write the appropriate vector graphics language to the DOM nodes based on your commands (SVG to conforming browsers, VML to Internet Explorer).

Browser Testing on Windows 7

This week I installed Windows 7 on my laptop and I discovered a very nice feature for browser testing (on that browser you all hate 🙂 ). This is called XP Mode which allows you to run Internet Explorer 6, 7, and 8 all on the same machine.

Testing your web sites in Internet Explorer is so much harder than it should be. IE6, IE7, and IE8 have a healthy market share, yet it is impossible to test all three versions of the browser on a single machine. There are a number of software that allows you to test all 3 borwsers on one machine however they are all flawed and do not replicate the real environment, apart from the fact that the majority do not run on Vista, let alone Windows 7. The most reliable solution is to run each browser on a single machine.

How many of you use this solution? Very very few because nowadays web developers resort to using virtual machines such as VMware or VirtualBox. Virtual machines emulate a PC (guest) on your real PC (the host). You can also run a different OS on each virtual machine. The nice thing about virtual machines is that most of them are files on your hard disk and these can be moved, backed up, and even cloned easily on other PCs.

Installing Virtual PC and XP Mode

Please note that only users who have Windows 7 Professional, Enterprise, and Ultimate can install Virtual PC. For Windows 7 Home users can install Virtual PC, but they will need their own XP disk and you cannot use XP Mode Integration. For Windows Vista and XP users one can install Virtual PC 2007.

One must also note that to run XP Mode effectively one should have at least 2GB of RAM. It also needs hardware-assisted virtualization

1. Check Your PC’s compatibility
   To run XP Mode effectively, I’d recommend at least 2GB of RAM. It’ll probably work with less, but it will be more of a chore to use. XP Mode requires hardware-assisted virtualization (HAV). This is supported by most modern processors, but it may need to be enabled in your BIOS. The BIOS menu is normally accessed by pressing DEL or ESC immediately after switching on your PC. Microsoft also provide a useful HAV detection tool.
2. Download XP Mode and Virtual PC
   The downloads are available from the Microsoft Virtual PC page. After selecting your Windows 7 OS version and language, you’ll be presented with two download links:
   • Windows XP Mode
   • Windows Virtual PC

   Download and virus-scan both files before proceeding to the next step.

3. Installation
   You must install XP Mode first! I realize this seems a little odd, but it’s what you need to do. Once it’s complete, install Virtual PC and reboot your PC.

Running XP Mode for the First Time

Your new XP VM can now be launched and configured.

1. Start XP Mode
   To start XP Mode, choose Start > All Programs > Windows Virtual PC > Windows XP Mode. You’ll be prompted to enter the VM file location and a password for the XPMUser account—please keep the password safe!

   Click Next and you’ll be asked whether automatic updates should be enabled or disabled. I’d recommend disabling updates—you’ll have no need to automatically upgrade IE6 just yet. Click Next again and the XP Mode guest OS will install. After a few minutes, you’ll be presented with the fresh Windows XP screen.

2. Install Updates
   You should now install the latest updates, but be very careful to avoid installing IE7 or IE8! You could also remove any unnecessary Windows components, such as Games, Media Player, MSN Messenger, and so on from the Add/Remove Windows Components panel in the Add or Remove Programs control panel.
3. Configure the VM Resolution
   1. From the XP Start menu, click Run, enter mmc, and click OK.
   2. From the console, choose File > Add/Remove Snap-in. Select Group Policy Object Editor from the list and click the Add button.
   3. A dialog box is displayed and Local Computer should be listed in the Group Policy Object field. Leave as is and click Finish, then OK.
   4. Navigate to Local Computer Policy > Computer Configuration > Administrative Templates > Windows Components > Terminal Services, then double-click the Limit Maximum Color Depth setting. Choose Enabled and set Color Depth to 24-bit.
   5. Click OK several times to navigate your way out and close the console.
   6. Right-click on the desktop, choose Properties; select Settings and apply an appropriate screen resolution, such as 1024×768 in 32-bit color.
   7. Finally, from the VM menu, click Tools > Enable Integration Features.

The XP Mode VM runs at an unusual 960×600 resolution with 16-bit color. Unless it’s changed, IE6 and IE7 will also run in 16-bit color mode and your subtly shaded web application will look a bit strange. Changing the resolution and color depth is a little unusual because XP Mode uses Windows Remote Desktop. From the VM menu, select Tools > Disable Integration Features. This will log you off XP and you’ll need to re-enter your password. Then, follow this procedure:

Once you’re done, it’s important to fully shut down the guest XP OS—click the window close button, choose Shut down, then click OK.

Hard Disk Differencing

VMware has a great facility for taking a snapshot of a VM and creating multiple clones. Each cloned VM is independent but all inherit from the same base installation. VirtualBox also allows cloning. Virtual PC offers a facility called hard disk differencing, that allows you to create any number of VMs from an existing hard disk image. Unfortunately, any changes to the original disk image will corrupt all inheriting VMs. However, we can use differencing to create two new VMs from our XP Mode disk image. One VM will be used for IE6 and the other will be used for IE7. You need to do the following:

1. Create a New Virtual Machine: Start Virtual PC from Start > Programs > Windows Virtual PC > Virtual Machines then click Create virtual machine on the toolbar. Enter the name and location of your new VM, then clickNext.
2. Configure RAM: The next screen asks how much RAM your VM requires. 256MB should be enough for just running Internet Explorer. Enter the amount and click Next.
3. Configure Hard Disk: The next screen asks you to add a virtual hard disk. Choose Create a virtual hard disk using advanced options and click Next. Then choose the Differencing option. Click Next twice, then select your original XP Mode hard disk. This is a file named Windows XP Mode.vhd and is located where you originally installed XP Mode. Finally, clickCreate to save the VM and return to the Virtual Machines dialog.

Your new VM is now ready, but remember that you should create two: one for IE6 and one for IE7. Repeat the four steps above as necessary. Once your two VMs have been created, I’d recommend making the XP Mode hard disk file read-only (Windows XP Mode.vhd). That should ensure the file is protected from modifications if you accidentally boot your original XP Mode image.

Running IE6 from Windows 7

1. Start the Virtual Machine:  Start your IE6 Virtual Machine by double-clicking its icon in the Virtual Machines folder (Start > All Programs > WindowsVirtual PC > Virtual Machines). You’ll need to log on with the XPMUser ID and password you entered when installing XP Mode.
2. Configure XP and Internet Explorer: It’s a good time to change the VM screen resolution and configure IE6 as you want it. Developers should install the Microsoft Internet Explorer Developer Toolbar.
3. Copy the IE Shortcut:  Right-click the XP Start button and select Explore All Users. Any shortcut you copy into this folder will be replicated in the Windows 7 Start menu. Therefore, create or copy an IE shortcut as necessary. After a few moments, a new folder containing the IE6 icon will appear in the Windows Virtual PC Start menu.
4. Close the Virtual Machine: From the XP Start menu, choose Log Off. Close the window, but choose Hibernate from the drop-down list.
5. Start IE6 from Windows 7: Click Start > Programs > Windows Virtual PC, then locate the newly created VM folder, and click the IE icon. The first time IE is run, you will be prompted for the XPMUser password. Assuming you keep your VM hibernated, IE6 will start within a few seconds every time you click its icon.

The same steps must be repeated for running IE7. However you need to download and install IE7.

You can now run IE6 from one VM disk, IE7 from the other VM disk, and IE8 as a native application from the same Windows 7 desktop.

Caching: A Problem or a Solution

Caching is a very good technique to minimize load times and bandwidth use by ensuring that components in your site such as images, stylesheets, and JavaScript files are cached once by your visitors and they do not need to download them each time they want to access your site. However it is not the first time that you do an update in one of your stylesheets and some of your visitors do not see these changes.

So let’s investigate this problem. By default, cached files expire quickly. This means that while very frequent visitors might experience a problem with a cached style sheet immediately upon making a change, infrequent site visitors (visitors who do not visit a site every day) will not encounter a problem with cached content. However, it also means that visitors will often be downloading files unnecessarily, leading to longer load times and wasted bandwidth.

To decrease load times and decrease bandwidth you may want to tell browsers to keep these cached files for a longer period of time. But having done this, your site’s visitors may experience problems when you make changes to images, style sheets, or scripts. While showing an image that is outdated is not that harmful imagine if the HTML is updated and the JavaScript is not. This may break the functionality of your site. Below I mention a number of techniques that can be used to trick the browser into thinking that this is new content.

Modify File Name

If you change the name of your file the browser thinks that this is new content and therefore downloads the file. This however can be tedious if you have a lot of files or if you change the content often. However if you choose a good naming convention this could also serve as a version control.

Query Strings

One can add a query string to the file paths. Each time the query string changes the browser downlaods that file. For example you can include the verison number in your path such as “/css/styles.css?version=1.0”. This is also a very good technique for version control. The only problem with this technique is that if you use it with images you may also need to change all the stylesheets and HTML that reference that image.

The Path Method

In my opinion this is the best solutions. It basically includes the version information in the path of the resource, rather than in the filename or query string. So, for example:

<link rel="stylesheet" href="/css.v1/styles.css" type="text/css" />

Well I know what you are thinking that this involves as much work as renaming the file. Well no because there is a very neat solution to this problem. What we can do is use a rewrite rule to make the URL /css.1234/styles.css point to /css/styles.css on the server. For example to do this with Apache, you’ll need to use mod_rewrite. You’ll also need to have mod_rewrite installed and permissions for .htaccess files.  Setting up a rule for this is straightforward. You can add the following lines to the .htaccess file located in your site’s root web folder:

RewriteEngine On
RewriteRule css[.][0-9]+/(.*)$ css/$1 [L]

This rule uses a regular expression to match any path consisting of css, followed by a period (.), followed by any number of numerical characters, and finally a slash. Any path matching this pattern will be rewritten to just /css/<filename>. The [L] specifies that no further rewrite rules should be applied to this request.

Conclusion

No site can afford to ignore browser caching. Caching can significantly improve performance for your users, and save money on bandwidth while you’re at it. But as any other technology you can easily use it incorrectly. However if you use the methods above you should be able to use caching at your own advantage.

CSS 3: Background Size

Background size allows you to scale the CSS background image you are using. Until now background-size as intended in CSS3 is not supported in any browser, however Chrome, Opera, Safari, and Firefox 3.6 alpha all implement their own custom markup. Here is an example:

body {
    background-image: url(img1.jpg);
    background-size: 60% 40%; /* w3 spec - no browser supports it yet */
    -moz-background-size: 60% 40%; /* used for firefox */
    -o-background-size: 60% 40%; /* used for opera */
    -webkit-background-size: 60% 40%; /* used for safari and chrome */
}

It is important to note that these proprietary controls will be ignored by other browsers so you can start using them immediately. Of course always test with other borwsers to see how your web page displays in browsers (such as Internet Explorer) that do not yet support the background-size property.

CSS 3: Multiple Background Images

Now this is cool! Multiple background images can allow you to do some awesome tricks with layout without the need of writing complex markup to your website.

The basic syntax for multiple backgound images in CSS3 is easy. Instead of listing a single image source for your background-image property, you list up to a maximum of four comma-separated images. You can also specify up to four values for the respective background-repeat and background-position properties for each of the images. So here’s the code:

#multiBackground {
  background-image:url(img1.png), url(img2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
}

So for the million dollar question, which browsers currently support multiple background images? At the moment it’s Safari 4.0, Chrome 3.0, and Firefox 3.6. But beware Firefox 3.6 is only in alpha so the number of users using this browser will be only a handful.

So is it worth the hassle? One of the problems is that other browsers reject the code and will not even display the first image because of the comma in the decleration, leaving the background blank. However there is a workaround for this. First you declare the background-image in the usual way (single image). Opera and older versions of Firefox and Safari ignore any newer CSS code. For Internet Explorer one can use conditional comments to send the single-image code.

Multiple background images can be used for wonderful effects, HOWEVER, make sure that your website will work with older browsers, and with new browsers that do not support this technique.