Using SVG in web graphics: A web designer’s guide

Trends in web design industry keep changing quite fast and at times, professionals find it hard to make the right choice from the available lot of applications and scripting languages. The same dilemma is faced by web design professionals when it comes to selecting the apt image formats for using graphics in websites. While a majority of them use either JPEG or GIF format for web graphics, things are changing with time. With demand for responsive web design going up, web designers are resorting to image and content that can be used in a flexible way to cater to new trends in the industry.

Why SVG is becoming popular among web designers

For example, a lot of web users nowadays make use of mobile devices like smart phones and tablets to browse web. These devices have varying screen size and resolutions. Websites with lots of images and graphics may not be rendered in the browsers of these devices at times. Using static and raster based graphic formats do not help in this context. That explains why a number of designers are opting for SVG, or Scalable Vector Graphics to design websites that can be viewed seamlessly across devices without much coding.

Basic of SVG

As evident from its name, SVG format deals with vector graphics. It relies on XML to define basic shapes, paths and text that can be used as graphic in web design. It is also possible to incorporate complex and advanced design elements like animation and gradients in SVG. The major advantage of using SVG is that graphics and images created using it will not get distorted or disproportioned when users zoom in and out of a webpage. SVG graphics, being based on vector, are resolution independent and can be viewed the same way in devices with multiple screen resolution and size.

Browser compatibility issues

One of the major factors behind lack of widespread adoption of SVG in web design industry is lack of browser compatibility. Not all SVG filters are supported by all web browsers but things are gradually improving. In the last couple of year in particular, major browser makers, including Microsoft have woken up to the potential of including SVG support in their products. IE9, Safari 4 and later versions and Opera version 10 onwards support SVG. Chrome and Firefox version 4 onwards offer support for this standard. Even new mobile web browsers are sporting support for SVG nowadays. Web users who are still stuck with outdated browsers will not be able to see SVG images.


While more or less all modern web browsers can render SVG images without a glitch, the same may not be the case with mobile web browsers. There are millions of users who own entry level mobiles with underpowered hardware. These devices may struggle to render large SVG images properly on their screens. When it comes to animating vector graphics, SVG has lagged behind Canvas so far. Therefore, web design professionals need to be a little careful before using SVG extensively in their websites.

However, SVG scores over conventional raster graphic formats when it comes to bandwidth consumption. With JPEG and even PNG, you cannot apply too much compression as doing so will reduce file size but make image quality deteriorate as well. On the contrary, using high resolution JPEG files in a website can add to its size and affect page rendering time. This can be a hassle for web users who do not use fast connections yet. SVG does not require a huge amount of bandwidth. It can be used for web page background images that are not photographic in nature. However, converting real life images and photographs to SVG may not yield realistic results. Therefore, designers can use SVG graphics in websites except where photos and complex images need to be used.


Despite the few limitations it comes with, SVG can be used for designing websites that cater to evolving user needs. With time, overall performance and support for multiple browsers is going to increase, and so compatibility issues will not be cumbersome for designers. Required amount of testing and keeping the basics of graphics usage in web in mind will help designers to make professional and stunning sites using SVG.

VN:F [1.9.12_1141]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.12_1141]
Rating: 0 (from 0 votes)
This entry was posted in Web Design and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

You must be logged in to post a comment.