SVG - or Scalable Vector Graphics - is a largely unknown and underused standard in (web) development. You may have seen SVG logos and images and applied them in your web projects. But have you ever tried to work with dynamic SVG?
The idea of programmable illustrations is not new. You have seen these graphs displaying the historical value of a Bitcoin, for instance. Most likely, you were looking at a SVG graphic.
When using graphics, such as logos, images and backgrounds in your web projects, you would have to consider the resolution of the screen your users might be using. Being familiar with principles as mobile first you will be used to thinking of many different types of screens: smartphones, tables, laptops and high resolution desktop displays.
The idea of vector-driven images is that they can scale infinitely. In other words: one solution for all screens. That sounds too good to be true? We already have vector fonts that adjust to the resolution of our displays (and printers). So why not illustrations?
In the next few weeks and months, I intend to write a number of blog posts here about SVG with real-life examples and sample code. Hopefully it will inspire you to explore this standard yourself, and to consider using it in one of your future projects. Let's get started!