Whether it’s your company website or personal brand, ensuring your web pages are looking their best will help keep you ahead of your competition when visitors land on your website. When clients come to us for new Web Design & Build, the Design Process is something which takes careful consideration, and the graphics and images used are no exception.

When working with our clients we will always ask if they can supply us with SVG graphics over JPGs or PNGs where possible. So before we go any further, I hear you ask, “What is an SVG!?” 

SVG stands for ‘Scalable Vector Graphics’ which means the image can expand infinitely without losing quality as it is created using mathematical calculations to create lines and shapes as opposed to raster-based images such as JPEG’s and PNG’s which use pixels.

Zoom In, Spot The Difference

If you take a look at the example below, you will see the difference in quality between an SVG graphic and a PNG. Zoom in to see how the SVG graphic doesn’t degrade where as the PNG does. This is because with the PNG tiny square pixels are enlarging as it gets bigger, where as the SVG is constantly resizing the lines and curves to fit the size it needs to be viewed.

SVG

SVG allows three types of graphic objects: vector graphic shapes such as paths and outlines consisting of straight lines and curves, bitmap images, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects.

PNG

Portable Network Graphics (PNGs) is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most widely used lossless image compression format on the Internet.

Shapes

SVG have some predefined shape elements that can be used by
web developers. including:

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

Colours

You can use the same css color naming schemes that you use in HTML, whether that’s colour names (that is red), rgb values (that is rgb (255,0,0)), hex values, rgba values, etc.

Images

The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviours are defined in XML text files.In addition, you can specify the opacity of either the fill or stroke separately in SVG.

Something we do for our clients when redesigning and building their website is to convert their company logo to an SVG if possible, this then creates a crisp looking logo when their website is viewed on any mobile device.

You can see an example using our COBA logo below, one is an SVG, the other a PNG. If you’re reading this blog post either on your mobile phone or a tablet device you will see the logo is nice and sharp even when you zoom in.

Note though, It isn’t always possible to use SVG images on your website, Photography or images taken with a camera are essentially made up of a grid of pixels and will always have a maximum resolution at which they’ve been taken, so if scaled even larger than the original, the image will always degrade.

If you would like to help improve your website conversions for when visitors do land on your site, check out our 5 ways to improve your website conversions blog post here.

Leave a Reply

Your email address will not be published. Required fields are marked *