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).
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.
Source : Link , Question Author : P.Brian.Mackey , Answer Author : DA01