Can I use vector images to increase site compatability?


I am familiar with vector and raster images, in theory. In practice I don't know how to use vectors properly. Can vector images be used in a web pages to increase site compatability? For example, in CSS we can use EM to scale font up and down depending on the resolution capabilities of the device. This is good for desktop/mobile.

How do I know an image is vector? Are vector images supported on web pages by most modern browsers? Do they really help with the desktop/mobile problem? What other issues might I need to consider? (cost of vector image creation tools, difficulty, etc).

5/19/2011 1:31:00 PM

Accepted Answer

I'm not sure what you mean by 'increase site compatibility'. That said, yes, you can use vector based images online. However, support isn't nearly as much as your good ol' raster formats (png, gif, jpg).

The main options for vector imagery on a web site would be SVG and Flash. SVG is supported in many of the newer browsers. Flash is, of course, with a plugin, with the notable exception of iOS.

HTML5 has introduced the Canvas element as well. A canvas element is a raster image, but it's 'drawn' in the browser via vector instructions. So that can be an option for newer browsers as well.

5/19/2011 1:44:00 PM

I get the sense that the underlying question-behind-the-question here is "How can I create a site that works equally well for a regular monitor, a tablet and a phone?" possibly with a plaintive "Aaargh!" tacked on the end. Vector elements, such as SVG, are a help, but they're not a panacea. You still have to deal with photographic images and other things that just aren't "vectorable." Web clients/browsers have different capabilities when it comes to downscaling images. Some work well, some not so much, modern browsers being generally better than legacy browsers.


The design challenge is more than simply scaling up or down. There's the matter of aspect ratio: a image that floats left happily on a monitor, or a tablet in landscape mode, must sit in line on a phone in portrait mode. Text (or a vector) can scale down only so far before it becomes impossible to see properly. Buttons for a touch device (even a largish touchscreen monitor, but especially an iThing or similar device) have to be much larger, proportional to the rest of the page, than they do on a mouse-only device.

The best practical answer to these challenges is to build three CSS style sheets, one for each of the three general classes of device, and use the HTML5/CSS3 media query functions (with a bit of backup from javascript for non-HTML5 browsers) to determine which of the three CSS variations to deliver to the user. You could use more than three, of course, but I've not seen a case where it would be worth the extra effort to go that granular. Two would be a minimum. For the most part, assets will be common to all three, but where buttons or specific elements need to be set up differently you can do that.

Like a lot of folks, I've been going mildly cross-eyed about all this over the last couple of years, and reaching for the Tylenol. Help has shown up, though. The new Dreamweaver CS5.5 seriously reduces the amount of sweat equity you have to invest in all this. For one thing, it lets you set up these three classes of device and even view them all in a multi-screen display while you work on them. Even though I do probably 90% of my web dev in a text editor (DW has a pretty decent editor, though), I've gotten addicted to Live View in DW and the multi-screen preview thing. There's a video demo here that specifically addresses this whole issue, and will give you the idea.