4

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).

Improve this question

4 Answers 4

Reset to default
5

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.

Improve this answer
2
  • +1 Ok I gotcha. And by increase compatibility, I mean resize an image without a noticeable decrease in the quality of the image. Browsers such as the blackberry browser can shrink a webpage down to fit in the dimensions of its window.
    – P.Brian.Mackey
    May 19, 2011 at 13:50
  • Most modern browsers can resize raster images down with few issues, so it might work fine if you leave them as JPG/PNGs.
    – DA01
    May 19, 2011 at 15:16
2

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.

Improve this answer
1

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.

Improve this answer
5
  • 1
    You can control the zoom on webkit, btw, though BB is a weird world of random when it comes to screen sizes and PPI. Not my favorite device to support these days. ;)
    – DA01
    May 19, 2011 at 15:17
  • @DA01 Clarification: The end user can control the zoom, but the designer/developer cannot. The zoom could be changed by the user on the old v5 as well, but was a lot less common since the default rendering was "column" mode. Now that v6 (webkit) version defaults to rendering it like a zoomed-out desktop browser, the zooming seems to be much more common (not scientific data, just anecdotal observation of the blackberry users in my office).
    – Farray
    May 19, 2011 at 15:33
  • And yeah... the variety of screen sizes & resolutions & multiple OS versions with significant differences is pretty obnoxious. Great phone for getting stuff done, pain in the butt to design for.
    – Farray
    May 19, 2011 at 15:37
  • I thought you could control the zoom with the webkit meta tags for scaling, but, now that you mention it, I'm not sure I've actually tested and confirmed that.
    – DA01
    May 19, 2011 at 16:52
  • @DA01 That one's news to me but I'm happy to hear it. Will be happier after I can test it. :)
    – Farray
    May 19, 2011 at 17:11
-1

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.

Improve this answer
2
  • "no, you cannot use vector images in webpages" is definitely incorrect, as you can see from the other answers.
    – e100
    May 19, 2011 at 16:40
  • +1 I see e100's point, but there is a lot of good information here.
    – P.Brian.Mackey
    May 19, 2011 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.