SVG – What Is It and How Can You Use It?
SVG (Scalable Vector Graphics) is an XML-based vector image format for creating 2d graphics. As well as this, it supports interactivity and animation and can be used to develop anything from simple animations to 2d based games.
SVG was first developed back in 1998, but it has begun to rise in popularity with responsive design as developers look for lightweight solutions that are capable of scaling across a wide range of devices.
Many developers use SVG for icons and to replace standard images, but they are now looking at new and innovative ways to implement SVG into their creations.
The design is made first, either drawn in illustrator or developed using SVG code. Then using something similar to Lazy Line Painter, the image can be animated to look like it is being drawn right there on the page.
Lynx #MassDebates also make use of SVG too, by creating polls and adding resizable graphics to represent different options. The following example is from the happiness debate – both the faces use SVG files to create resizable versions of the faces based on the width of the section.
You can start learning the basics of the library on snapsvg.io. Their introduction shows you how you can start using the library to create scalable graphics. It starts off by simply showing you how to draw circles and apply simple effects, but users can take a look into their extensive documentation to create their own cool creations.
A websites ability to respond to screen size has become a major part of web development over the past few years. With this, developers have tried to create scalable graphics using SVG. A good example of this is shown on this CodePen creation.
The house icon has 9 different versions which autocratically change when you resize the screen: