: 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

@Tiffany317

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.

But...

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.

Vote Up Vote Down

@Mendez620

Vector image designed in illustrator are saved as png, jpeg, or gif for the web, which are all bitmap images. So your answer is no, you cannot use vector images in webpages. However, with CSS3 you can do some vectory looking stuff with box shadows, multiple borders, corner radius...etc You can also use plugins that could allow you to use any font.

If you are using an image, you can size it down to maintain crispness, but not sizing up.

Vote Up Vote Down

@Si6392903

Further to what DA01 said...

In your scenario (ie., images scaled down on BlackBerry or other mobile devices), your best bet is to just create as high-quality images as you can and not worry about the resizing on small screens.

BlackBerry "supports" SVGs but not really. You can take a standard SVG and transcode it to a PME format, which is a compiled binary of your SVG. Unfortunately, if you go that route you need to do browser detection so you can serve the PME for BlackBerry browsers and SVG for all others. If you're going through the hassle of browser detection, you're better off just serving smaller images for mobile browsers.

Since there isn't true support for vector-based images, you're stuck with raster. Since you're also not in control of the zoom level in the browser, you don't want to scale the images down to what you think the browser will be at. With that in mind, just make the image the proper proportion for the page and let the browser handle the resizing.

Keep in mind that the new v6 BlackBerry browser is running on a modified Webkit engine. If you're testing against the older v5 Browser, it's a totally different animal.

Vote Up Vote Down

@RJPawlick971

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.

Vote Up Vote Down