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?

  • 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, 2013 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... Dec 10, 2013 at 17:17

2 Answers 2


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.


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

Your Answer

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

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