Warning: this is an article about the SVG file format. It contains a small amount of code and maths which some readers may find distressing. 

OK, we may have lost some eyeballs after that opening line but well done to YOU for being here with me on paragraph two. Let those others complain that they don’t have their own company logo in the right size, that their web pages are slow to load and their icons are fuzzy.

Vectors are a mathematical way to describe direction and magnitude. I looked that up. Don’t worry about it. If you want to know more on that then head here but simply put, by using maths to describe the position of points and the shape of the lines between them, we can accurately describe any 2D shape. You will have seen dozens of SVGs (Scalable Vector Graphics, pronounced Ess Vee Jee) already today on the way to this article and literally thousands of vector shapes.

Scalable Vector Graphics

Whilst he was working at Renault back in 1959, the French engineer Pierre Bézier worked out how best to describe curves as points with simple handles. His solution is so clean that it has not been bettered and Bézier curves are still used in our design apps today.

The Scalable Vector Graphic is well named. As Rich Hardiman covered in this BookMachine article one of the major benefits of using vector graphics is that they have no limit to the size at which they can be used. The same logo can be scaled down to a business card and up to the side of a bus with the same sharp quality. 

Using code to describe images 

Here is the SVG code for a lovely green circle.

In just three lines of code we have defined an overall shape that is 300 pixels high, and made up of a circle with a centre(c) that is 150 pixels from the left (x) and the top (y), and has a radius (r) of 120 pixels. We have then filled the circle with the forest green colour.

Paste this code in any text editor, save it as a file named something like circle.svg and you can open it up in any browser. Or why not have a play with it here in Codepen.

So now we can describe any shape in just a few line of code, can you imagine the power of that? If I asked you to change the colour of our circle to red, you might already have a good idea of how you might do this.

And because we can alter the colour and shape quickly ourselves, we can alter them virtually instantaneously using a bit more code. Infographics, graphs, icons, colours and wording can all react and alter depending on live data.

I dare you to go here and alter one or two of the values in line 11 of the JavaScript!

SVG can be much more complex too. When Google set out to map every street in the world they chose SVG. I bet that does stretch to more than three lines of code though.

HTML5, the language of the modern web, already has baked in support for SVG and therefore so does EPUB3. The language used by SVG is another of those mighty web standards. SVG is written in XML.

Size is important

As shapes get more complex then we don’t have to code them ourselves. We get our computers to do the maths bit for us. Twitter gives out their brand logos in various file formats. The SVG for the twitter logo is less than one KB.

The twitter logo as a PNG is a pretty tiny 400?×?400 pixels (so 160,000 pixels in all) and is already weighing in at over five times more than that of the SVG.

Rather than dumbly shunting pixels around, when our phones (or ‘hand computers’ as I heard them nicely described recently by Simon Appleby of BookSwarm) use SVG they can use their bandwidth and processors to do everything faster, at better quality and giving a more useful for user experience. They can animate our icons as they are tapped, present data in dynamic visual ways and have really good detail in that poo emoji.

Using SVG in publishing

SVG can be used as a file format for print well as screen. SVG can be generated, edited and exported with Adobe Illustrator and Photoshop and the whilst the latest versions of Adobe InDesign do not create SVG they do allow the placing of SVGs on the page and support their exporting out to digital formats.

Need a quick free icon to describe the word virus? Then The Noun Project has 4500+ ready to go.

Towards the end of my previous BookMachine article Just your type – new font formats come to InDesign I covered the OpenType SVG Font and how they are able to contain vectors, pixels, transparencies, colours, blends and gradients.

The past and the future

SVG itself is not new. It has been a open web standard for over twenty years (first developed by World Wide Web Consortium in 1999) and so it is already supported just about everywhere we look.

There is much more to SVG than can be covered here. It can also hold live text, fonts and styling information, pixels images and animation instructions. SVG is more accessible, adaptable and responsive and it can also describe size and position. Everything you need to describe a page…

I expect the SVG format, or something very similar to it, will replace the PostScript and PDF and that InDesign, or it’s successor, will be use that for the print and digital publishing of the future.

Ken Jones runs Circular Software. He was Technical Production Manager and Publishing Software Trainer for Penguin and Dorling Kindersley for many years and now offers software, training and advice to publishers such as Quarto Group, Bonnier Books and Pan Macmillan to help them get the best from their print and digital workflow.

Learn more about HTML, SVG, XML and their use in digital publishing in this month’s online BookMachine CAMPUS Understanding Accessibility in EPUB course.