User interface & digital design

John Newall Visual Communicator

SVG graphics: perfect solution to non-proportional scaling problem

In the office I work, I'm normally a one-stop-shop for webpage design and development (is 'full stack designer' a thing?) Occasionally I’m supplied with a print design and briefed to interpret it as a webpage, as was the case recently. The supplied design worked well in print. It was functional but graphically communicated a friendly and fun message perfectly suiting the content matter. The task look straight forward with an exception, a set of content boxes that where outlined with jaunty hand-drawn borders.

Web technology is amazing, it does many things well - Jaunty is not one of them. Hand drawn borders are the type of element web savvy designers avoid as they know challenges are likely to arise in the development stage. Yet, here they were, skilfully woven into the design. On first assessment these graphical elements might not appear to pose much technical challenge. When considered as part of a responsive web design complexities more become apparent. Widths are not fixed, and as text reflows, container heights also change. The borders needed to allow for non-proportional scaling without apparent distortion or loss of quality. Ideally the border thickness would also remain constant regardless of scale, and of course they had to look jaunty. A check list of impossible qualities for JPG, GIF or PNG formats, but there is a web friendly graphics format that is up to the task – Scalable Vector Graphics, also referred to as SVG.

SVG format describes shapes mathematically and can scale non-proportionally with no loss of quality. Each shape within the graphic can have a stroke (border) applied to it. Stroke width can even be decoupled from the overall scale of the graphic (W3C specifications for SVG includes non-scaling stroke). The format is human readable and directly editable. This allows aspect of the SVG graphic to be influenced by an external stylesheet.

With a little experimenting and google-fu I was able to engineer a happy ending for my web project. A hand drawn box in SVG format inserted into a responsive web page and styled via CSS. Modifying the stroke behaviour was straightforward, SVG can be edited in any code editor and is a flavour of XML which is easy to interpret, even for those with minimal coding experience.

SVG is an incredibly powerful graphical format to employ in digital design. Well supported in browsers these days, it brings the precision of mathematical vectors, defeats issues of scale, and allows direct access to tinker on a code level. Compared to other image formats supported by browsers SVG truly stands alone and brings unique solutions and opportunities for designers and developers alike. Due to these qualities I expect to see this graphics format gain more traction and predict we will see broader day-to-day use plus some exciting innovations in the near future.

Other articles