Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

In my opinion, raster graphics (GIF, PNG) is used much more that vector graphics on the web. I am wondering why? Wouldn't vector graphics be more suitable for web pages design (i.e. buttons design, custom borders etc.)?

One answer which I have found, is that browsers support PNG and GIF more widely than, for example SVG. But again a question arises - why do browsers support raster graphics better? What are the reasons for it?

Currently, vector graphics is not usually considered when designing a website. See this question.

So, my question: why is raster graphics used more and supported better even in cases when vector graphics seems to be more suitable?

share|improve this question
    
It might have to do with 'tradition' as well. As support for svg increases, more designers are using vector-based software for creating web graphics. It hasn't always been the case, some designers use Photoshop, which simply can't export as svg. –  Yisela Dec 10 '13 at 16:38
    
Vectorial graphics need to be reasterized by the client, and just in these years the client are fast enough to render the image in real time. Raster images was faster to manage. It needs some time to the designers to adopt the novelties... –  Paolo Gibellini Dec 10 '13 at 17:17
add comment

2 Answers

up vote 0 down vote accepted

I suspect that it has to do with the fact that the needs of design are not met well by pure vector art: many textures and effects are raster based and if you are going to include any raster imagery, then you might as well go full-raster.

If you aren't going to scale by more than a factor of 2 and are using a hybrid SVG, you aren't really realizing the benefits of vector art.

A minor issue with vectors is that they are calculated at render time. In most cases, this is a non issue, but the greater the complexity, the longer the draw time. Coupled with a handheld pinch-zoom device where re-rendering may be happening often, the time adds up and you perceive input lag. Raster "bakes in" the render time so you won't get time spikes during render. This is more a technicality and is generally optimized by the programmers of the particular OS or software (as best as possible).

share|improve this answer
add comment

SVG is the only vector (it is actually XML code driven) format supported by browsers. Although it has been around for a while, it is relatively new as far as browser support goes. Like all newer techniques (HTML5, CSS3), they take a while to become mainstream.

Many designers have probably yet to adopt using SVG as currently, you'd have to make a fallback PNG anyway to support those older browsers.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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