SVG - The “one-size-fits-all” image format - User Interface Design

SVG - The “one-size-fits-all” image format

One of the most important elements of clean web design and development is the imagery. Visitors don’t hang around for long on dull, uninteresting websites, so if you want to attract and keep an audience that is tuned in to appealing imagery, it’s important to pay attention to how you apply image technology. Contrary to popular belief, website imagery is not only a design issue. Developers are very much in control of how images look and behave on the web – especially on responsive websites.

The key to getting images such as icons, graphical data charts, logos, user interface elements etc. optimized and rendered as smooth as possible is to use SVG. Here’s more about what makes SVG perfect for the web’s obsession with responsive design.

What is SVG?

SVG (Scalable Vector Graphics) is a web developer’s best friend when it comes to imaging solutions on a responsive website. It’s not new technology, but its current application is pretty revolutionary for the user experience that developers and content publishers are trying to achieve on the internet. SVG is taking centre stage in 2014 because web browsers have finally come to the party in SVG support. This means that vector graphics are available for web use, which is a big deal because of the many ways in which users access and interact with the internet and web content.

Putting the scalable in “S” for SVG

Device screens already offer a resolution of 300 to 400 dpi and upwards, which means that low quality images just won’t cut it anymore. The scalability of an image refers to the fact that you can resize the image without it losing quality or pixelating. Some websites appear small on some devices, where zooming may cause the images to appear pixelated while text remains crisp and clear. SVG offers users (and developers) the paradise of endless resolution on graphical elements like icons, logos, line-art and graphical data charts.

High quality does not mean large file size – with vector graphics, exactly the opposite is true. In most cases the vector data used to draw the graphics is far smaller than using a flat image. Of course this always depends on the complexity of the graphic, as in some rare cases a flat image is smaller than the vector data itself.

“V” for Vector

An SVG image is in fact an XML document storing text-based vector information, telling the web browser how to draw this element. The line data represents boxes, circles, curved lines, polygons, bezier-curved shapes, and all sorts of 2-dimensional graphics.

Now that vector graphics are supported in the latest browsers, developers can get to work on fulfilling the expectations of web users and of their clients. Vector graphics are created and saved in image editing software like Adobe Illustrator or Photoshop. How the resolution-independent vector performs on screen is encoded into an XML document, or directly into your HTML 5 web page. This means that no matter what the resolution and size of the device screen being used, the coding ensures that the vector scales accordingly and the user has a great experience. No more pixelated buttons and icons. Clear, sharp lines, and well-behaved scaling.

SVG completes the picture for responsive web design

Responsive web design allows website developers to be flexible in their approach. Media queries running in the back-end ensure that it doesn’t matter what size the user's screen is (thanks to all the difference devices used today), the page elements will shift and reposition themselves so that users don’t miss a beat. The need for an adaptable, cross-platform experience is what is driving website development requirements at the moment. SVG is the perfect visual solution to this for a number of reasons:

  • Small file sizes
    Even if you use SVG and you don’t intend to blow up your images to billboard-sized visuals, SVG’s offer much smaller file sizes with endless resolutions. There’s no longer a need to upload and use a large .PNG file “in case” you need a better resolution, if you can get a small SVG to do endlessly more than the PNG, and without losing any detail.
  • Small is fast
    Mobile phones can be somewhat slow to use for browsing, especially on a 3G, HSDPA, or Edge internet connection. Loading websites are rendered even slower if their images are large. Small file sizes mean much faster loading times. Web users will love you!
  • One size fits all
    Vectors simplify workflows for companies. The same corporate images used on one platform (such as the company website) can be used on printing brochures or printed on banners or posters. This means one format, one file size, but numerous applications. Not only do users have a consistent online experience, but their experience of the brand as a whole will be underpinned by those sharp, flawless images.

Forget about bitmaps, .jpg’s, .png’s, and other rasterized images. SVG’s are here to stay. To experience the effectiveness of SVG imagery - hold Ctrl, scroll up with your mouse-wheel and observe our icons and logo graphics. If you are using an out-dated web browser, you will not see the effect and now know, you're behind!

Blogroll

  • 1 Apr 2014
    The key to getting icons, data charts, logos and user interface art optimized and rendered as smooth as possible is to use SVG. Here’s more about what makes SVG perfect for the web’s obsession with responsive design
  • 19 Mar 2014
    Imagine designing a website exclusively for a mobile device or smartphone. It’s not a mobi site, but a full functionality website akin to what you’d find if you accessed a responsive website on your smartphone
  • 29 Aug 2013
    Is it worth having a mobile app or should you just have a responsive website?
  • 31 Jul 2013
    Many people experience hacking on their basic Joomla websites, here’s why
 

Portfolio

Contact

South Africa
South Africa
+27 73 226 8293